Footer links styling

[alienfromearth]

This is about my x theme footer. How can I style the links there as they are not visible. Also, along the samt lines how do I style the links in the widget sidebar to make it consistent with the rest of the site.

[lely]

Hello There,

I can see you are using Ethos stack. Those font colors are defined on ethos stack CSS. To change it, we can use custom CSS to overwrite it. Try adding the following CSS on Theme Options > Global CSS

.x-colophon.bottom .x-nav li:after, .x-colophon.bottom .x-nav li a, .x-colophon.bottom .x-colophon-content p, .x-colophon.bottom .x-colophon-content a {
    color: #fff !important;
}

To adjust links hover color, go to Theme Options > Typography > Site Links > Site Links Hover
Hope this helps.

[alienfromearth]

I’m struggling to get it right. After adding this the links in the footer have changed but not in the text widget in the sidebar whose colour hasn’t changed. Also, the links are underlined without hover, I don’t want that. To be honest all I want is for all links on my site to be red and bold and they should underline when I hover.

[christian]

Hey Naji,

I understand that your request sounds simple (all links to be red, bold and not underlined) but, if you actually do that, Ethos would look like this:

There are actually different types of links in a website that is why there are separate colors for specific sections. This is true even with other themes.

To turn the widget links to red, bold and underline only when hovered, you will need to add this custom code in Theme Options > CSS

.x-sidebar .widget ul li a {
    color: red;
    font-weight: bold;
    text-decoration: none;
}

.x-sidebar .widget ul li a:hover {
    text-decoration: underline;
}

It is best though that you first understand the design of the Stack and work on your design around it rather than modifying it.

Thanks.

[alienfromearth]

Ha ha ok I get your point. I tried the code works perfectly on the footer but the code for the sidebar widget just doesn’t work (I am using a text widget). Also, can you also give me code for the content links as the x theme options don’t offer underline and bold.

[jade]

Hi there,

Please try the code below to change the color of the links in the sidebar:

.x-sidebar .widget a {
    color: red;
    font-weight: bold;
    text-decoration: none;
}

.x-sidebar .widget a:hover {
    text-decoration: underline;
}

As for the content links, please try:

.entry-content a {
    font-weight: 700;
    text-decoration: underline;
}

Here are some reference links for the suggestions above:

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.

[alienfromearth]

Thanks a ton. Everything is great except the links in the text widget are refusing to change color. They are observing the other attributes of bold and underline but not the color.

[nabeel]

Hi again,

Please Replace this part of the code:

.x-sidebar .widget a {
    color: red;
    font-weight: bold;
    text-decoration: none;
}

With this:

.x-sidebar .widget a {
    color: red !important;
    font-weight: bold;
    text-decoration: none;
}

Cheers!

[alienfromearth]

Bingo! thanks a ton.

[Prasant]

You are most welcome.