CODEWITHSUNDEEP
csswordpress
lisaj_
lisaj_

Reputation: 105

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

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

Upvotes: 1

Views: 54

Answers (3)

A Haworth
A Haworth

Reputation: 36426

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.

Upvotes: 1

Sercan
Sercan

Reputation: 5081

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

Upvotes: 1

Lightvvind
Lightvvind

Reputation: 155

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;
 }

Upvotes: 1

Related Questions