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 */
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;
}
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;
}
Well my Eng is even more bad than the css example above, so i hope my explanation can be understand!