FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

18 October 2011

Tuesday's Tips -CSS Basics backgrounds

I've posted many tutorials on how to create different things for your blog. In each of those tutorials I've mentioned ways that you can customize the object. I've gotten several questions asking for more ways to customize the CSS. So I'm going to start a little series on CSS Basics. Some of the topics will include backgrounds, borders, text styles, links, and more. That way you'll have a better understanding of what CSS codes you can add to customize the tutorials. =)

Backgrounds
There are two different types of backgrounds, ones with color and ones with an image.

Color-Backgrounds
background: #ffffff;
background-color:#ffffff;
Either of these codes will control the background color. Use the html code for the color you want your background to be. Do not delete the '#' symbol. ([here] is an online color picker, use the number at the top)

 For example:
background-color:#f5f5f5;


Image-Backgrounds
background-image:url('IMAGE DIRECT LINK');
This is where you will put the direct link to your image that you want to be the background. You will have to upload it to an image host first, before you can get the direct link. (I suggest using imgur or photobucket as your photo host) Do not delete the quotation marks around the url.

background-position: 0% 0%;
This controls the position of your background image. Only change the numbers and do not delete the percentage marks. 


background-attachment:fixed;
This controls if your image scrolls or is fixed when scrolling. (see examples below)

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:fixed;

background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:scroll;


If you have any questions--don't hesitate to ask! Also, if you have anything that you want me to cover on Tuesday's Tips let me know. (I'm kind of running out of ideas...suggestions are very welcome!)

In Christ,

8 comments:

Eve

I know I'll figure it out sooner or later, but since you asked, a drop-down menu tutorial would be nice! :)

Emily Grace

I'll start on a tutorial for that, Eve! It may or may not be ready by next week--it is a more complicated one. :)

mary ann

Do you have anything about how to make comments numbered? Thanks :)

Emily Grace

Mary Ann - Yes, I can do one on numbering comments. :)

Storyfingers

I have a question about backgrounds. I have selected the simple template and I want to make it so that the whole blog is white (minus the header) - with no shadow outlines marking the widths. And example of this style is www.paperraindrops.blogspot.com. Could you let me know how to do that?

Thanks!

Emily Grace

Storyfingers - Yes, it is very simple to get rid of the drop shadow border. Go to your dashboard > template > edit html. Then search for this piece of code in your template:

.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;
}


Replace it with this code:

.content-outer {
-moz-box-shadow: 0 0 0px rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0px rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 0px #ffffff;
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
margin-bottom: 1px;
}


This should get rid of the drop shadow border. If you have any more questions, feel free to ask! :)

Gloria {Lia}

Can you do a tutorial on how to change the date-header? It's really cool how you did that:)

Emily Grace

Gloria {lia} - I'll do one on customizing the date header. =) You can go ahead and use the HTML Basics tutorials and customize this code: h2.date-header {.

Post a Comment

Leave your thought...