Custom forabg widths

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

Custom forabg widths

Post by Kailey »

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 663 times
Kailey Snay - Community Team Leader
Knowledge Base | Documentation | Community rules

If you have any questions about the rules/customs of this website, feel free to send me a PM.
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Custom forabg widths

Post by DTMWC »

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 639 times
Boom.
User avatar
Kailey
Community Team Leader
Community Team Leader
Posts: 3732
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Snay
Contact:

Re: Custom forabg widths

Post by Kailey »

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 Snay - Community Team Leader
Knowledge Base | Documentation | Community rules

If you have any questions about the rules/customs of this website, feel free to send me a PM.
User avatar
DTMWC
Registered User
Posts: 379
Joined: Tue Jan 16, 2018 6:17 am

Re: Custom forabg widths

Post by DTMWC »

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%;
}
Boom.
User avatar
Kailey
Community Team Leader
Community Team Leader
Posts: 3732
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Snay
Contact:

Re: Custom forabg widths

Post by Kailey »

Thanks, I'll play with it.
Kailey Snay - Community Team Leader
Knowledge Base | Documentation | Community rules

If you have any questions about the rules/customs of this website, feel free to send me a PM.
User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 1065
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Custom forabg widths

Post by Hanakin »

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”