Technically, the title should read 'Change Blogger's Dynamic View Content Background'. Unless you've been living under a rock, you would have known about Blogger's 7 new ways to display your blog. Yes, I wrote 'display', not 'view'. That means you can set your homepage to show in a dynamic view by default. But I'm not gonna write a review on how awesome the dynamic view is - as hundreds, if not thousands, of bloggers are already on that course. In this tutorial, I'm gonna show you how you can change the pale white background to a background image of your choice. You might be wondering why not just use the Template Designer to change Dynamic View's background instead. Yes you can, but you will only be able to change your main background - your contents will still show the white background. Hence, this much needed tutorial.
Update: I've included the code necessary to extend the tweak to static pages as well.
Step 1:
Prepare an image to be used as a background. I'll be using the default background from one of the 'Awesome Inc' templates. Once you've got the image, upload it to an online hosting site and get its direct link. Click here if you're not sure how to do this.
Prepare an image to be used as a background. I'll be using the default background from one of the 'Awesome Inc' templates. Once you've got the image, upload it to an online hosting site and get its direct link. Click here if you're not sure how to do this.
Step 2
Note: This code will work on all 7 Dynamic Views. At first I was thinking of providing code for each view in this tutorial, but I don't think it is necessary anymore, as your reader can easily switch from one view to another. And when that happens, it'll be nice to see the same customised background on that other Dynamic View that your reader switches to.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Don't forget to change the address in Line 2 above to that of your background image (the one that you've gotten from Step 1)
Note: This code will work on all 7 Dynamic Views. At first I was thinking of providing code for each view in this tutorial, but I don't think it is necessary anymore, as your reader can easily switch from one view to another. And when that happens, it'll be nice to see the same customised background on that other Dynamic View that your reader switches to.
If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
1 2 3 4 5 6 7 | #items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {background: url('http://img641.imageshack.us/img641/7830/imageuft.jpg') fixed !important;} .items.hfeed{background: transparent !important;} |
Extras:
1) If you want to use a color as your background instead of an image, use the code below. Replace '#FF8809' in Line 2 with another hex that you like. You can generate hex code based on your preferred color by clicking here.
2) Note that you can use the Template Designer's 'Background' tab to upload a main background to your blog's body. As I've mentioned before, this tutorial adds background to the content page only, as you can easily use the Template Designer to add a background to your blog's body. Personally I think it is best to add background to both content and the body. It gives the 'customised' look that your blog deserves - thus distinguishing your blog from other blogs that use Dynamic View. If you think the background uploaded using Template Designer does not cover the entirety of your blog's body, add this to your CSS code instead (same instruction as in Step 2):
3) In Magazine view, when you hover over a particular post, the post will seem to be highlighted by a white box. To change the background color of this post, add the following CSS to your Template Designer. Feel free to change the color pink to another color or image.
4) I've only provided one background layer for each view. It is possible to customize the background even further. For example, in Magazine view, you can apply one set of background on the front view, and another set when you click on each post. They are highly customizable that I couldn't cover everything in this tutorial. I figured it'll be best if I take requests instead of trying to cover every single outcome. So, if there is a background-layout design that you desire, feel free to leave a comment and I'll provide you with the code that you need.
1) If you want to use a color as your background instead of an image, use the code below. Replace '#FF8809' in Line 2 with another hex that you like. You can generate hex code based on your preferred color by clicking here.
1 2 3 4 5 6 7 | #items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {background: #FF8809 !important;} .items.hfeed{background: transparent !important;} |
1 2 3 | #header .header-bar, body, .viewitem-inner{background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;} |
1 2 3 | #lead .item:hover, #feature .item:hover, #fold .item:hover{background: pink !important;} |
Happy Blogging folks, and be Dynamic! I'm gonna remain Old-School for now.
You might also like:
