Currently forums/topics lists uses mix of pixels and percentages for width of each component:
- Forum name + icon: width = 50% + padding-left: 45px + padding-right: 5px, making total width = 50% + 50px
- Topics and post counters: width = 8% + left border: 1px, making total width = 8% + 1px
- Last post information: width = 25% + left border: 1px, making total width = 25% + 1px
So total width of each row is 83% + 52px.
It is fine on common width of 1000-1500px. On lower resolution it causes last column to break layout and go on next line. On higher resolution it causes columns to be unreasonably wide.
It was done that way in prosilver because back then browsers did not support box-sizing:border-box, but now all browsers do. Even IE8. So its time to do it properly.
I suggest to change box-sizing to border-box and adjust all widths to numbers in pixels, similar to old width if total width was 1000px. Use negative margin-right for first column and positive margin-right for its content to counter that negative margin, float other columns to left:
- Forum name + icon: float: left; margin-right: -410px; width: 100%;
- - Inner div: margin-right: 410px to counter negative margin for parent element
- Topics and post counters: float: left; width: 80px
- Last post: float: left; width: 250px
It will require changing templates a bit, not just CSS: every <dt> will have to have inner <div>
Advantages of doing that:
- Forums/topic lists will take full width of its container
- It will look the same on all screen resolutions
- It will make it easy to hide columns for low screen resolution, allowing to implement responsive design
- Mod authors can easily adjust margin-right of first column to add extra columns
Disadvantages of doing that:
- Minor adjustments to HTML code will be required to add inner div for <dt>
- IE7 will require minor tweaks
Forum list layout
Forum list layout
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: Forum list layout
Updated RFC a bit. Forgot that this method requires adding inner div element for <dt> to counter negative margin for <dt>.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: Forum list layout
Almost finished working on implementation. It works with all browsers, including outdated IE up to IE7.
Solution will also fix another issue: notification settings layout. Currently it uses same layout as forums list, but amount of <dt class="mark"> can be infinite, potentially breaking layout. It should be replaced with table.
Solution will also fix another issue: notification settings layout. Currently it uses same layout as forums list, but amount of <dt class="mark"> can be infinite, potentially breaking layout. It should be replaced with table.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: Forum list layout
Ticket: http://tracker.phpbb.com/browse/PHPBB3-11489
PR: https://github.com/phpbb/phpbb3/pull/1331
New .topiclist lists have additional class name that indicates how many columns list includes. Columns are split in 3 categories:
- 80px wide column: dd.posts, dd.topics, dd.views, dd.extra, dd.mark
- 250px wide column: dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info
- 125px wide column (used only once, 2 such columns in a row making total of 250px): dd.option
All width values in CSS starting with asterisk are for IE7 (such as *width:79px;). Other browsers ignore it.
.topiclist lists by default have 410px margin on right side, allowing for 1x 250px column and 2x 80px columns in addition to main column.
Additional classes were created for lists that use different column layouts:
- .missing-column: list that is missing one 80px wide column
- .two-columns: list that has only 1x 80px column in addition to main column
- .two-long-columns: list that has only 1x 250px column in addition to main column
Contents of all <dt> elements were wrapped into <div class="list-inner">. Contents of <div class="list-inner"> were moved to the right by one tab character to keep structure.
Patch was tested with modern browsers and IE7. Lists look exactly the same as they used to at about 1000px width, you'll notice difference in layout only if you change browser width.
PR: https://github.com/phpbb/phpbb3/pull/1331
New .topiclist lists have additional class name that indicates how many columns list includes. Columns are split in 3 categories:
- 80px wide column: dd.posts, dd.topics, dd.views, dd.extra, dd.mark
- 250px wide column: dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info
- 125px wide column (used only once, 2 such columns in a row making total of 250px): dd.option
All width values in CSS starting with asterisk are for IE7 (such as *width:79px;). Other browsers ignore it.
.topiclist lists by default have 410px margin on right side, allowing for 1x 250px column and 2x 80px columns in addition to main column.
Additional classes were created for lists that use different column layouts:
- .missing-column: list that is missing one 80px wide column
- .two-columns: list that has only 1x 80px column in addition to main column
- .two-long-columns: list that has only 1x 250px column in addition to main column
Contents of all <dt> elements were wrapped into <div class="list-inner">. Contents of <div class="list-inner"> were moved to the right by one tab character to keep structure.
Patch was tested with modern browsers and IE7. Lists look exactly the same as they used to at about 1000px width, you'll notice difference in layout only if you change browser width.
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Re: Forum list layout
+1 guess it doesn't matter. most ppl change the defualt anwyay, others do not and probably cus it doesn't matter to them either.
- imkingdavid
- Registered User
- Posts: 1050
- Joined: Thu Jul 30, 2009 12:06 pm
Re: Forum list layout
Most styles are based on either prosilver or subsilver. Those based on prosilver will benefit from changes to the base style even if you aren't using prosilver itself.Pete77s wrote:+1 guess it doesn't matter. most ppl change the defualt anwyay, others do not and probably cus it doesn't matter to them either.
Anyway, in general I think this is a good idea, so +1.
- DionDesigns
- Registered User
- Posts: 51
- Joined: Sat Apr 21, 2012 4:29 am
- Location: Uncertain due to momentum
- Contact:
Re: Forum list layout
With Microsoft forcing IE10 upgrades through Windows Update, IE7 has officially, FINALLY, become a thing of the past. The only people who could possibly be using IE7 at this point are those still using WinXP or who disabled Windows Update, and those people have the ability to upgrade to IE8 (XP) or IE10 at any time. It's time for phpBB to stop supporting the piece of garbage known as IE7.
If phpBB makes this decision, I would suggest an alternative to the above...using
If phpBB makes this decision, I would suggest an alternative to the above...using
display:table;width:100%
on the DL element and display:table-cell
on the DT/DD elements. It has all the benefits of the above and it's supported by IE8. Since it doesn't require additional elements, floats, and negative margin hacks, the CSS/HTML will be clean and easy to understand. It also fixes the ugly, amateurish borders on the DD elements which have existed since phpBB3 was released.Re: Forum list layout
Problem with display:table is it ignores width limitations. If content is too wide, it will stretch whole row. Also splitting content into 2 rows on small devices is a problem with tables.
I did try tables solution in several of my styles, it caused more troubles than solved problems. Never again. It doesn't work well with dynamic content like forums.
Borders can be fixed another way by mixing negative bottom margin and positive bottom padding:
I did try tables solution in several of my styles, it caused more troubles than solved problems. Never again. It doesn't work well with dynamic content like forums.
Borders can be fixed another way by mixing negative bottom margin and positive bottom padding:
Code: Select all
ul.topiclist dd {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Formerly known as CyberAlien.
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
Free phpBB styles | Premium responsive XenForo styles | Iconify - modern open source replacement for glyph fonts
- Pony99CA
- Registered User
- Posts: 986
- Joined: Sun Feb 08, 2009 2:35 am
- Location: Hollister, CA
- Contact:
Re: Forum list layout
I thought that best practice was to avoid using pixels for specifying most things and use either percentages or points to allow flexible layouts and user-specified font sizes. Sites that either don't respect the browser's text size setting or break the layout with larger text sizes aren't good for people with poor vision.
Steve
Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.