How change Blogger background color

The Blogger Template Designer has now made changing the blog background color very easy. Sign into www.blogger.com (Dashboard), and at the right sidebar, click the down arrow (drop-down menu) to get a series of options:



Click on LAYOUT and then ADVANCED tab and then on the right would be the 3 options to change colors of
1. Outer background
2. Main background
3. Header background




Choose your selected color by clicking on the colored box or type in your HTML color code (eg #a1b2c3).

Continue reading →

How to change post title background color with template designer

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer
Read rest of post >>>

Continue reading →

Change sidebar title background color

A blogger asked: "I want to add background colour to the sidebar title / header. pls show me the way.".

Well, that is not too difficult. Sign into Blogger (Dashboard), click LAYOUT > EDIT HTML to open the template editor and search for this:

.sidebar h2 {
etc. etc.
}

etc. etc. means whatever may be in between { and } but which is not relevant to this post

Edit it (add a line) to read

.sidebar h2 {
background-color:blue;
etc. etc.
}

If you cannot find

.sidebar h2 {
etc. etc.
}

Then just add this:

.sidebar h2 {
background-color:red;
}

(or any color rather than red or any other HTML color code

to anywhere before

]]<>/b:skin<

but preferably just after:

/* Sidebar Content
----------------------------------------------- */

so that it is together with others in the template which is related to the sidebar. That section of the template will then look like this:

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
background-color:red;
}

Note: My aim is to make this blog easy to understand, so if the above is difficult for you to follow, do make a comment and let me know what is the source of your difficulty.

Related post: How to change background color of sidebar

Continue reading →

Change blog background color

Update: The new Blogger Template Designer has made this task very easy.
Sign into Dashboard (blogger.com) > Design > Template Designer > Background
and change whatever you fancy there easily.

This blog uses Ramani's 3 column Minima template and the background color of the blog is white. To change the blog background, go to LAYOUT, click Edit HTML, look for the outer-wrapper portion of the stylesheet of the template. Add the line

background: chosen color;

For example, in an extract of the template below, a line (in red) has been added:

background: green;


/* Outer-Wrapper
------------------------------------------------ */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
background: green;
}

Continue reading →

Changing fonts and colors for New Blogger

It is now very easy to change the fonts and colors of various things in your New Blogger blog. You don't need to tamper with the template. You can do it direct from the LAYOUT.

Sign into blogger.com (Dashboard). You will see a list of all your blogs. Click LAYOUT for the relevant blog. Then click the FONTS AND COLORS sub-tab. See screenshot below:



Say, you want to change the font for the Header. Scroll down till you see "Page Header Font". On the right, you will have the radio button to chose the font family and further to the right, you can change the font style to bold or italic. There are also linls to change the font size to "bigger" or "smaller"

Continue reading →

Change background color of New Blogger sidebar

A blogger commented that he could not find the sidebar color code in the template to change the background color of the sidebar. The CSS (Cascading Style Sheet) of every template is written different and if something is missing, all you need to do is to add the relevant missing part in.

For example, in the standard Blogger Scribe template, this is the section in the CSS (Cascading Style Sheet) for the sidebar:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

There is nothing mentioned about background. So what I did was to add a single line

background: #FFFFFF;

(#FFFFFF is the hexadecimal color code for white) to that section, so that it became:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
}

You can see the result at Standard Blogger Scribe Template.

BTW, instead of using hexadecimal color codes like #FFFFFF, you can also use most names of colors like red, blue, white, etc. If you want to blend the color to the colors of the site, try typing the search term "colorpic" or "iconico colorpic" into the search box above, tick ( ) Web radio button and search, and I am sure you would see the link as the first result in the SERP (search engine result page) to download a very useful tool I use to get the color code of colors on any website. (I don't want to put too many outbound links as I understand outbound links can lower your PageRank).

I also find
Color Blender very useful if I want some "in-between" color or colors. If anyone is interested on how to use that site properly, just make a comment and I will do a new post on how to use it.

Related post:
How to change sidebar title background color
How to add background image to sidebar

Continue reading →

How to change the color of the blog background, text in the content, etc.

Someone asked in a comment how to change the color of fonts, etc. With the New Blogger, this is really very easy. Just get into the Dashboard of the blog, click, "Template" tab, then the "Fonts and Colors" sub-tab and you will get this page (see screenshot):



First, choose what your want to change in the left side of the page, then preferably select a color from the blocks of color to the left. You should preferably select colors that matches your blog or colors from your blog. Be careful if you are choosing color for the font, not to choose a color that matches the background, or choosing a corlor for the background not to choose a color that matches the font. That will make the text invisible, making your blog unreadable. Worst, it can get your blog black listed by the search engine as that is considered black hat SEO (Search Engine Optimization). If those colors mentioned doesn't satisfy you, that are other color further to the right. You can also input the exact HTML code for the color you want. For this task, getting the very useful ColorPic will be very helpful.

If you are trying to get the HTML color code for the link on your site, it is best to make a screenshot (press "Printscreen" key, then paste it into the Paint program available in Windows in the Accessories, or use my favourite - the free Irfanview). You have to use an image of your page because most links change in color the moment you place your mouse over it, but with a screenshot, that doesn't happen.

Continue reading →

How to make a picture as a background

Update: With the new Template Designer, it is now very easy to add or change background for your blog. Sign into Blogger.com

Dashboard > Template Designer > Background

and there you can change your background color or image at will without having to directly edit the template.

The first thing you have to do is to choose an image where the color of the image and the text of the blog are compatible and the color doesn't clash. Otherwise the text will be very difficult to read. Another thing is the size of the image. If the image size does not fit the whole background, it will normally repeat itself unless you choose not to do so (see last part of post). If it repeat itself, to make the background pleasant, you will have to ensure the repeated images merge properly. For my demo blog Self Improvements, I chose a cloudy sky with white and light blue as they merge into each other well while the black text on the light background will still be clearly readable.

When you have selected your image and have stored it in your computer, then to make the picture as a background, you first have to post the picture on the web somewhere or host the picture with a photo host like Photobucket. Refer to "Getting Blogger to host your pictures for the profile, etc." if you want Blogger to host the image. Get the url (example http://photo-url.jpg) of the picture, then sign into Dashboard, select the blog, click TEMPLATE tab, and look for this block of CSS code in the template. It will be somewhere in the beginning of the template:

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Then add this line of code
background-image:url("URL of photo");
to the above, as shown below (added code in red)

body {
background:#fff;
background-image:url("URL of photo");
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

replacing URL of photo with the real url of the picture, for example
http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg

If you don't want the image to repeat in the background, all you have to do is to add another line to the code: background-repeat:no-repeat;

So your CSS code become:

body {
background:#fff;
background-image:url("http://photos1.blogger.com/blogger/5611/753/1600/sky-19.0.jpg");
background-repeat:no-repeat;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

NEWER POST

OLDER POST

Continue reading →