Question 30786 in Wordpress Question posted in
The official Wordpress documentation can be found here.

CSS is defined in more than one place, can't find where – WordPress

Thank you for any help! Regarding this WordPress site: https://jtb.yum.mybluehost.me/

I’m trying to change the banner from the coral color to the red color (see images). I changed the "primary-color" to the red color in the CSS file but it’s not changing it. When I look at the inspector in Chrome (see images) and I deselect primary-color (which is still showing up as the RGB for the coral color), then it turns it red, I guess because primary-color must also be defined elsewhere, but I can’t figure out where. It is referencing index, but when I go to index it’s just telling it to use the WordPress theme. How can I change the color to red? It’s driving me crazy. Thank you so much.enter image description hereenter image description here

Tags:

3

Answers


  1. 0

    If you have a way of adding custom css you can find the class of the banner and then do

     .banner-class {
    --primary-color: red;
 }

    or if the banner doesn’t have a class

     bannerElement {
    --primary-color: red;
 }
    Login or Signup to reply.
  2. 0

    I reviewed the source code on the website. I changed the background color to red when I applied the change shown below:

    .banner .caption {
    width: 485px;
    margin: 0 0 0 auto;
    padding: 222px 40px 222px;

    /* You can remove the following style according to the situation. */
    background: rgba(var(--primary-color), 1);

    /* The following style makes the background color red. */
    background-color: red !important;
}

    The predefined style modified above is available in the file style.css. To apply the changes, open the style.css file and change the .banner .caption style as above.

    enter image description here

    Login or Signup to reply.
  3. 0

    It is important to note that the –primary-color and similar CSS variables are not being defined in their ‘full’ CSS form (e.g. rgb(255, 0, 0) which would correspond to the CSS red) but the RGB settings list is used. e.g. –primary-color: 253, 89, 88

    As you are in WordPress you can set custom css through the Appearance option in the admin menu.

    To get that background to a ‘proper’ red (but that won’t affect some other uses of the –primary-color ) use:

    .container {
  --primary-color: 255, 0, 0;
}

    Note: you will probably need to be more specific in your selector to ensure you change only that particular instance of container.

    If you want to change it for the site use :root instead.

    NB – it’s usually wise not to change your theme’s actual files. Use the WP way of doing it instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search