CODEWITHSUNDEEP
phpcsswordpress
Forza
Forza

Reputation: 1649

Different CSS for homepage

Ok, based on the answer here by traitadmin (scroll down) I am trying to display different CSS for my front page and one for all other pages.

Previously, my body tag looked like this: 

<body <?php  body_class() ?>>

Now, I have edited it to look like this:

<body <?php if (is_home()) { ?> id="home"<?php } else { ?> body_class()<?php } ?> >

Also I have put new stylesheets in my enqueue, and all styles for the homepage now have #home in front of them.

However, there is no style at all now and my site broke down entirely, for all pages.

I think I may need body_class() also for the homepage. But how I can edit this code so that it works?

Upvotes: 3

Views: 3179

Answers (3)

Pitchinnate
Pitchinnate

Reputation: 7556

Easiest would actually be this:

<link rel="stylesheet" href="main.css">
<?php if (is_home()) {
    echo '<link rel="stylesheet" href="home.css">'
} ?>

Rules in home.css should have a high priority than main.css. So with this if main.css has this:

body { background-color: white; }

and home.css has this:

body { background-color: blue; }

Since home.css is linked after main.css the rule in home.css will take priority and the background will be blue. This way you can only overwrite the styles you need to and all the other styles will still apply.

In your case after your other wp_register_style() just add an if test and then register another style.

if (is_home()) {
    wp_register_style('home-style',get_stylesheet_directory_uri().'/stylesheets/home.css');
}

Upvotes: 1

diggy
diggy

Reputation: 6828

By default, WordPress adds two classes to the body tag: on the front page (is_front_page()) the home class is added, and on the home page (is_home()) the blog class is added. So, in your main CSS file, you can use the body class as follows:

#mydiv {background:green;}
.home #mydiv {background:blue;}
.blog #mydiv {background:red;}

Upvotes: 0

Matthias Wegtun
Matthias Wegtun

Reputation: 1261

Looks like a wordpress code so here goes: In the head:

<?php if (is_home()) {
    // loading the stylesheet if it is the homepage
    echo '<link rel="stylesheet" href="home.css">'
} else {
    // loading the other stylesheet if it is not the homepage
    echo '<link rel="stylesheet" href="other.css">'
} ?>

Upvotes: 0

Related Questions