Custom forabg widths

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
kinerity
Community Team Member
Community Team Member
Posts: 1888
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Custom forabg widths

Post by kinerity » Sun Jul 01, 2018 9:05 pm

I'm coding a custom page for a client and need specific forabg widths. Currently, I am doing this with the tables.

Code: Select all

<div class="forabg">
	<div class="inner">
	<table class="table1" cellspacing="0">
		<colgroup>
			<col width="5%" />
			<col width="45%" />
			<col width="15%" />
			<col width="20%" />
			<col width="15%" />
		</colgroup>
		<thead>
			<tr>
				<th>Header 1</th>
				<th align="left">Header 2</th>
				<th align="center">Header 3</th>
				<th align="center">Header 4</th>
				<th align="center">Header 5</th>
			</tr>
		</thead>
Any chance someone can point me in the direction of how to accomplish this with the dt and dd tags? I tried looking at forumlist and viewforum HTML files, but when I try to mimic the CSS, nothing lines up. It should look like this:

forabg.png
forabg.png (2.46 KiB) Viewed 476 times
Kailey Truscott - Community Team

User avatar
Dan Stylez
Registered User
Posts: 169
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom forabg widths

Post by Dan Stylez » Sun Jul 01, 2018 10:30 pm

There's a 440px margin-right that gets in the way,

You may be able to tweak something like this

HTML:

Code: Select all

<div class="forabg">
	<div class="inner">
		<ul class="topiclist">
		<li class="header">
			<dt class="header1">Header 1</dt>
			<dd class="header2">Header 2</dd>
			<dd class="header3">Header 3</dd>
			<dd class="header4">Header 4</dd>
			<dd class="header5">Header 5</dd>
		</li>
		</ul>
	</div>
</div>

CSS:

Code: Select all

li.header dt.header1 {
	width: 5%;
	margin-right: 0;
}

li.header dd.header2 {
	width: 45%;
	text-align: left;
}

li.header dd.header3 {
	width: 15%;
	text-align: center;
}

li.header dd.header4 {
	width: 20%;
	text-align: center;
}

li.header dd.header5 {
	width: 15%;
	text-align: center;
}

Result:
Test Header.png
Test Header.png (1.69 KiB) Viewed 452 times

User avatar
kinerity
Community Team Member
Community Team Member
Posts: 1888
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Re: Custom forabg widths

Post by kinerity » Sun Jul 01, 2018 11:37 pm

Thanks! Almost there. Any idea how to get the li items for the data to line up? I tried added the classes to the dt and dd tags but no go.
Kailey Truscott - Community Team

User avatar
Dan Stylez
Registered User
Posts: 169
Joined: Tue Jan 16, 2018 6:17 am
Contact:

Re: Custom forabg widths

Post by Dan Stylez » Mon Jul 02, 2018 12:51 am

No problem
I tried it with the standard 3 column topic list so slightly different, but if you've added the classes, something like this in the CSS should do it for 5 columns:

Code: Select all

ul.topiclist dt.header1 {
	width: 5%;
	margin-right: 0;
}

ul.topiclist dd.header2 {
	width: 45%;
}

ul.topiclist dd.header3 {
	width: 15%;
}

ul.topiclist dd.header4 {
	width: 20%;
}

ul.topiclist dd.header5 {
	width: 15%;
}

User avatar
kinerity
Community Team Member
Community Team Member
Posts: 1888
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Re: Custom forabg widths

Post by kinerity » Mon Jul 02, 2018 12:10 pm

Thanks, I'll play with it.
Kailey Truscott - Community Team

User avatar
Hanakin
Infrastructure Team Member
Infrastructure Team Member
Posts: 723
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom forabg widths

Post by Hanakin » Mon Jul 16, 2018 4:07 pm

can you use css grids? it may be way easier to do this way otherwise i would suggest using flexbox as it gives you full control over alignments

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: No registered users and 7 guests