Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 13, 2024 at 3:18 pm #1437142
    Sandy

    The list item font colour on hover is too dark to be legible in a specific instance on a block editor post. The post is not and will not be set to Advanced Editor. How can the text on hover be changed to 10% black?

    March 14, 2024 at 2:58 am #1437187
    Ismael

    Hey Tanja,

    Thank you for the inquiry.

    You can adjust the hover color of the links in the Enfold > General Styling > Main Content tab. Look for the Highlight Color field and adjust the value.

    Best regards,
    Ismael

    March 14, 2024 at 3:55 am #1437194
    Sandy

    Thank you! What other elements does Highlight Color affect?

    March 14, 2024 at 3:39 pm #1437230
    Sandy

    This is not a good solution because it changes all post text hyperlinks. So, the post hyperlinks on a white background need to be a different colour than these text links that are on a dark background.

    March 15, 2024 at 7:53 am #1437267
    Ismael

    Hi,

    Thank you for the update.

    If you want to target the link in the list with the dark background, please try this css code:

    .single-post li a:hover {
    color: red;
}

    To target the ol element specifically, you can add a unique class name to it.

    Example:

    
<ol class="av-ol-list-with-links">.. li list here</ol>

    You can then use this css code;

    .single-post .av-ol-list-with-links li a:hover {
    color: red;
}

    Best regards,
    Ismael

    March 15, 2024 at 4:07 pm #1437319
    Sandy

    Thank you, the problem is that the ol already has a class specified, “class=”has-white-color has-text-color has-background has-link-color has-medium-font-size”. Adding a second class creates an error. Deleting the default class while adding the new class also creates the same error: This block contains unexpected or invalid content.

    March 16, 2024 at 6:31 pm #1437375
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top ol li a:hover {
	color: red;
}

    Best regards,
    Mike

    March 19, 2024 at 5:54 pm #1437628
    Sandy

    Thank you, unfortunately this is not a solution because it changes all ol text hyperlinks. So, the ol hyperlinks on a white background need to be a different colour than these ol text links that are on a dark background.

    March 19, 2024 at 6:36 pm #1437635
    Mike

    Hi,
    The css can be adjusted to check the background color of the ol, for example on the text page that you linked to the background color of the ol is #666666 so we would use this css:

    #top ol[style*="background-color:#666666;"] li a:hover {
	color: red;
}

    for your other pages adjust the colors to suit.

    Best regards,
    Mike

    March 19, 2024 at 6:50 pm #1437638
    Sandy

    Thank you! This works and is resolved!

    March 20, 2024 at 4:28 am #1437662
    Ismael

    Hi,

    Glad to know that this has been resolved! Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘CSS for list item font colour on hover in post block editor’ is closed to new replies.