GET REY

How to add custom CSS

You are here:
Estimated reading time: 1 min
In this article

To add custom CSS there are several methods:

LinkChild theme’s style.css

First, you need to make sure you have a child theme installed. Read how to install child theme.

Once you have it installed, open style.css and paste the CSS code inside it. WordPress has a built-in code editor, so you can access WordPress > Appearance > Theme Editor , select Rey Child and after the page refresh, click on Stylesheet (style.css) eg: https://d.pr/i/4aOSBu .

LinkCustomizer > Additional CSS

Please access Customizer (either in backend Appearance > Customize, or in frontend Customize button in top bar), and access Additional CSS panel.

You can paste your CSS in the code editor.

LinkIs one method better than the other?

Technically yes, actually, not really. Editing the child theme’s style.css is a more “performant” solution since there’s no DB query to get the CSS and output it in the source. Also browser will cache the stylesheet, which does apply more to larger stylesheets. For small parts of CSS an extra http request might actually hurt.

In conclusion, doesn’t matter that much, but i recommend editing the child theme’s style.css.

Was this article helpful?
Dislike 0
Views: 763

6 Replies to “How to add custom CSS”

  1. faizan nasir

    I want to hide out of stock product price in shop archive page, and i have already following custom CSS code to hide but nothing has changed now tell me what to do

    .outofstock .price{display:none}

    1. Marius[ Post Author ]

      Use

      .outofstock .price{display:none !important;}

      For future support requests please use https://support.reytheme.com/new/ form.

  2. Riadh

    Hi, I want to change the background color of input fields and selectors from Black to a specific hex or color when using the Dark Mode, I tried editing the Colors Hue but it doesn’t seem to work. Any help ?

    1. Marius H[ Post Author ]

      Hey!

      I see. Maybe adding this code snippet https://d.pr/n/YPXpS5 into Customizer > Additional CSS might help ?

      1. Riadh

        Hi Marius, thanks for your quick reply.

        It did help with the input fields as intended. I just forgot to mention that I need it for the whole website.
        I did set my background color for the whole website to be a dark blue, but the Cart Panel & Quick View panels are still full black.

        1. Marius H[ Post Author ]

          Hey!

          Not sure i understand why that happens. Can you create a new ticket at https://support.reytheme.com/new/ and create a temporary admin account so i can take a closer look?

          Thanks!

Comments are closed.