[the brink]

Hello,

I was wondering if you would be able to advise me on how to highlight text with a colour using CSS?

I want to Highlight ‘Click here for our Environmental Commitment’ in green and also remove the underline.

Here is a link to the page http://thebrinkonline.org/about/

Thankyou!

[Skandha]

@the-brink: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#post-2 .entry-content span p a {
    background: lightgreen;
    text-decoration: none;
}

Let me know if this is what you want!
Kind Regards,
Skandha

[the brink]

wow, thats great, it works perfectly.

Now I’m just wondering how I can apply that same concept to other elements of my site?
I’m unsure what the ‘#post-2 .entry-content span p a’ refers to.

Thanks for your help!

[Skandha]

@the-brink: Hello there,
You will need to be familiar with CSS to understand this.
You can let me know if you want to make any further changes.

Kind Regards,
Skandha

[the brink]

Hi,

I’ve got some familiarity with css. I’m just wondering where I can find reference those terms which point to the element in question so I can apply the same logic myself to other elements. I couldn’t find them using the “inspector” tool.

I have made some new highlighted elements now using the plugin “shortcodes ultimate”, but I would like to behave like the title on hover (i.e. they shouldn’t be underlined when I apply a “href” value to them, instead the lettering should change colour)

element in question are for example the two boxes below the text on this page.

thanks!

[Skandha]

@the-brink: Hello there,
I checked your site you seem to have resolved the issue. To make use of CSS Code you will need to use the inspect element tool on your browser and then search for class and id’s of element to apply something to it.

Kind Regards,
Skandha

[the brink]

Hi Skandha,

Nope I’m afraid the issue is not resolved. As you can see here, the lower box “support us” shows an underline which I don’t want to be there. I assume that the underline is only not visible in the “email” box because it is black.

My most urgent request is to make the underline disappear under the support us in the orange box.

Also I would like to make both the boxes (and the other “email” boxes here and here) respond to hovering by having the lettering change colour (same as in the case of the website title).

thanks for your help

TB

[Skandha]

@the-brink: Hello there,

Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

/* To remove the underline in the text "Support Us" */
#post-2 .entry-content a {
    text-decoration: none;
}
/* To change text color on hover */
.entry-content a:hover .su-highlight.get-in-touch, .textwidget.custom-html-widget a:hover .su-highlight.get-in-touch {
	color: #F8155A !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[Author]

Posts