A stunning theme required

[axew3]

Ok! yes it is the way, this online is the first short try out about old css knowledge!
So i try to use pure css to achieve the correct result about columned colors as i would like to see. The second version is coming soon.
But there is a but. Maybe i'm redundant when i say another time ....
why templates authors are using li ul dt dd etc elements, and not TABLES?
Many css properties are experimental for these elements, and any solution to try to vertical align an element in the correct way inside a dd or another nested element, lead to different problems (as is the structure of the template) which do not have for all browsers a good solution. In table elements it is just ... vertical align, that any browser understand. More: table elements EVER match the dimension of others, when screen dimension change. And you do need to care about a dd that not fill completely his background when height increase due to window size changes.

Really this is a thing mysterious to me ...
Why to use definition lists in place of comfortable and working tables?

I will follow improving, searching for the perfect way without change any template file (until now i've fail, and tables in place of lists (that is easy to switch to into template files and apparently seem to be the only perfect way to me)) and have only via CSS the perfect solution for columned colors.

The actual pseudo code on my localhost that is little different from first here online, that work without edit any change into template file is this (look that my pseudo code +- ever need to be resumed, in fact some declarations can be unified into one here):

Code: Select all

/* START - w3all change zebra into columns colors */
@media screen and (min-width: 43.750em) { /* 700px */
	
div.forabg div.inner ul.topiclist.forums li.row dl.row-item.forum_unread_subforum dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}	
	
div.forabg div.inner ul.topiclist.forums li.row dl.row-item{
background-color:#f5f5f6;
min-height:50px;
overflow: auto;
padding-bottom:0px;
}

div.forabg div.inner ul.topiclist.forums li.row dl.row-item dt{
min-height:50px;
display: inline-block;
padding-bottom:0px;

}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.posts{
min-height:50px;
display: inline-block;
padding-bottom:0px;
}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.topics{
background-color:#dcddde !important;
min-height:50px;
display: inline-block;
padding-bottom:0px;
}
div.forabg div.inner ul.topiclist.forums li.row dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:50px;
display: inline-block;
padding-bottom:0px;
}

}
/* END view forum index */

@media screen and (min-width: 43.750em) { /* 700px */
	
div.forumbg div.inner ul.topiclist.topics li.row.bg1{
	background-color:transparent !important;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2{
background-color:transparent !important;	
}


div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item{
background-color:#f5f5f6 !important;	
min-height:45px;
overflow: auto;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item{
background-color:#f5f5f6 !important;	
min-height:45px;
overflow: auto;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt{
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt{
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt div.list-inner,
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.posts{
background-color:#dcddde !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.posts{
background-color:#dcddde;		
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.views{
background-color:#f5f5f6 !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.views{
background-color:#f5f5f6 !important;	
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:45px;
display: inline-block;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dd.lastpost{
background-color:#dcddde !important;
min-height:45px;
display: inline-block;
padding-bottom:0px;
}

/* about sticky */
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.posts{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.posts{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.views{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.views{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item dd.lastpost{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item dd.lastpost{
background-color:#ffffff !important;	
min-height:45px;
display: inline-block !important;
padding-bottom:0px;
}
div.forumbg div.inner ul.topiclist.topics li.row.bg1.sticky dl.row-item{
background-color:#ffffff !important;
min-height:45px;

}
div.forumbg div.inner ul.topiclist.topics li.row.bg2.sticky dl.row-item{
background-color:#ffffff !important;
min-height:45px;

}

}
/* END - w3all change zebra into columns colors */

note the first:

Code: Select all

div.forabg div.inner ul.topiclist.forums li.row dl.row-item.forum_unread_subforum dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}	

and the second

Code: Select all

div.forumbg div.inner ul.topiclist.topics li.row.bg1 dl.row-item dt div.list-inner,
div.forumbg div.inner ul.topiclist.topics li.row.bg2 dl.row-item dt div.list-inner{
white-space:nowrap;
overflow: hidden;
}

which are the point: this the way to not let list elements increase their height on resizing browser. The resize and subsequent text wrap on elements increase height and the background for one of these, never match the new height (so the background color result on half element and not into all the element.
Well my Eng is even more bad than the css example above, so i hope my explanation can be understand!

[kaspir]

I'm sure your explanation was fine. Perhaps I misunderstood what you were looking for.. I thought you were interested in customizing your own theme.

About your English, I do have some troubles understanding your English, HOWEVER.. I applaud you even more for using English because you're smarter than me, it's the only language I know! Practice makes perfect, and trust me, English is NO perfect language! I think you're learning great!

About your last post, (and after you mentioning before about this I think), using tables with html, creates some css issues? Prolly, I try and stay away from too many tables and use divs. CSS has its pains too, dealing with something like this, all for one thing:

Code: Select all

-webkit-border-radius: 6px;
-o-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

What I think I know is this, tables' real purpose is to deliver formatted data only, otherwise the day of age using tables in html are gone. Divs are more recommended for everything else now purely to control mobile response way better, which explains many authors are moving to this new directive. Everyone uses mobile these days. CSS gives authors more control, since with HTML 5, tables still need there class elements assigns in CSS reguardless. Choosing to use divs over tables (ie. when not displaying data charts), shortens the code that has to load in template files, better supports mobiles & caching more in the users browser. All bonuses in my opinion. However, like pointed out, the CSS can be nasty, when having one line for each browser for certain tricks. Another thing, remember when I was recommending the removal of some of your html like this:

Code: Select all

<table cellspacing=0 border=0>

Just an example, but html5 does not like the border or cell assignments.

Anyways, if I am completely off subject or misunderstood. Sorry. But I enjoy this conversation, because I am ALSO currently rewriting many tables, assigning new classes, in my old 'World of Phaos' game as I also up it to php7. It's a nightmare. Lol..

P.S. I have had this sense for a while, you really don't like changing your style from tables to whatever... and I admire that. Truth is, I didn't know the difference until about Jan of this year.. and I'm still googling and reading information on daily basis, so I can point my coding in the right direction.

Check these out:
Good Info: https://stackoverflow.com/questions/156 ... d-of-table
Neat Converter: https://html-cleaner.com/features/repla ... with-divs/

[axew3]

very nice, yes i will follow ...
the specific problem here, is the nested div inside dl dt, and subsequent dd. You can note very well this also into the default phpBB template: the border of the dd column about Topics, display a border shorter than others.
When the div inside resize, there is no way to make change the height of the dd to match the height of the dt that increase maybe, due to browser resize.
This the meaning of the 2 CSS points above:
wrap NOWRAP
and
text overflow hidden.

Would like to know if anybody, with pure CSS is able to resolve this. This what i'm aiming to.

The code i refer to into phpBB template files is on forumlist_body.html (and/or on viewforum_body.html):

Code: Select all

<li class="row">
			<!-- EVENT forumlist_body_forum_row_prepend -->
			<dl class="row-item {forumrow.FORUM_IMG_STYLE}">
				<dt title="{forumrow.FORUM_FOLDER_IMG_ALT}">
					<!-- IF forumrow.S_UNREAD_FORUM --><a href="{forumrow.U_VIEWFORUM}" class="row-item-link"></a><!-- ENDIF -->
					<div style="" class="list-inner"> ...

... ... ...

Code: Select all

</dt>
				<dd class="posts">{topicrow.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
				<dd class="views">{topicrow.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
				<dd class="lastpost">
					<span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
						<!-- IF not S_IS_BOT -->
							<a href="{topicrow.U_LAST_POST}" title="{L_GOTO_LAST_POST}">
								<i class="icon fa-external-link-square fa-fw icon-lightgray icon-md" aria-hidden="true"></i><span class="sr-only">{VIEW_LATEST_POST}</span>
							</a>
						<!-- ENDIF -->
						<br />{topicrow.LAST_POST_TIME}
					</span>
				</dd>
			</dl>

p.s

I applaud you even more for using English because you're smarter than me

thank you but this is merely your opinion ... not mine!

[kaspir]

Thanks for that reference. Without editing the templates, I'm not sure if you can accomplish what you want without editing template(s). I can tell you for fact, Prosilver 3.2 wasn't 100% perfect, even I submitted a fix to area51.phpbb on the 3.2 template for some backwards FA icon I found after their release of RC.

I feel your frustration mate. Perhaps phpBB used a div there to min/max the size, not sure. I've checked if div was valid child of dt.. I think you're on to something! Perhaps a suggestion to phpBB for a future fix is in order, as I'm unsure how to accomplish PURE CSS the way that it is now, I totally get what your saying.

Ref: https://developer.mozilla.org/en-US/doc ... lement/div

EDIT: I just spent another hour looking for a resolve.. thought I had something, but can't find a pure css solution. Not with the <dt> elements. However there is (as you know) a solution for tables... ha.

Also stumbled across: https://developer.mozilla.org/en-US/doc ... ible_boxes

[wildchild666]

will your look to revamp you forum though i would make you a new logo

[axew3]

Nice prototype ...
would like to see in case if possible a better version with w3all, and not
with axew3.com, that is really too much redundant to/for me!?
Thank you! Colors are interesting mixed with the idea/colors of the actual under construction theme ... yes nice ...

p.s i'm really interested to the background rounded and colored mix shape ... it should match really nice with these forums colors ... and some css effects on top, mixed in pieces on elements ... nice idea