Return to previous page

How to change text color for "separator with text" element using CSS

This topic has 4 replies, 2 voices, and was last updated 5 years ago ago by Rose Tyler

  • Avatar: malanepellico
    malanepellico
    Participant
    October 16, 2019 at 21:23

    I am using the Separator with Text element, but the color in the dialog box only changes the color of the separator lines. How can I target the Text in the Separator with Text element to change the text color to white?

    #223334 Copied Theme version: royal-child v6.0.1 (child 0.0.1)
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 17, 2019 at 07:11

    Hello,

    You can add a custom class for the element and custom CSS code in Theme Options > Custom CSS.
    For example, http://prntscr.com/pkehih + 

    .text-white {
    color: white;
}

    Regards

    #223347 Copied
    Avatar: malanepellico
    malanepellico
    Participant
    October 17, 2019 at 17:02

    Hi Rose,
    I already tried that. It is just NOT working… I even tried:
    .text-white {
    color: white !important;
    }
    and it is still not working. Any other ideas on how to target the text in the “Separator with Text” element? You can see two of them on the home page of moonbowpublishing.com. They are currently dark grey text with white lines over a dark background image.

    #223425 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 18, 2019 at 07:13

    Hello,

    Please change the code to

    .text-white h4 {
    color: white;
}

    Regards

    #223446 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Sidebar Boxed Store – WooCommerce Theme
lazy-placeholder
Organic Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme
lazy-placeholder
Beauty – WooCommerce Theme
lazy-placeholder
Dokan Multivendor Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WooCommerce Theme
lazy-placeholder
Onepage Store – WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.