Welcome to tumblrtutoriial! a place where we share our resources, tutorials and themes! this blog was created by jess on july 2nd, 2011. feel free to ask us a question if you don't understand something! please also read our faq before asking us (:
Sidebar Informations/Codes a CSS Tutorial

have you ever wondered how can your sidebar float?? well, here’s a css tutorial!

look for the sidebar div, like for example:

<div id=”sidebar"> the sidebar is the div, if you see id, it means it’s with a hashtag + the div name, like:

<div id=”sidebar"> so it means the div in the css is= #sidebar! if it is

<div id class=”sidebar"> the div in the css is .sidebar!

but in your theme, sidebar could be anything! just search where you put your information, not the posts :)

Now, for the positioning, here’s an example of a floating sidebar:


position: fixed;

left: 150px;

top: 40px;

width: 200px;

background-color: #fff;


look at the bolded word (fixed) it’s fixed, a lot of theme says there is a fixed sidebar there, it means floating, and if we say fixed, it means float. if you don’t want it to float, change the bolded text (fixed) into absolute.


You can put a background image to your sidebar!!!

just add:

background-image: url(BACKGROUNDHERE);

you just have to put the background image url in the BACKGROUNDHERE between the brackets, don’t remove the brackets otherwise the codes wouldn’t work.

// Claire

Posted with 11 notes · Reblog?

  1. tumblrtutoriial posted this