I made a theme where I modified the template to add tags so I could put vertical shading into places such as thread count and post count columns. I no longer use that theme. And being that I'm a beginner, I dread trying to do this again.
But I'm wondering if there is a pure CSS way to do this. I was looking at pseudo classes such as :nth-child, :nth-last-child, :nth-last-of-type
:nth-of-type, etc. I'm wondering, for example, if I can use it to color a column by using it with .trow. Can anyone advise me on this?
BTW, I'd just go in there and try it, but I'm so not good at this stuff, a lot of times my tests show that something won't work, simply because I did it all wrong.
http://www.w3schools.com/CSSref/sel_nth-child.asp
If I understood you right, this should work for you:
- for .trow1 & .trow2
.trow1:nth-child(3),.trow1:nth-child(4),.trow2:nth-child(3),.trow2:nth-child(4) {
background:red;
}
- just for .trow
.trow:nth-child(3),.trow:nth-child(4) {
background:red;
}
I think that you may want to change your css classes for table columns on index, because the code above will color 4th table cells everywhere.
(2014-06-24, 08:11 PM)Adriano Wrote: [ -> ]I think that you may want to change your css classes for table columns on index, because the code above will color 4th table cells everywhere.
What you suggested colored the columns you specified, but as you point out it colors all over the place. It colors the calendar, member list, etc. in ways that don't look good.
You suggested changing classes for table columns on index. Would this mean editing the template? I don't suppose the CSS can zero in here, can it?
tbody[id^=cat_] .trow1:nth-child(3), tbody[id^=cat_] .trow1:nth-child(4), tbody[id^=cat_] .trow2:nth-child(3), tbody[id^=cat_] .trow2:nth-child(4) {
background:red;
}
That should do what you're aiming for.
(2014-06-25, 12:24 AM)Eric J. Wrote: [ -> ]That should do what you're aiming for.
Amazing! It targeted the index page.
I have a question though. I tried to guess how so shade other parts of the forum by looking the forumbit templates (because there cat is there). No luck.
How can I figure out how to target specific parts of the forum? For example, forumdisplay.php?fid=2. Because with this I could shade different parts of the forum as needed, without editing templates.
Unfortunately unique identifiers aren't consistent in MyBB. Most of it will just take tinkering and testing. For example on forumdisplay I'd do something like:
.trow1[class*=forumdisplay_]:nth-child(4), .trow1[class*=forumdisplay_]:nth-child(5), .trow2[class*=forumdisplay_]:nth-child(4), .trow2[class*=forumdisplay_]:nth-child(5) {
background: red;
}
It's best to just look at the source, find anything unique about what you're aiming to target, then see which selector you can use to target it.
(2014-06-25, 05:16 AM)Eric J. Wrote: [ -> ]It's best to just look at the source, find anything unique about what you're aiming to target, then see which selector you can use to target it.
All I can say is you are very very talented at this. I looked at the source and looked at the "inspect element" feature in my browser, and was able to see where you came up with forumdisplay and cat. Armed with this, I tried my luck at a different part of the forum. I must have tried a couple dozen variations, including both syntaxes you used, from the source and "inspect element." Nothing worked.
Anyway, my test was run on a part of the forum I don't think users even look at (forumdisplay.php?fid=1). So no big deal. And the other areas I can think of are not vital either. So I can probably get by with what you have given me.
But if I do decide to do a lot of targeted shading, I think I'll just pay someone (maybe you?) to write the statements for me. And maybe the method I asked about here is not even the best.
But that's down the road. I should finish all areas of this theme that I can, and then see what is left. I might need help with more than shading.
I have one more area I need to target, I've tried several statements that I came up with, and no luck. So I'm wondering if someone can help me shade a column (child) on the Category page. This is the page that shows all the forums within a given Category. For example, here is the category page for "1.8 Support" :
http://community.mybb.com/forum-175.html. It can be reached from the Index page by clicking on the Category name that appears on the left end of thead.
If you can help me with this there is no need to write out the entire statement. If you just show me how to color trow1 child 3, I can figure out the rest from there.