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;
}
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;
}
give the body a id
<body id="page">
then you can identify it with
#page #box {
.... your CODE
}
I guarantee this will work :)
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.
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>
