Having trouble customizing using css

  • wehoit

    (@wehoit)


    4 months, 3 weeks ago

    Hi – I like the theme so far, but I’m having a lot of trouble customizing some css – it seems that no matter what I try, I can’t find the correct item to edit.

    For example, I’m trying to make the hover background color of a button different than the default blue.

    I know I can change the Style -> color values, but I’d prefer to be able to make custom colors or simply edit they style.css file. However, I can’t find where the correct hover color is.

    I believe it’s this block:

    input[type="button"]:hover,
    input[type="submit"]:hover,
    .wp-block-search__button:hover {
    background-color: var(--wp--preset--color--quaternary);
    color: var(--wp--preset--color--white);
    }

    but my changes never show in the Editor, or when I refresh my page(s).

    Can you help me here?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Ravi Gadhiya

    (@ravigadhiyawp)

    4 months, 3 weeks ago

    Hi @wehoit 👋

    Glad to hear you’re enjoying the theme!

    The reason your custom hover color isn’t showing is that the theme uses an editor-specific stylesheet located at assets/css/editor-style.css. The CSS block you mentioned comes from this file and applies only within the block editor, not on the front end.

    For the front end, styles are loaded from the main style.css file, while editor-style.css controls how elements appear inside the editor.

    If you’d like to change the hover color in both places, you’ll need to:

    • Add your custom CSS to style.css (or Customizer → Additional CSS) for the front end, and
    • Optionally update assets/css/editor-style.css if you want the same effect in the editor preview.

    That should ensure your changes appear consistently. 😊

    Thread Starter wehoit

    (@wehoit)

    4 months, 3 weeks ago

    HI @ravigadhiyawp

    Ok thanks – that’s exactly what I was looking for.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.