AStra theme body and headers color

  • Hi,

    I need help changing the color for specific element in astra.

    In the set up of the theme I have selected a grey color for the body text and blue color for links, as you can see.

    The problem come when I want to add the links to these specific sections: https://recursonline.es/#formacion-gratuita.

    Ones I put a link with a picture as the background, the linked header automatically get the same color as the body text and doesnt look good.

    This cannot be change in the astra setting at least in the free version of it.

    Also I have learn that changing this part in the CSS I can fix the links, but it would affect also to the body text:

    body, h1, .entry-title a, .entry-content h1, .entry-content h1 a, h2, .entry-content h2, .entry-content h2 a, h3, .entry-content h3, .entry-content h3 a, h4, .entry-content h4, .entry-content h4 a, h5, .entry-content h5, .entry-content h5 a, h6, .entry-content h6, .entry-content h6 a {
    color: var(–ast-global-color-3);
    }

    Does anyone know how can I set the color for the linked headers without affecting the body text color?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Anonymous User 18563845

    (@anonymized-18563845)

    Does this css help you ?

    .ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a) {
    text-decoration: underline;
    color: wheat;
}
    Thread Starter josefigueroa92

    (@josefigueroa92)

    Hi @mvsup thanks for answering

    Almost fixed it but still not completely fine, cause I can see the header links now, but on the other hand cause another 2 problems:

    1.The links from the buttons change it color as well instead of staying in black, so both backgound and text link are blue.

    2.The links inside of the text, dont change the color anymore when I pass the mouse.

    Is there any other way I can do it?

    Thread Starter josefigueroa92

    (@josefigueroa92)

    I was trying here and there and I came up with this:

    .entry-content h3 a {
    font-size: 26px;
    color: var(--ast-global-color-5);
}

.entry-content h4 a {
		font-size: 20px;
    color: var(--ast-global-color-1);
}

    But still not conviced. Now everytime I use a link in a H3 header, it will be white, even if the background is white as well..

    Any way to apply it just to the particular case of a dark background?

    Hi @josefigueroa92,

    Maybe you can give that H3 a custom class? That way you can specifically target your custom CSS work only for the H3 with that custom class.

    I hope it will help.

    Kind regards,
    Herman ??

    Thread Starter josefigueroa92

    (@josefigueroa92)

    Thanks for your answer @bsfherman

    I have no idea how to do this? COuld you bring me some light? Do I have to change the code, or is it possible to do it in the personalized CSS?

    Regards

    Jose

    Hi @josefigueroa92,

    Let’s say you give that H3 a custom class, cust-head. The following CSS code should change the H3 Heading block with that custom class to red.

    h3.cust-head {
    color: #ff0000;
}

    I hope it will help.

    Kind regards,
    Herman ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘AStra theme body and headers color’ is closed to new replies.