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

Started by pulgoki, August 09, 2022, 03:20:47 PM

Previous topic - Next topic

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

Quote from: pulgoki on August 09, 2022, 03:20:47 PMI'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 -
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

Quote from: TwitchisMental on August 09, 2022, 03:41:24 PMThat specific color would be controlled by the strong tag.

The strong tag affects other things as well. 




TwitchisMental

Quote from: pulgoki on August 09, 2022, 03:57:52 PM
Quote from: TwitchisMental on August 09, 2022, 03:41:24 PMThat 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 -
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 -

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 -

.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


Antechinus

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

Code (Example) Select
.children > p > strong {color: #000; font-size: 1.5em;}

pulgoki

Quote from: Antechinus on August 09, 2022, 06:04:12 PMYou 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

Quote from: Antechinus on August 09, 2022, 06:04:12 PMYou 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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

TwitchisMental

Quote from: pulgoki on August 10, 2022, 08:58:24 AM
Quote from: Antechinus on August 09, 2022, 06:04:12 PMYou 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?

.children a {
  color: #fff;
}

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

pulgoki

Quote from: TwitchisMental on August 10, 2022, 12:57:29 PMShould 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.   :laugh:

Steve

DO NOT pm me for support!


Steve

DO NOT pm me for support!

pulgoki

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

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

Quote from: pulgoki on August 11, 2022, 02:35:39 PMI have one more that I can't seem to get pinned down. I've been close a few times.  :D 

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 -

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.  :D

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

Quote from: pulgoki on August 11, 2022, 03:04:04 PMI 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.  :D

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

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

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

a.recent_view_link {
  color: #fff;
}

Change the color to whatever you would like.

pulgoki

Quote from: TwitchisMental on August 11, 2022, 03:12:46 PMHumm 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   

pulgoki

Well, I was able to get it to work with a bit of a glitch by using

#upshrink_stats p.inline a:nth-child(6) {
color:aqua
}

It changes a few of the name colors in the 'displaying users logged in that day' mod area so I think that is exactly what's going on. 

I don't want to get rid of the mod so I may be stuck editing the BoardIndex.Template.Php

I may disable the mod temporarily to make sure.

Thanks for the help again. Learned another trick today.

TwitchisMental

Quote from: pulgoki on August 11, 2022, 03:35:29 PMWell, I was able to get it to work with a bit of a glitch by using

#upshrink_stats p.inline a:nth-child(6) {
color:aqua
}

It changes a few of the name colors in the 'displaying users logged in that day' mod area so I think that is exactly what's going on.

I don't want to get rid of the mod so I may be stuck editing the BoardIndex.Template.Php

I may disable the mod temporarily to make sure.

Thanks for the help again. Learned another trick today.
So I installed the same mod and the code below worked for me. It only makes the specified text white.

The reason your bit of code is changing multiple lines, is because you are choosing the whole upshrink stats section.
So it is choosing the 6th child of every part of that section essentially. (Someone else can probably explain this a bit more accurately)

The code that works for me -

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

This is choosing that specific section. (Or should be lol)

You cannot view this attachment.

pulgoki

Quote from: TwitchisMental on August 11, 2022, 03:47:34 PMSo I installed the same mod and the code below worked for me. It only makes the specified text white.

The reason your bit of code is changing multiple lines, is because you are choosing the whole upshrink stats section.
So it is choosing the 6th child of every part of that section essentially. (Someone else can probably explain this a bit more accurately)

The code that works for me -


This clicked in my head after making that last post.

It does the same thing for me using

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

All areas of my forum stats use that p.inline so it changes the 5th(?) link in all areas to what ever color I specify. 





pulgoki

It does the same on this forum as well. 

p.inline a:nth-child(6) {
  color: aqua;
}


Anything that falls in to that 6th child position gets the color changed.  I tried it using 2, 3, 4, etc.





TwitchisMental

Quote from: pulgoki on August 11, 2022, 03:58:35 PMIt does the same on this forum as well. 

p.inline a:nth-child(6) {
  color: aqua;
}


Anything that falls in to that 6th child position gets the color changed.  I tried it using 2, 3, 4, etc.





Humm the template edit may be best then. Someone else may have an easier solution though :).

pulgoki

Modifying the BoardIndex.Template.Php worked like a charm.  It's doing exactly what I want now.  The recent posts link stands out beautifully now.  :D 


Kindred

Lol...  my test site test2.turtleshellprod.com is done with only changes to css - and a minor change to boardindex
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

Quote from: pulgoki on August 11, 2022, 04:26:51 PMModifying the BoardIndex.Template.Php worked like a charm.  It's doing exactly what I want now.  The recent posts link stands out beautifully now.  :D 
This is a case where I would recommend the template edit. For what you wanted to do, there are just too many instances of p.inline for that to be a useful target. :)

Advertisement: