Different css for different pages

Question

I have a blog on Blogger and have some widgets. I was wondering that is it possible that a widget is displayed differently on a homepage as compared to rest of the pages?

For example a box

/* on home page, it should appear like this */
#box {
background: green;
width:200px; height:100px;
}

/* on other pages, it should appear like this */
#box {
background: red;
width:200px; height:200px;
}

default wordpress add class in your body. if you access on home page added home class and other page to page class added by wordpress theme. use .home #box{} for home page other page for .page #box{}. — Ravi Patel, Jul 18 '13 at 06:47

score 6 · Accepted Answer · answered Jul 18 '13 at 05:45

6

I would suggest, put an ID into your home page like,

<body id="home"> and other ids for other pages

Now the CSS changes would be

/* on home page, it should appear like this */
#home #box {
background: green;
width:200px; height:100px;
}

/* on other pages, it should appear like this */
#others #box {
background: red;
width:200px; height:200px;
}

answered Jul 18 '13 at 05:45

Sudip Pal

2,041
1
13
16

I have already mentioned that I am on blogger. When I looked up my template, there is only one body element. How can I create different body elements for different pages and posts. – SarmadK Jul 23 '13 at 09:48

score 1 · Answer 2 · answered Jul 18 '13 at 06:32

1

give the body a id

<body id="page">

then you can identify it with

#page #box { 
    .... your CODE
}

I guarantee this will work :)

answered Jul 18 '13 at 06:32

Michael Unterthurner

921
1
10
25

user2583040 · Answer 3 · 2013-07-18T06:18:50.820

0

you have to put this code htlm code page not css code page if you said !important it is override other code

      <style>
             #box {
              background: red !important;
    width:200px !important; 
height:200px !important;
    }    
        </style>

edited Jul 18 '13 at 06:18

answered Jul 18 '13 at 05:42

user2583040

83
10

This is invalid syntax. – Daedalus Jul 18 '13 at 05:46
Better, but it doesn't answer the question. – Daedalus Jul 18 '13 at 06:13
ı have same problem last months. Are you sure you put this code at your html page at part of css import? becase it work at me :( update it ı am again – user2583040 Jul 18 '13 at 06:20
Read the question again; it isn't asking how to make a box red, but rather how to have css affect items differently, on different pages. – Daedalus Jul 18 '13 at 06:43
ı read question body =) ı write my html code with notepad++ may be your ide is different becase ı was used carusel its height and width is different all of my page.. have a good day – user2583040 Jul 18 '13 at 06:47
I'm not using an IDE; I can tell just by looking at what you have given that it doesn't answer the question. This makes a div with an id of 'box' red.. it doesn't depend upon the page that is being served. In fact, all you did is copy the OP's code an add `!important` to it. – Daedalus Jul 18 '13 at 06:48
dont understand me wrong ı want to ask for learing..as you said my code come red.. if you put this code your between html codes and said important to it will be red.. background: red !important; this mean dont read other background clour read only this code – user2583040 Jul 18 '13 at 11:11
And that isn't the question. – Daedalus Jul 18 '13 at 19:14

score 0 · Answer 4 · edited May 23 '17 at 11:49

You can't apply different stylesheets to different parts of a page. You have a few options:

The best is to wrap the different parts of the page in divs with class names: REFER

  <div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

Then in your part1 CSS, prefix every CSS rule with ".part1 " and in your part2 CSS, prefix every CSS rule with ".part2 ". Note that by using classes, you can use a number of different "part1" or "part2" divs, to flexibly delimit which parts of the page are affected by which CSS rules.

Different css for different pages

4 Answers4