Can't get my thread list links to change color

[Sammiie]

Hello ~

My Test Board is Here


In short, I'm trying to get the link color to the threads list to be that purple accent color on my board, but no matter what I try, I can't get the color to change. Maybe I'm just not looking in the right places, but I tried playing around anything related on the css styling page, then I tried to set styles to the span tag in the Layout Structure page (under Board > Thread List) and nothing. The number of replies link changed, but not the title of the thread, which is what I really want. I want it that purple color and bolded; I'd like for the description text to remain the color that it currently is.

Using Chrome Dev Tools, I see that another class, "sblink", is interfering (which it was interfering with a lot of my other links too, but I managed to get them to work - probably the bootlegged way); I'm really not sure why, though. I guess I need a lot more help than I think I do xD 

Any direction / assistance would be greatly appreciated! Thank you!

[Nori]

It looks like the link color is already purple for both FF & Chrome on my end:

Unless I'm misinterpreting what links you are wanting to make purple.

Attachments:

[Sammiie]

HM the white must be the "visited" color bc they're are still white for me...




Looking into my Chrome Dev Tools... I see that the class "sblink" is affecting this (when I turn it off, it turns purple the way I want it to, however, some other things that I dont want purple turn purple, too)

This is awkward explaining, so I'll show:

this one shows it off - notice my buttons now have purple text? I don't want them that way. Though, the thread list now has purple text, which I do want -- but this is like a rubix cube of code LOL. How to keep the sblink from affecting other stuff argh.



Basically, I have been having trouble with my links turning different colors than I want them to once they're visited / clicked on. It's probably something I've done along the way, but I just can't figure out what it is >.<

I've checked Layout Templates a few times for classes that don't belong and I don't see anything throwing it out of whack. I can provide anything, just ask! Nori

[Chris]

Your problem appears to stem from the unnecessary use of the !important modifier being applied to not only links within the .sblink class but also ANY a:visited  link forcing them to the color it deems important (despite what any other CSS rule has to say on the matter). To have it not override and affect visited link just remove the a:visited part from the selector.

.sblink a,a:visited {
    color:#e3e3e3!important;
    text-align: center;
}

[Sammiie]

Chris


so remember when I said rubix cube of code?

Removing the "!important" fixed the thread list issue, but removing that mucked up my left-side buttons, Navigation Links, and Navigation Tree colors (which are all supposed to be #e3e3e3 or white). Now they're purple. It's probably why I utilized it in the first place, given I couldn't figure out why the visited links weren't turning the colors I set for them in the css.






Reminded of why I chose to use the "!important" things in the code in the first place, I went ahead and undid everything from above and just removed the "a:visited" part from the sblink class... and got a similar outcome. Thread List thing is fine, but the rest of my links are not.





How do I find out what's causing some of the links to turn the wrong color upon being visited? I want my Navigation Links, Navigation Tree, and Button Links to be all #e3e3e3; I want the Thread List links to be #6E435F.


Thank you for your help!

[Chris]

Jun 28, 2018 20:38:41 GMT -8 Sammiie said:

Chris


...It's probably why I utilized it in the first place, given I couldn't figure out why the visited links weren't turning the colors I set for them in the css.

Today's modern browser make it very easy to see which CSS rule is being applied to an element by simply right-clicking the element in question and choosing the inspect option. That gives you a list of rules sorted in order of specificity showing why a property such as color is being applied over another rule with the same property but with a different value and specificity or origin. Once you understand specificity you can then construct a rule on your own with a heavier selector than what is currently being applied without having to resort to the important modifier which is artificial since it disrupts the premise behind stylesheet where one rule can have a property it defines cascade down and another rule with a greater specificity defines a similar property and the community of rules get a vote on happens. The use of the important modifier is warranted in certain situations but when used in this way it replaces that tried and true cascading elegance with a crude elitism where some rules are more equal than others and the value of the collective as a whole is diminished or ignored entirely. Once we start down that path that is when the voice of one or even a hundred rules no longer matter and the democratic process of each rule having a say on the matter crumbles.

Jun 28, 2018 20:38:41 GMT -8 Sammiie said:

SPOILER: Click to show

Reminded of why I chose to use the "!important" things in the code in the first place, I went ahead and undid everything from above and just removed the "a:visited" part from the sblink class... and got a similar outcome. Thread List thing is fine, but the rest of my links are not.

SPOILER: Click to show

How do I find out what's causing some of the links to turn the wrong color upon being visited? I want my Navigation Links, Navigation Tree, and Button Links to be all #e3e3e3; I want the Thread List links to be #6E435F.


Thank you for your help!

Rather than defining a color for all visited links and make it an overriding all-powerful rule which you obviously did not want it would be better to create a normal base rule that cascaded that color down to all then identify the links you wanted a different color and make a rule to target just those links. If your created rule is not specific enough you can use the inspect method described above to see which rule is being applied instead of yours and make your rule even more specific.

[Sammiie]

Chris I thoroughly read that article you provided and I think I understand what I did wrong... the only thing I'm now having trouble with is how I apply this new information to my board to make my links work properly.

Are there any tips / examples you can provide to help clear up my confusion? Personalized would be better, but I understand if all you've got time for are generalized ones.

And once again, thank you so much for taking the time to answer all my questions!

Nevermind! I went on today and mainly removed the "!important" and the "a:visited" out of most of my classes and rearranged some things and it seems to be working fine so far

Nori

I wanted to just say thank you both for your help <3