So I was asked how I made a background on my sidebar. Like this:
|(from Rubberboot Girl)|
So, I've briefly mentioned CSS selectors before here with a few examples. Most of the CSS selectors that you would want for background would be (CSS on left, real names on right):
.sidebar = sidebar
.post-body = the post's body
h3.post-title = post title
.sidebar .widget h2 = sidebar gadget name
.main-outer = the post body & sidebar (pretty sure... either that or .main)
So, let's dig in.
1. Log in to your account.
2. Click on the blog you want to edit.
3. Go to template.
4. Click customize.
5. Go to advanced.
6. Scroll down and click CSS.
7. OK, so this is where we're going to be using our selectors and then the background code. Since I was asked about the sidebar, I'll use the sidebar. This is what a code will look like:
Now the sidebar is a gray color. (You can find colors by going to Template > Customize > Advanced > Links and playing with the link colors and then copying them when you like it and transferring it to your CSS code, example above.)
This might not look that great, though, because no doubt it now looks something like this:
Which... doesn't look that great. So how do we change that? It's actually very simple! :) We simply employ padding.
Now your sidebar should look something like this:
And if you have a picture like mine that just went off-centered? No problem. We'll just use margin! :)
So now we would have something like this:
Which makes mine look this (you'll have to play with the margin on yours, because like every single sidebar is different almost):
Here we simply made the sidebar bigger to accommodate the picture! :)
Hope this works! If you have any questions, just let me know! :) Have a great day! :)