CODEWITHSUNDEEP
htmlcsscss-selectors
Mthe beseti
Mthe beseti

Reputation: 619

change color of the same div when on another page

I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.

The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?

This is the class that I want to style differently not on home page but on original .testimonial page

.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}

I've tried to use the below method:

.other-pages-background, .testimonial-author{
color: red !important;

}

but it changes on all the pages.

thank you

Upvotes: 1

Views: 2245

Answers (4)

LouD
LouD

Reputation: 3844

Comma means both selectors get the same styling. Try it without the comma to combine them:

.other-pages-background .testimonial-author{
    color: red !important;
}

UPDATE:

Since you are using Wordpress, you can use the following with the appropriate page id:

body.page-id-111 {
    color: red !important;
}

Upvotes: 1

Christopher Thrower
Christopher Thrower

Reputation: 730

You'd probably be better off wrapping your testimonials on the homepage in another div, so you can use your CSS to target the testimonials on the homepage, without effecting the testimonials page itself.

For example; on your homepage you could have

<div class="homepage-testimonials">
    <div class="testimonials">
        <div class="testimonial-author">John Doe</div>
    </div> 
</div>

Your CSS;

.homepage-testimonials .testimonial-author { color: red; }

Upvotes: 2

Arthur BALAGNE
Arthur BALAGNE

Reputation: 313

When you load the page ask php to write in the head AFTER the css load

<script>
.testimonial-author {
color: #color;}  
</script>

Upvotes: 1

M.G.Manikandan
M.G.Manikandan

Reputation: 993

There are different ways to achieve this.

Include a additional css file say homepage.css in your homepage along with testimonials.css which will contain css to override the default color.

.testimonial-author {
    color: $HOMEPAGE_COLOR;
}

Add some class body tag of your Homepage and overwrite the css property like below.

HTML

<body class="homepage">

CSS 

/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}

/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}

I prefer the later options.

Upvotes: 1

Related Questions