Modifying post/voting tools using css

[Craig]

How can I identify this value to the image?

#vb-svg-fill-4 , I see it is relative to the vote icon, but where can this be confirmed?

I can confirm the rdquo icon, but not the flag or the pencil.

[In Omnibus]

How can I identify this value to the image?

#vb-svg-fill-4 , I see it is relative to the vote icon, but where can this be confirmed?

I might not be understanding your question but the ID and class can be confirmed on line 2820 of the sprite_icons_general.svg template.

[Craig]

I might not be clear, I am able to identify the flag id number, what I want to do is change its fill color;

 /* Outline of flag icon*/
#vb-svg-flag{
fill: blue !important;
}

/* Fill of flag icon*/
[COLOR=#FF0000]#vb-svg-fill-1 {[/COLOR]
fill:orange !important;

It the coding in red I cannot figure out.

[Craig]

Disregard the question regarding the pencil

I have identified the pencil.

[Craig]

With everyone's help I have been able to adjust all the tools with the exception of the flag used for reporting a post.

[Carrfixr]

Thanks I put this in my css sprite

#vb-svg-vote{
    fill: blue !important;
}

#vb-svg-fill-4 {
    fill:orange !important;
}

And it works. Now how do I identify the others? Can you post the css- sprite that you used for them?

Wayne mentioned about adding this in the addt'l- css, but I did not and the like still works. Is this code necessary?

 [id^="vote"] .b-icon {     background-color: #F9EDC7 !important; }

[Carrfixr]

Thanks Glenn Vergara for the // and the */ issue. That is why it was not working. I guess it's assumed we are all experts, of which I am not.

[Craig]

This is what I have, except for the flag I cannot figure that out just yet.

/* Outline of like icon*/
#vb-svg-vote{
fill: blue !important;
}

/* Fill of like icon*/
#vb-svg-fill-4 {
fill: antiquewhite !important;
}
/* Outline of Flag icon*/
#vb-svg-_flag{
fill: blue !important;
}

/* Fill of Flag icon*/
#vb-svg-fill-0 {
fill:orange !important;
}
/* Outline of Quote icon*/
#vb-svg-rdquo{
fill: lime !important;
}

/* Fill of Quote icon*/
#vb-svg-fill-2 {
fill: lime !important;
}
/* Outline of Edit icon*/
#vb-svg-pencil--gray{
fill: blue !important;
}

/* Fill of Edit icon*/
#vb-svg-fill-6 {
fill:orange !important;
}
/* Outline of Comment icon*/
#vb-svg-__speech-single--gray{
fill: black !important;
}

/* Fill of Comment icon*/
#vb-svg-fill-3 {
fill: pink !important;
}

[Wayne Luke]

Are you sure that the ID has both a dash and an underline? Seems like a typo.

#vb-svg-_flag{

[Craig]

No its not. it looks like two __flag, i tried it without, with only one, and with two and it made no difference.

[Carrfixr]

Now I notice after clicking the like a dotted box appears around it. Is this from the newest update? If I reload it goes away

[Craig]

Post 3 describes how to identify the sprite icons.

[Wayne Luke]

Now I notice after clicking the like a dotted box appears around it. Is this from the newest update? If I reload it goes away

Yes. We've reapplied the "Focus" element which provides an outline to the currently selected element. This is an Accessibility feature that was improperly hidden in older versions.

[In Omnibus]

This is what I have, except for the flag I cannot figure that out just yet.

On my test site I changed fill-3 and fill-8 and they changed the flag icon.

[Craig]

Are you using #vb-svg-__flag?

[Carrfixr]

""go to /special/css-examples on the front end""

In #3 Wayne posted this. Dumb question, how do I find that..

[In Omnibus]

Just go to the index page of your forum and add /special/css-examples to the end of the index page URL

[Craig]

I have tried all of the following for the flag.

/* Outline of Flag icon*/
#vb-svg-_flag{
fill: blue !important;
}

/* Fill of Flag icon*/
#vb-svg-fill-0 {
fill:orange !important;
}

/* Outline of Flag icon*/
#vb-svg-flag{
fill: blue !important;
}

/* Fill of Flag icon*/
#vb-svg-fill-1 {
fill:orange !important;
}

/* Outline of Flag icon*/
#vb-svg-__flag{
fill: blue !important;
}

/* Fill of Flag icon*/
#vb-svg-fill-1 {
fill:orange !important;
}

[In Omnibus]

Have you tried changing it from the CSS property .b-icon_flag ?

[Craig]

In the console I have with no luck.

[Craig]

""go to /special/css-examples on the front end""

In #3 Wayne posted this. Dumb question, how do I find that..

add it to the end of your website home page url