The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Certain Color Link

View previous topic View next topic Go down

Solved Certain Color Link

Post by Ace 1 on September 25th 2015, 5:49 pm

Hi, when a link is a certain color, what is the CSS selector to change it?

I tried the following but it doesn't work Sad

Code:
a span[style="color: #XXX"] {}


Last edited by Ace 1 on October 2nd 2015, 5:55 pm; edited 1 time in total

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on September 25th 2015, 7:15 pm

Hi @Ace 1,

This depends on the placement of anchor as well as the parent or child that is coloring the text.

For example, if you write this bbcode :
Code:
[color=#FF0000][url=http://help.forumotion.com/t143550-certain-color-link]Topic[/url][/color]

It'll translate as the following HTML once parsed server-side :
Code:
<font color="#FF0000"><a href="http://help.forumotion.com/t143550-certain-color-link">Topic</a></font>

With this, we know now that font is the parent and a is the child node. So our selector path will be : font a, or since you want to target a specific color :
Code:
font[color="#FF0000"] a {
  color:#00FF00 !important;
}

If the color is applied inside the anchor, then it would be a font. It all depends on the position of the nodes.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on September 25th 2015, 8:30 pm

I see what you mean.

However, I just wanted to change the color of users when you hover over them.

For example, your name:

Code:
a[href="/u88576] span strong { color: #7359E7 }
a[href="/u88576] span strong:hover { color: #FFF }

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on September 25th 2015, 8:30 pm

I don't want to do this for every user with that color.

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on September 25th 2015, 8:54 pm

You'll use the anchor as a prefix, and then the span tag which contains the group color.

So our complete rule would look like this :
Code:
a[href="/u1"] span[style="color:#F00"] {
  color:blue !important;
}

You don't need to select strong, because you can override the span's inline color by marking the new color with !important. But if you're just doing this for specific users, then you don't need to include the span's style attribute.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on September 27th 2015, 4:06 pm

I don't think you understand lol...

For example the managers group on fm.

I want to declare via CSS a code that will make it so all users with your color name will go through a transition during a hover event over their name.

So slgray, derri, leah7, and you will all have hover codes applied to your names without having to use the code I posted above for each of your user urls.

Basically every user with #7359e7 will have a code applied to them.

Get it?

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on September 27th 2015, 5:02 pm

Just reference a without the href attribute. Like this :
Code:
a span[style="color:#FF0000"]:hover {
  color:blue !important;
}


There's also a tutorial on that here too, if you want to check it out.
http://help.forumotion.com/t131443-customize-usernames-according-to-group

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on September 28th 2015, 5:27 pm

this doesnt seem to work...

i put everything correctly the color i want to change is #f70 and i inserte it in and it didnt change color. even when i used !important and placed it at the top of the stylesheet

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on September 29th 2015, 1:07 pm

Did you put the shorthand hex as the attribute value ? If so, that wont work, it'll need to be the full hex value. That is :
Code:
a span[style="color:#FF7700"]:hover {
  color:blue !important;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on September 29th 2015, 3:11 pm

i used the full hx value and it still doesnt seem to work..

does it matter if i placed a space in between the : and # ?

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on October 1st 2015, 1:57 am

Bump

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on October 1st 2015, 10:53 am

Sorry for the late reply. Yes, if there's no space you should add no space. The comparison in the attribute selector has to be exact when using just the = operator. Take a look at the markup below :


Looking at that we can use a span strong, but also utilize the span's style attribute : style="color:#8877EE" which gives us :
Code:
a span[style="color:#8877EE"] strong

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ace 1 on October 2nd 2015, 5:55 pm

Oh alright, I understand.

solved.

Ace 1
Forumember

Male Posts : 691
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Certain Color Link

Post by Ange Tuteur on October 2nd 2015, 6:59 pm

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum