How to Change the Color of Your Blog Background
Introduction:
In this tutorial we will teach you how to jazz up your webspace and change the color of your blog background, the color of your text and the outline color of your webspace. You will use a variety of HTML codes to do this. Any level of blogger can do this procedure. The only thing you need is a computer with internet access and webspace. It will take only a few minutes and is an easy way to personalize your webspace and have fun with it!
This screen-cast will walk you through the detailed steps of the process providing both visual and audio feed. Below the screencast are step-by-step detailed instructions that will walk you through each step taken in the screencast.
Instructions:
1. Open up your internet browser and
access your webspace
2. Go to the design tab on the top of
the screen and click on templates
3. Select stylesheet under the heading
"index templates"
4. Scroll to the bottom of the text and
paste the following code into it
body {
color: TEXT COLOR;
}
#content {
background-color: BACKGROUND COLOR;
}
#container-inner {
background-color: OUTLINE COLOR;
}
Note: Some stylesheets have two possible text options (A or <A>) for your stylesheet. This is located in the upper right corner of the Edit Page. Before pasting the code make sure you are in the <A> code format by clicking on the <A> link.
5. To change the color of the text, background or outline paste the chosen HTML code into the appropriate location.
Note: The code for the background color should be inserted in place of the text "BACKGROUND COLOR", the code for the text color should be inserted in place of the text "TEXT COLOR", and the code for the outline color should be inserted in place of the text "OUTLINE COLOR".
Note: Below is a list of HTML color codes that work for each component of your webspace as well as a link to a site with a variety of different HTML color code choices.
6. Save
and publish your changes
7. Refresh your webspace to view the changes you just made
Warnings:
-Some color safe codes do not work for every aspect of your webspace. If this occurs, pick a different color code and perform the same task.
Professional Background Tips:
Choosing background colors when creating a professional website is extremely important in establishing credibility and making the website a success. Colors are an important addition in order to catch attention. Yet, too many colors, or choosing the wrong colors can be detrimental to a website and further, detrimental to the business. The use of color can distinguish between different areas in a website. If the colors are only used for decoration, the template will not be professional.
Below are
a few tips to help you choose colors for a professional background:
1.
Avoid yellow for webpage backgrounds because it causes eyestrain.
2. Select a background color that will compliment the text color you choose and the overall design of the webpage.
3. Avoid
black backgrounds because they limit text color choice to white or yellow which
can again be hard on the eyes against black.
4. If
in doubt, use black text on a white background. While it may not be the
most original choice, this color choice ensures readability by all.
5. Remember
that your web space color effects mood and will have an effect on website
visitors. Select colors based on the type of effect you are trying to
achieve.
Below is a list of fonts that would be appropriate choices for a professional website to help you get started:
|
Professional Colors |
Codes |
|
Dark blue |
#000080 |
|
Dark grey |
#808080 |
|
Black |
#000000 |
|
Slate Gray |
#657383 |
|
Medium Slate blue |
#5E5A80 |
|
Dark Slate Blue |
#2B3856 |
|
Midnight Blue |
#151B54 |
|
Dark slate gray |
#25383C |
|
Maroon |
#810541 |
|
Dark Violet |
#842DCE |
|
Plum4 |
#7E587E |
Note: The following link will bring you to a multitude of additional HTML color codes to help you to personalize your professional blog.
References:
No TrackBacks
TrackBack URL: https://blogs.psu.edu/mt4/mt-tb.cgi/129704
This worked! Good job :) My page is much more stylish now!
Very easy directions to follow. Good illustrations.
For some reason this task did not work for me. I did every step and found colors I wanted to paste into the appropriate places and the color still did not show up. Any tips?
This works for me, but there's a slight problem when copying and pasting the code in Safari. Firefox is fine.
Hey, This Works.
After deleting my code, the code worked.
Caution: embed code into the code A of your blog page.
It worked!!