CODEWITHSUNDEEP
csswordpress
Adamdadam
Adamdadam

Reputation: 57

How do I change the css of only one page in wordpress?

I need to change the css of the home page only, I have googled and a lot of the suggestions were to add the page id as part of the css selector. But when I try it, it doesn't seem to work? I want to change the class ".contentclass" and the pages id is "599" so here's what I've tried:

.post-id-599 .contentclass {}
.page-id-599 .contentclass {}
.body-id-599 .contentclass {}

none of them seems to be working...

Link to the webpage I'm working on: Link

Upvotes: 3

Views: 32617

Answers (2)

StandardSpace
StandardSpace

Reputation: 410

Try using the right click "inspect element" or equivalent for your browser.

When I look at your site I see something like this

enter image description here

<body class="page page-id-624 woocommerce-cart woocommerce-page boxed varukorg" style="">

So for example for this page: http://witdesign.se/wp/varukorg you would use 

body.post-id-624 .contentclass {}

Any styles within the braces will be applicable to the pages with a body class of post-id-668

To be sure, you will need to check what renders in your browser using an inspector.

Upvotes: 8

Chankey Pathak
Chankey Pathak

Reputation: 21676

If your theme uses body_class() in the body tag, you will have a specific css class for the front page (.home), which you could use in the stylesheet;

Example (might be different for your theme):

.home #content .entry { color: #123edf; }

to overwerite the genral stylesheet style.css, you could use a conditional statement in header.php to link a specific stylesheet for the front page:

Example:

<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } ?>

the code needs to be after the link to the general stylesheet.

(instead of is_home() you might need to use is_front_page() )

Check: Conditional_Tags and get_stylesheet_directory_uri

-- alternative, to load a different stylesheet instead of the general stylesheet, use the conditional statement with an else: (this code would replace the link of the general stylesheet)

Example:

<?php if( is_home() ) { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/front-style.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<?php } ?>

Upvotes: 3

Related Questions