Blog hyperlink text and hover colors

[AlistairEC]

Hi X Theme Team,

In X / Launch / Typography / Site Links
I have Site Links with the value rgb(237, 204, 12)
and Site Links Hover set to rgb(0, 255, 60).
This works for every page on my site except the home page which is set to display my recent blog posts.
This page works - https://www.exposurecompensation.co.uk/index.php/about-me/

This page doesn’t - https://www.exposurecompensation.co.uk/index.php/2018/01/05/photographic-data-management-nightmare/

This is what a hyperlink looks like in a blog post. Have I missed a configuration item in X?
Or is this something I need to adjust in CSS, if so, what CSS do I need?

Thanks in advance.

Alistair

[jade]

Hi Alistair,

Please add this code in the custom CSS:

.single a {
    color: rgb(237,204,12) !important;
}

Hope this helps.

[AlistairEC]

Hi Jade,

That works for the hyperlink color, many thanks! How do I set the hover over color to be rgb(0, 255, 60)?

[jade]

Hi Alistair,

Please also add:

.single a:hover {
    color: rgb(0, 255, 60) !important;
}

Hope this helps.

[AlistairEC]

Awesome Jade! Thanks!

Final question, how to remove those little dots underneath?

[rad]

Hi there,

Please add this CSS as well,

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
    border-bottom: 0px;
}

Hope this helps.

[AlistairEC]

Hi Rad,

Thanks but that code didn’t make any difference, the … are still there under the hyperlink text. I put in Additional CSS, not Global CSS, this is correct, right?

See this page as an example. https://www.exposurecompensation.co.uk/index.php/2018/01/05/photographic-data-management-nightmare/

Any other ideas?

[christian]

Hey @AlistairEC,

You have this code in your custom CSS

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
    border-bottom: 1px dotted;
}

Please remove it.

Thanks.

[AlistairEC]

Hi Christian_y,

Sorry, I am more than a little confused now.

Rad to me to add this to Additional CSS - it didn’t work so I have removed it.

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
border-bottom: 0px;
}

You tell me to remove this from Additional CSS - but I don’t see this in Additional CSS. Is there some place else I should be looking?

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
border-bottom: 1px dotted;
}

[jade]

Hi Alistair,

To remove the border, simply update this CSS:

@Jade

.single a {
    color: rgb(237,204,12) !important;
}

To

.single .entry-content a {
    color: rgb(237,204,12)!important;
    border-bottom: 0 !important;
}

Hope this helps.

[AlistairEC]

Thanks Jade, worked out perfectly!

[nabeel]

Glad we could help.

Cheers!