To add custom CSS there are several methods:
Child 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) .
Settings > Additional CSS
Please access the Theme Settings and open the Additional CSS panel. Here you can paste your CSS in the code editor.
Which method should you use?
For most cases, use Settings > Additional CSS. It requires no file editing, it can’t break your site, it keeps revisions, and you see changes live while you type. It’s also output inline in the page, so it doesn’t add an extra HTTP request.
A common reason people prefer it in Rey: Additional CSS is printed after all other stylesheets, so your rules win by default. CSS placed in the child theme’s style.css may load before some of Rey’s on-demand component styles, which is usually why a rule “doesn’t work” and people end up adding !important to everything.
Use the child theme’s style.css when you’re writing a large amount of CSS, when you version your code in Git, or when the site will be handed over to another developer who expects the styles to live in files.
Either way, the CSS is tied to the theme. If you switch away from Rey, you’ll need to move it.
Show comments and replies (closed)Hide comments and replies
Left here in 2021, when comments were open. The answers were written then and may describe a version of Rey that has changed since.
Use
.outofstock .price{display:none !important;}
For future support requests please use https://support.reytheme.com/new/ form.
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 ?
Hey!
I see. Maybe adding this code snippet [link no longer available] into Customizer > Additional CSS might help ?
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.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!
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}