CSS question for simple close to stock theme: Change color of Sub-Board

[pulgoki]

I'm not sure what the correct wording for this question should be so I'll just shoot.

I have a darker theme and have a few Boards that have Sub-Boards.  Because of the look of the theme, it's difficult to see the Sub-Board title to make it obvious that there are Sub-Boards available under that particular board.

What I would like to do, is change the title "Sub-Board" to something that stands out a little more.

With my limited knowledge of CSS, this doesn't appear to be something that I can do easily by inspecting that title and adding a color.

What's the easiest way to change the color and possibly the font size of ONLY the "Sub-Board" title? 

Edit: for clarification using this board as the example - Looking at the main board listing

[TwitchisMental]

I'm not sure what the correct wording for this question should be so I'll just shoot.

I have a darker theme and have a few Boards that have Sub-Boards.  Because of the look of the theme, it's difficult to see the Sub-Board title to make it obvious that there are Sub-Boards available under that particular board.

What I would like to do, is change the title "Sub-Board" to something that stands out a little more.

With my limited knowledge of CSS, this doesn't appear to be something that I can do easily by inspecting that title and adding a color.

What's the easiest way to change the color and possibly the font size of ONLY the "Sub-Board" title?

Edit: for clarification using this board as the example - Looking at the main board listing

That specific color would be controlled by the strong tag.

Open index.css

Find -

Code Select Expand

strong, .strong {
  font-weight: bold;
  color: #444;
}
Replace the #444 with whatever color you would like. Note that this will effect everywhere that uses a strong tag.

[pulgoki]

That specific color would be controlled by the strong tag.

The strong tag affects other things as well. 

[TwitchisMental]

That specific color would be controlled by the strong tag.

The strong tag affects other things as well. 

Yes, as I stated above. Note that this will effect everywhere that uses a strong tag.



If you need to change just that specific strong tag, you will need to give it a class of its own.

First you will need to open boardindex.template.php

Find line 268 -

Code Select Expand

echo '
<div id="board_', $board['id'], '_children" class="children">
<p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode(' ', $children), '</p>
</div>';
}

Replace With -

Code Select Expand

echo '
<div id="board_', $board['id'], '_children" class="children">
<p><strong class="child_strong" id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode(' ', $children), '</p>
</div>';
}
Now open index.css and add this to the bottom -

Code Select Expand

.child_strong {
  color: #000;
}Change the color to whichever color you need.

[pulgoki]

Thanks!

I'll test that when I get a spare minute.  I appreciate the help!

[TwitchisMental]

Thanks!

I'll test that when I get a spare minute.  I appreciate the help!

You're welcome.

[Antechinus]

You can do it without a template hack, just by using descendants.

Code (Example) Select Expand

.children > p > strong {color: #000; font-size: 1.5em;}

[pulgoki]

You can do it without a template hack, just by using descendants.

Ahh yes! thank you for that bit of info as well.   

I remembered watching a video last year of someone accomplishing the same thing but I couldn't remember who made the video or exactly how they did it. 

[pulgoki]

You can do it without a template hack

Is it possible to change the text color or font of the link test after the "Sub-Board" in the same way, or does that get a little more complicated?

[Kindred]

Pretty much Everything in 2.1 is targetable via css..   most of it doesn't even need fancy targets

[TwitchisMental]

You can do it without a template hack

Is it possible to change the text color or font of the link test after the "Sub-Board" in the same way, or does that get a little more complicated?

Code Select Expand

.children a {
  color: #fff;
}
Should do the trick for you if you want to change the link colors.

[pulgoki]

Should do the trick for you if you want to change the link colors.

Thanks again.   

I'd tried a few things and in retrospect, it was a perfect example of totally over thinking it.   

[Steve]

In what file does that go to the bottom of? Index.css?

[TwitchisMental]

In what file does that go to the bottom of? Index.css?

Yes

[Steve]

Thanks my friend.

[pulgoki]

I have one more that I can't seem to get pinned down. I've been close a few times.   

I'm trying to change only the color of the "View the most recent posts on the forum."  link text so it stands out a little more on a dark background. 

I've been down about three rabbit holes so far and I've been able to change the color of all other link text but not that one. 

Just a small understanding of descendants has been SUPER helpful!



edit: for clarification

[TwitchisMental]

I have one more that I can't seem to get pinned down. I've been close a few times.   

I'm trying to change only the color of the "View the most recent posts on the forum."  link text so it stands out a little more on a dark background. 

I've been down about three rabbit holes so far and I've been able to change the color of all other link text but not that one. 

Just a small understanding of descendants has been SUPER helpful!



edit: for clarification

This should work for you, but I am still learning nth-child pseudo class css stuff lol.

Add this to the bottom of index.css -

Code Select Expand

p.inline a:nth-child(5n) {
  color: #fff;
}

[pulgoki]

I definitely wouldn't have figured that out on my own.

It didn't quite get me to where I wanted so I looked up nth-child. I think I had an aneurysm. 

I'll keep playing with that and see if I'm able to pin down that one link text. So far I've hit several combinations of different links.

[TwitchisMental]

I definitely wouldn't have figured that out on my own.

It didn't quite get me to where I wanted so I looked up nth-child. I think I had an aneurysm. 

I'll keep playing with that and see if I'm able to pin down that one link text. So far I've hit several combinations of different links.

Humm that worked on my end(but just using default theme).

If anything you can edit the template and add a class to that specific section. Or wait for someone a bit better at this to give you a better solution.

Open BoardIndex.Template.Php in your editor. Find Line 478

Code Select Expand

<a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>
Replace with

Code Select Expand

<a class="recent_view_link" href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>
Now open up index.css and add this to the bottom -

Code Select Expand

a.recent_view_link {
  color: #fff;
}
Change the color to whatever you would like.

[pulgoki]

Humm that worked on my end(but just using default theme).

My theme is mostly default with *mostly* color changes.

I am using a mod for displaying users logged in that day.  Since it displays in the forums stats area it may be messing with it? 

I'll put a little more time in to this later.  If I can't figure out a CSS method that works I'll modify the BoardIndex.Template.Php