Links in the Toolbar (Welcome and Notifications) aren't editable

[Bigtuber]

So I think it sucks that you can't edit some things in the toolbar for example the color of the links.
Forumotion has already written that in !important so if you want to change the color or remove the underline, you can't.

This is some issue I noticed when I tried to change the color and remove the underline since my background color is brown there and blue looks not that great.
So I looked up other forumotion forums and every forum has the same color and is underlined, even FAE; here is the code:

Code:

#fa_toolbar #fa_right #notif_list li .contentText a {
    color: #00569C !important;
    text-decoration: underline !important;
    vertical-align: baseline;
}

I think it's a problem for forums with a dark background (on the toolbar atleast) and I don't think there is any way to change this.
What do you think? Or do you have a solution?

[Ange TuteurAdministrator]

Hey

This can be changed by taking the existing selector set (

Code: #fa_toolbar #fa_right #notif_list li .contentText a

) and adding a selector which is the parent of this set, such as

Code: body

. Doing this will give your rule higher priority over the one defined by Forumotion. See and use the rule below and you'll understand.

Code:

body #fa_toolbar #fa_right #notif_list li .contentText a {
  text-decoration:none !important;
}

Note that you'll still need to use "!important", however, with the addition of "body" in the selector set, this rule now has higher priority, allowing you to override the rule defined by Forumotion. You can do this with any rule that is important.

See "Specificity" for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

[Bigtuber]

Oh wow, thanks again Ange for this solution! I read about the overriding from !important but I didn't think about "body".

And this is working for everything which isn't working with !important and doesn't have the selector "body"?
You know, there is the sceditor and it has already body in it so it is necessary to override it with this JS:

Code:

$(window).load(function () {
  $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{color:#FFF!important;text-shadow:1px 1px 1px #000!important;}</style>")
        });

So we can say the overriding of Forumotion works like that: JS > selector "body" > !important

Thanks, Ange!

[Ange TuteurAdministrator]

Yes, placing "body", "html", or any other parent selector before the current selector set will allow you to override existing rules which are important. For example..

Code: #logo { background:red !important; }

is overridden by

Code: body #logo { background:blue !important; }

, regardless if the rule is placed before or after.


In regards to that script, it's necessary unfortunately, because we cannot modify the iframe CSS with the forum stylesheet.

[Sponsored content]