3

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

2 Answers 2

8

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.

Sign up to request clarification or add additional context in comments.

1 Comment

That worked for me. Thanks. First time I learn an easy way to apply CSS for only one page. I didn't use <body>.
3

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

2 Comments

I'd suggest using body.home in your CSS file instead of .home just in case the theme author has used a home class anywhere else.
Awesome! I tried with the body.home and it worked exceptionally, thank you so much! @Chankey Pathak

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.