CCS codes are used at many occasions in the blogger template. If you don't know about these , you may be confused as you see a letter with binary codes. So skip it. For Other , I think these might be very useful at editing your blogger template.
Margin & Padding
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}
or
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}
Border
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}
or
#div {
border:5px dotted blue;
}
Background
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}
Font
#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}
List
Margin & Padding
#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}
or
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}
Border
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}
or
#div {
border:5px dotted blue;
}
Background
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}
Font
#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}
List
#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}
* From www.leigeber.com
11 comments:
Hello, that's a great blog and i found you as a new member in the fantastic EntreCard network.
But i couldn't drop my card on your blog because you have not yet put the EntreCard widget on your blog for getting much more traffic each day :((
thank you cornyman,
yep , i am new to Entrecard ! its ok now.I put the widget.
:)
Now you only have to approve the ads on the Dashboard of EntreCard (when you login there, you'll be automatically on this page).
The ads are on the right side. Click approve and they will jump to the other right side.
You will get the money which the advertiser have paid for showing the ads on your blog-widget!!
@ cornyman
thanx bro !
hello, i would like to ask.
i've put the margin and padding code at my blog and now the post body with the sidebar is on the left.
how can i change it so that it is on right instead?
thankyou so much anyway for this. appreciate it. been trying out many things already, but never work.
tq
:((
I posted a picture as background of blog using photobucket and ccs
.body-fauxcolumn-outer {
background: url(http://www.example.com/image.png);
}
.body-fauxcolumn-outer div {
background: none;
}
but the background isn`t fixex and it moves (scrolls) up and down as fixed to the gadgets
how can I make it fixed as a regular blogger layout background?
For a "part 01" I'm missing where to put the css. I've tried putting it into the "blogger template designer" under the advanced--> Add CSS area, but it doesn't seem to cause any changes. Using the margins and padding code, I even changed the left side to be 150px, and no noticeable change... What am I doing wrong?
Hi friend,
I am from India and can say that you have sound technical knowledge about html and css. I am facing a problem and I need a help from you.
I have uploaded a new theme in blogger. It looks great but there are some problems:
-There are only 5 posts at homepage. I am not able to increase it from design or posting section as it remains as it is. I want atleast 10 posts at homepage.
-At the bottom of the posts, it shows only 3 pages link. I want up to 7 or more pages.
-When I click on next, it shows only 4 post including last post of previous page. I want 10 posts there.
Can you please help me regarding this. I will always be thankful to you. You can also have a look of my website: www.itsmycountdown.com.
thanks for sharing
nod32 username and password