Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, September 30, 2011

Change Blogger's Dynamic View Background



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.

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.
#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;
}
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)

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.
#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;
}
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):
#header .header-bar, body, .viewitem-inner{
background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;
}
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.
#lead .item:hover, #feature .item:hover, #fold .item:hover{
background: pink !important;
}
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.

Happy Blogging folks, and be Dynamic! I'm gonna remain Old-School for now.

263 comments:

  1. is there a way of changing the header of your blog to a different image/colour than the body or background (sorry im not to caught up with whats what on this new blogger) i want where it reads 'test blog 10' and its bar across the top (header or whatever its called) to be a different colour to the red hearts used for the background of the blog

    thanks

    ReplyDelete
  2. @Hannah: You bet there is. I've separated the two. The first code below corresponds to the header section, and the second one is for the main body. You can have a different background on your header, just change the color as you like, or upload an image for it.

    #header .header-bar{
    background: white;
    }

    body{
    background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;
    }

    ReplyDelete
  3. Dynamic view is wonderful except that I had no way to change the color background of my post. Your CSS code worked like a charm. thank you

    ReplyDelete
  4. @Brent: My initial thoughts exactly. Hopefully we'll have more control in the future.

    ReplyDelete
  5. cheers for the help!
    do you also know how to change the thumbnail picture provided on each post?

    ReplyDelete
  6. Do you know if theres any way of changin' de navbar? This thing of seeing all the different displays looks like sh*t to me... Thanks!

    ReplyDelete
  7. @MarcusRimondini: Check out this post buddy:
    Change Blogger Dynamic View's Thumbnail Picture

    @Polaroid: How do you wish to change it? I've published a tutorial on how you can disable some of the views - see if this is what you're looking for:

    Disable Certain Dynamic Views in Blogger

    ReplyDelete
  8. Hey yoboy: I would like to know how to customize background for each post.
    And thanx.. ur blog is really awesome!! :)

    ReplyDelete
  9. @रवि: It's not that hard. If you want to give a background for each post, first go edit the posts (one at a time) - Click on Edit HTML to view it's HTML, and paste the following code at the end of the line:

    <b:if cond='data:blog.url == "http://yoboy-dynamicview.blogspot.com/2011/10/thumbnail-experiment.html"'>
    <style>
    .overview-inner{
    background: url("http://2.bp.blogspot.com/-2HnG7tOk23Y/ToT4cPI-cLI/AAAAAAAADqA/w2CqJK1C00U/s1600/P1010912.JPG") !important;
    }
    </style>
    </b:if>

    The first line should contain the address of that post, and the fourth line should have the direct link to your background. Republish the post when you've inserted this piece of code. Of course, you need to do this one by one, for each post. Cheers.

    ReplyDelete
    Replies
    1. Hi Almeda,

      I need more context. What is it that you want to do?

      Delete
    2. Hello! I want to have different backgrounds for each posts...

      Delete
    3. hey friend,
      for you to picture out what i want to do,
      here's my blog: http://stupidityandphotos.blogspot.com/
      it's in a timeslide view, i'm contented with the transparency of each post title backgrounds(when not being opened), however i want to have different backgrounds for every posts. Because when you click my posts, it looks stupid with just a white background.

      hope you understand. sorry for the bad english :) haha

      Delete
    4. Right. You should be inserting a piece of conditional code to each one of your posts. For example, the post with the shark picture. Edit it - switch to HTML view - scroll towards the bottom - paste the following :

      <b:if cond="data:blog.url == 'http://stupidityandphotos.blogspot.com/2012/05/manila-ocean-park.html'">
      <style>
      .timeslide .overview-header, .timeslide .overview-content, .timeslide .article{
      background: black !important;
      }
      </style>
      </b:if>

      Good luck! :)

      Delete
    5. It works! Great! thanks for that :))

      Delete
    6. Hi. I tried this code and it didn't work.. no change at all. I tried the other code you posted for Retrobikes.
      It worked except the margins of the post area remained the same color. For example, I wanted to change the post background from yellow to white. What happened was, the left and right margins remained white, while the middle or main body turned yellow.

      Delete
    7. Hi Jhessicca,

      Try this:

      #items li, .article{
      background: white !important;
      }

      Cheers :)

      Delete
  10. These tutorials have been a big help. Thanks!

    I was wondering if there is a way to fix posts to where the text and pictures are the same width?

    ReplyDelete
  11. @lauranceh: I don't quite get what you mean. Do you want to reduce the width of your posts? And are you referring to a specific dynamic view or dynamic view's post page? Need more context to proceed.

    Cheers.

    ReplyDelete
  12. See how the text is wider than the picture: http://www.nineteen-ten.com/2011/08/phoenix-cycle.html

    I'd like to reduce the width of the text so it's the same as the picture - no matter which dynamic view they are being viewed.

    ReplyDelete
  13. @lauranceh: Yes, it is possible. But, we need to specify a fixed-dimension in the code. In other words, all your picture must be off the same dimension. Say we specify 500px in the code. The tweak will work as expected for images that are 500px or bigger. But when you upload an image which is smaller than 500px, the text area's width won't adapt to your picture size anymore.

    Here's the code. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

    .article-content{
    max-width: 650px;
    }
    .separator a{
    margin: 0px !important;
    }

    Change the value 650 accordingly.

    ReplyDelete
  14. Perfect! Thank you very much. I really appreciate your help. I can't tell you how much this was bugging me and how difficult it is to find answers in the blogger forums. Again, thank you.

    ReplyDelete
  15. @lauranceh: The next time you have an unanswered question in the Help Forum, feel free to let me know about it using the contact form below:

    Ask a Question

    Cheers.

    ReplyDelete
  16. Thanks! :)
    One thing.. I cannot change the color of the hightlighted area when focusing a post, like in your demo in magazine view.

    pic: http://img35.imageshack.us/img35/4439/highe.jpg

    Any help? :)

    ReplyDelete
  17. @grimedth: I've updated the post above. See item 3 under 'Extra'. Cheers.

    ReplyDelete
  18. Hi- the problem I am having is when I go to the template designer background tab and select a nature scene (for ex), it does not change the template I originally downloaded long ago. It says it does and I signed out and signed back in, but its still the same old background, but with the new template (that is partnered with the background I selected). Any suggestions?

    Thanks!

    ReplyDelete
  19. @Laura: What's your blog's address?

    ReplyDelete
  20. Somehow, it isn't work at all.. :(
    And an another thing: the white hower only shows up if I delete the first code's ".colomn" part.

    ReplyDelete
  21. @grimedth: I can't tell what went wrong in your template, but the code above works perfectly fine without having to delete anything. I've tested, and double-checked, and tested one more time - and they work fine. See the screenshot and live demo below:

    Screenshot
    Live Demo

    I suggest you to clean up your 'Add CSS' section, and re-enter your CSS code from scratch. Or try with a dummy blog just to make sure things are working fine.

    ReplyDelete
  22. Right, I was not enough specified, sorry :) I use the Timeslide view (see the screenshot, I posted), not the Magazine view, and just mentioned, that I like to colourize the hover color, like in your demo, in magazine view.

    So, how can I change the Timeslide view's hover color?

    ReplyDelete
  23. @grimedth: Timeslide view doesn't come with a hover effect, but you can add one by using the following CSS:

    .column .item:hover{
    background: pink;
    }

    Cheers.

    ReplyDelete
  24. The background for each post code you posted didn't work on my page, does it work any different?

    http://www.wii4everybody.com/p/blizzcon.html

    Good day people!

    ReplyDelete
  25. @Ozi: Did you change the address in the code?

    ReplyDelete
  26. @Ozl: Use the 'Ask a Question' page to leave a quewstion in Blogger Help Forum. Leave your full details in there, including the code that you've used. I'll assist you there.

    ReplyDelete
  27. This is great, but the image I want to use for my background isn't very conducive to any particular font color. Is there a way to make the background 50% opaque instead of completely transparent, so that the text can still be read and the background image can still be seen?

    ReplyDelete
  28. @Keith: You could use your image as your outter background, and use a transparent white background on your posts. Kinda like what you have here in this blog --> http://keithandkarenpenrod.blogspot.com/

    Add the following to your CSS:

    #items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
    background: url('http://www.blogblog.com/1kt/transparent/white80.png') repeat !important;
    }

    .items.hfeed{
    background: transparent !important;
    }

    #header .header-bar, body, .viewitem-inner{
    background: url('http://lh3.ggpht.com/_sSIxLe61eyU/TBZHnMTQ0kI/AAAAAAAAGtA/7PvQxVedNf8/s1600/IMG_0923.JPG') fixed;
    }



    @Rewards: Use this:

    #items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
    background: #FF8809 !important;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    }
    .items.hfeed{
    background: transparent !important;
    }


    Cheers.

    ReplyDelete
  29. Hi Yoboy, before asking anything, I would like to say that you are a legend!!! this blog is to good to be true !! it's very very helpfull and clear, I seriuosly appreciate this blog and your effort!!!
    Now back to business would you be able to tell me how do I use the same background of my blog on my pages, as at the moment i got a horrible white background on every single page that i want to get rid of, and also a very thing grey line also on the pages, that appeared when i add the css code on extras2 of this tutorial.

    Thanks

    ReplyDelete
  30. After creating a new page the background is correct but the written text contents has a white background. I seem to be missing a field to alter the new pages post container background? it looks kinda like a post-it note =P.

    I have removed all the dynamic views titles from the header bar expect for classic, but now how would I do change it to say HOME. Make the link say Home not classic?.

    I need to change the post by author link at the end of each post to a custom URL, i don't to advertise my profile publicly on every post?.

    ReplyDelete
  31. @RetroBikes: What is your blog's address? You should be able to change your pages background by using the CSS below:

    .viewitem-panel .viewitem-wrap .viewitem-inner .viewitem-content .article{
    background: blue;
    }

    Cheers.

    ReplyDelete
  32. @MineCraft:

    Use this to change your pages background:
    .viewitem-panel .viewitem-wrap .viewitem-inner .viewitem-content .article{
    background: blue;
    }

    To include a link that says 'home':
    1) Use the code in Step 1, to hide all your DV options, including magazine.
    2) Using the updated blogger interface, go to Dashboard - Page - New Page - Web Address - Link to your homepage and name it 'Home'.
    3) Arrange it accordingly so that 'Home' will appear before your two static pages.

    As for the author link, you can't change the link as of now, as that will require HTML modification - something we don't have access to at the moment.

    ReplyDelete
  33. Hi Yoboy,

    Thank you very much for your quick reply and help, your code was spot on!!! My page is WWW.RETROBIKES.ES and everything that I've done so far is all thanks to your Amazing blogg!!!
    I wanted to ask you a couple of things that I havent work out how to do it yet.
    The first one is: how to change the background on a specific page?? and the second one I will posted on a different post as i doesnt correspond to this post !!!
    THANKS FOR YOUR HELP!!!

    ReplyDelete
  34. @Retro: That's easy. Edit the page that you want to apply the background on. Switch to HTML mode (as opposed to Compose mode), paste the following code:

    .viewitem-content div.article {
    background: url('http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png') !important;
    }

    Replace the URL in the code above. Cheers.

    ReplyDelete
  35. Hi Yoboy,
    I really appreciate your always quick replies, you are a great helper for lots lots of people, you really are... Talking about the Code that you gave me to change the Background of a specific page, for some reason has not work and trying to do it the white background of my posts (that was perfectely sorted with your first reply) has some how come back !!! so you can imagine... i wanna kill myself!!! the code to change the background of a specific page looks to me like a css code rather than a html code!? is that right?? coz when i add that on the html page mode, what literally happens is that the code added shows through, and when i added that code on the css area basically change the background of all my pages, instead of just one . please please correct me if i'm completely wrong on this... and if you could give a clue what has happened with also the white background of my posts i will really really appreciate it ... this is my email if you wanna come back to me by email info@retrobikes.es thanks thanks and sorry about bothering you again.

    ReplyDelete
  36. @RetroBikes: Ahh, I'm so sorry. I forgot two lines. use this instead. Add to the HTML section of the page that you're trying to change:

    <style>
    .viewitem-content div.article {
    background: url('http://i564.photobucket.com/albums/ss90/yoboy7/mastercopy-1.png') !important;
    }
    </style>

    And add this code to change your pages background to white:

    .viewitem-content, .viewitem-panel .viewitem-wrap .viewitem-inner .viewitem-content .article{
    background: white !important;
    }

    Cheers.

    ReplyDelete
  37. Yoboy; Thank you very much for your response, I will try it asap and let you know how it goes.
    Cheers

    ReplyDelete
  38. Thanks so much for the useful tutorials! They have been wonderful!

    Quick issue: I am struggling to change the colour of the popup post box (typical of magazine view)to be dark grey or black. iv tried the above tutorial, but it just makes the borders of the popup box a different colour and doesnt change the white behind the text. I also want to change the text of the popup post to be a lighter colour so it will be readable on the dark background. Could you please let me know how I can do this?

    My blog address: http://www.wherethewildthingsgo.com/

    Thanks so much!

    ReplyDelete
  39. @Sarah: Sorry for my ridiculously late reply. I've just seen your blog, and it seems like you've already set a dark-grey background to your magazine post popup-box. Seems like you've already figured it out. Let me know if you still need help on this.

    ReplyDelete
  40. Hi, Thanks for a great article.

    I'm struggling to implement a semi-transparent background at my blog: tbdlog.blogpost.com
    The issue seems to be with numbered and unnumbered lists which look different.
    I've used this code:
    html { direction: rtl !important; }

    #Mosaic.ss, #views ul li:nth-child(4),
    #Sidebar.ss, #views ul li:nth-child(5),
    #Snapsnot.ss, #views ul li:nth-child(6)
    { display: none !important; }

    #items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .column .item, .viewitem-content, article {
    background: rgba(255,255,255,0.8) !important;
    }
    .items.hfeed {
    background: transparent !important;
    }
    .viewitem-panel .viewitem-wrap .viewitem-inner .viewitem-content .article {
    background: transparent !important;
    }

    Would appreciate any help with this. Thanks!

    ReplyDelete
    Replies
    1. Hi there,

      Sorry for my ridiculously late reply. You can place semi-transparent background, but it depends on some conditions. If you're gonna make use of images, your images need to be transparent in the first place. Otherwise it won't work. Can I have a look at your blog to get an idea of what you're working on?

      Delete
    2. This code worked perfectly for me! many many thanks!

      Delete
  41. Hi there,

    This is all super helpful and I've almost got my blog to where I want it to be but I can't figure out how to change the background color of my pop-up window when using the magazine layout. It's always displayed with this horrible white box behind it. It makes me cringe every time I see it. I was also wondering how to change the header bar to a drop down menu and then possibly customize the rest of the header bar to other links?

    My blog link is http://yagmkylelarson.blogspot.com/

    Any help you could give me would be great.

    ReplyDelete
    Replies
    1. Use this to change the color of the the pop-up box:

      .article{
      background: grey !important;
      }

      You can get a drop-down menu by adding a custom link/pages (which is your third question). To add a custom link, or pages, go to Dashboard - Pages - New Page - Web Address.

      All the best!

      Delete
    2. Wow. Thanks for the quick response. I also have been trying to change the color of my text on the main page of my blog but it always seems to stay black. Any ideas? I can't seem to get the font to get any bigger either unless I just change it to a larger font type.

      Delete
    3. Add this:

      .summary{
      color: white !important;
      font-size: 15px !important;
      }

      Cheers :)

      Delete
  42. thanx, but this is not working while dynamic views update#3 published. there is any way to do that again !?

    ReplyDelete
    Replies
    1. Hi Hosseein,

      The template designer's live preview seems to be corrupted. The code is still relevant, but it won't show in template designer's preview instantaneously. I tried on my test blog, it wasn't showing in the preview, but it is showing in the actual blog. A screenshot:
      Screenshot

      Can I have your blog's address to see if this is the case?

      Delete
  43. can you update this? with the new gadget feature for dynamic view i can't change background anymore

    ReplyDelete
    Replies
    1. Hi jontor,

      The template designer's live preview seems to be corrupted. The code is still relevant, but it won't show in template designer's preview instantaneously. I tried on my test blog, it wasn't showing in the preview, but it is showing in the actual blog. A screenshot:
      Screenshot

      Can I have your blog's address to see if this is the case?

      Delete
  44. Works great except for this gapin white bit when you view each page/post. I used div tags in the posts and pages to edit the background for them, but the titles are still on a white background.

    Is there any way to make the whole post background the same colour, including the title? Would be especially great if I don't need to keep editing it manually for each post...

    ReplyDelete
  45. Edit on my last comment, I trawled the comments here for a moment and fixed the issue with the page - but the posts still have the white box around the text. I can get the post body to get the colour background using div tags, but still the post title and comments area have a white box :(

    http://feriscious.blogspot.com <-- Only just started it and playing here before I even think of trying it on my other blogs...

    ReplyDelete
    Replies
    1. Here's a fix :)

      .overview-content .article{
      background: #DADADC;
      }

      Cheers..

      Delete
    2. THANK YOU!! I could hug you right now... if you were actually here... so metaphorical hugs and a mars bar.

      Delete
    3. Happy to help. Cheers and God bless!

      Delete
    4. Using the code:

      .article{
      background: #b38e00!important;
      }

      I got the white margin problem, too.

      But I couldn't fix it using the code:

      .overview-content .article{
      background: #b38e00;
      }

      in the Classic, Flipcard, Magazine, Mosaic, Snapshot, and Timeslide views.

      Please take a look at my blog, http:pfge-pfge.blogspot.com

      Delete
    5. Hi pfge,

      I'm sorry I didnt quite catch that. What is the problem again?

      Delete
    6. For example, in the Classic Viewm, when I used the code

      .article{
      background: #b38e00!important;
      }

      I got the white box around the text just like Hannah S. Chacko did.

      How do I make the whole post background the same colour?

      Delete
    7. Hi pgfe,

      Your blog doesnt look the same anymore. Did you switch over to a non-dynamic-view template?

      Delete
    8. Sorry! I just lost all the CSSs.

      I reset the blog to Classic View and use the code

      .article{
      background: #b38e00!important;
      }

      Delete
    9. Hi pgfe,

      Add this to your CSS:

      .item{
      background: #b38e00 !important;
      }

      Do let me know if things arent right.

      Delete
    10. Dear Yogaratnam N.:

      I found it works well for "Classic" View.

      Next question is:

      How can I get "clipboard", "magazine", "mosaic", "sidebar", "snapshot" and "timeslide" View to work the same way?

      Thanks.

      Delete
    11. I did it. I combined all the following codes to get rid of "the white box around the text" in all seven views:

      #items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
      background: #b38e00 !important;
      }
      .items.hfeed{
      background: transparent !important;
      }

      .article{
      background: #b38e00 !important;
      }

      .item{
      background: #b38e00 !important;
      }

      .flipcard .back{
      background: #b38e00 !important;
      }


      Thank you very much.

      Delete
    12. You got it figured :) Good job pfge!

      Delete
  46. One more quick question... Is it possible to change the font colour of the post preview in timeslide and in magazine? I want the preview to be the same colour as the actual post. http://fantasticalcreations.blogspot.com shows this best where I want to lighten the preview text

    ReplyDelete
    Replies
    1. You bet it is. Here, add this to your css:

      .slice p, .magazine #content{
      color: #A2C4C9 !important;
      }

      Cheers!

      Delete
  47. Hi, thanks so much for this.

    How do I remove the thin white line/borders on the sidebar view (seen here: http://glyossary.blogspot.com)?

    Also- how can I change the sidebar link colors?

    Thanks!

    ReplyDelete
    Replies
    1. Hi Marc,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .sidebar .item, .sidebar #sidebar, .sidebar .item a{
      color: white !important;
      border: 0px black !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Cheers!

      Delete
    2. Perfect, thank you!

      Is it possible to replace the standard Blogger loading image?

      One more... can I remove the "About Me" section from the right side nav?

      Delete
    3. 1) Replace loading gear: see the comment section of the following post:
      Remove Loading Gear from Blogger Dynamic View

      2) Remove About Me: Go to Dashboard - Layout - Remove the gadget from there.

      Cheers!

      Delete
  48. Hi Yogaratnam,

    Thanks for all the tips. Really helpful.

    I want to change the background of my intro post to a solid color.

    My welcome page is jedknight.blogspot.com/2012/03/welcome-to-my-blog.html

    I followed your code you posted on "YoboYOct 13, 2011 09:52 AM."

    Then,

    1. I replaced your web ID with mine -> http://jedknight.blogspot.com/2012/03/welcome-to-my-blog.html

    2. I replaced your "background: url.... !important;" with "background: #2554C7 !important;"

    Then, I clicked on 'Update' but nothing happened (?)

    I also tried going to 'Post' page in settings, checked the box for this post, and click on 'Publish'. Again, nothing happened.

    What am I doing wrong?

    Thanks. )

    ReplyDelete
    Replies
    1. That code was meant for a single view. Can't remember which one. Try this in your case:

      <b:if cond='data:blog.url == "http://jedknight.blogspot.com/2012/03/welcome-to-my-blog.html"'>
      <style>
      #items li, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
      background: #2554C7 !important;
      }

      .items.hfeed{
      background: transparent !important;
      }
      </style>
      </b:if>

      Cheers.

      Delete
  49. Hi again Yoga,

    Thanks, it works great !

    But I still have one major problem that I don't seemed to get an answer to even after hours of googling.

    --> How can I set a 'Welcome' page in Dynamic Views so that whenever I/my visitor click on the 'Home' page tab, only my 'Welcome' post will show?

    This is my site - http://jedknight.blogspot.com/2012/03/welcome-to-my-blog.html

    As you can see, I have done almost everything except the 'Welcome' home page.. :/

    Really hope you can help, or write an article about it since there's none available in the web, and get more visitors to your incredible site. :)

    ReplyDelete
  50. Hiya Yoga,

    Thanks again. It worked great.

    But now this leads to another 'problem'.

    I want to make a Welcome page in Dynamic Views. It will be the first page visitors see every time they first visit my blog.

    Welcome post -> http://jedknight.blogspot.com/2012/03/welcome-to-my-blog.html

    As you can see, I have my blog's layout all done, and even placed the 'Home' page in the 'front' (extreme left of all the tabs), but if I/my visitors first go to my blog, it will still automatically go to the 'All' tab.

    I have googled for hours and there don't seem to be any tips on this.

    How do I make a Welcome page?

    It would be great if you can help me in this, or even do an article on it. I'm sure it'll direct more visitors to your wonderful site. :)

    Thanks again.

    ReplyDelete
    Replies
    1. Hi JK,

      Due to the lack of editing tools available in Dynamic Views, I think the easiest and most practical way of setting a homepage now is by making your welcome post sticky. What you can do it, edit this post, and in your post editor, click on Published On - Set Date and Time - and choose a date set far in the future, say a date in year 2020.. That way this post will always appear first in your blog.

      Delete
  51. Hi, I have read all the thread and copied and pasted few codes in the custom CSS box but no result. i might be missing a point.
    i am simply looking for getting the white backgroung of the posts transparent! or opaque!?

    could you advise in this?

    here is my blog: matchette.net

    many thanks

    ReplyDelete
  52. Hi Matchette,

    Have you got it working yet?

    ReplyDelete
  53. Hi there

    I've been working on trying to get my posts and pages to have the same color border as the content part of the page. The border is displayed in white. No luck so far. Could you help me out?

    My blog is http://yagmkylelarson.blogspot.mx/

    Thanks

    ReplyDelete
    Replies
    1. Hi Kyle,

      Yeah, add this to your css:

      #items li, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
      background: #AC9550 !important;
      }

      Cheers!

      Delete
  54. Amazing. Simply amazing. Thanks man.

    ReplyDelete
  55. Hey! First of all... I've been using so many of your codes to personalize my page and it has been so helpful, so thanks!! You're awesome! Secondly, I'm trying to change the layout of my posts so that the polka dots are in the background, and the foreground is plain white in order to read the text easier. Here's my blog: misslorenzi.blogspot.ca. The post preview on the homepage is what I would like the actual post to look like.. but I can't figure out how to make the full post look the same way. I've been playing around with the codes with no luck. Thanks :)

    ReplyDelete
    Replies
    1. Hi miss.L,

      Add this to your CSS:

      .article.hentry{
      background: white !important;
      padding: 15px;
      }

      Is this about right? If it isn't, do get back to me. Cheers!

      Delete
    2. hi! i have the same question as this, only i don't want it to be white, but opaque. how do i do that?

      Delete
    3. Hi Jonnie,

      Where would you like this to be, and what color? Do you want it to be completely opaque or semi-transparent?

      Delete
  56. I know
    li.item{
    -moz-border-image: none;
    }

    gets rid of the border of the posts on home page, but how do you get rid of the border for other pages?

    ReplyDelete
  57. I was thinking of switching my blog to dynamic view but had the issue you explained here
    So I tried pasting the codes with the link of the picture (uploaded from imageshack) but nothing happens it still remains with the same background
    Can you help me out?

    ReplyDelete
    Replies
    1. I suppose I can. Can I have a look at the complete code that you were entering?

      Delete
    2. Thanks, this is still all new to me and I'm proably doing something stupid, sorry
      this is what I pasted in the 'add CSS section' of the blog designer

      #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://imageshack.us/photo/my-images/813/fundofont2.png) fixed !important;
      }

      .items.hfeed{
      background: transparent !important;
      }

      Delete
  58. Hi Brave Heart,

    The image URL that you have in the code (http://imageshack.us/photo/my-images/813/fundofont2.png) is not a direct image link. When you open that link in a browser, a page that contains the image loads up - which is not good. This is the direct link of your image: http://img813.imageshack.us/img813/4807/fundofont2.png

    Try this instead:

    #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://img813.imageshack.us/img813/4807/fundofont2.png) fixed !important;
    }

    .items.hfeed{
    background: transparent !important;
    }

    ReplyDelete
    Replies
    1. Oh I see, got it thanks a lot and sorry once again for the trouble.
      Still struggling a bit with changing the fonts sizes and stuff using the new dynamic view, maybe when I get some more time I'll change hehe
      nothintodohere.blogspot.com

      Delete
    2. No biggie.. Happy blogging and happy experimenting! :)

      Delete
  59. I'm using the Dynamic view but my background doesn't always load.
    http://cumbria-dog-training.blogspot.co.uk/

    How can I sort this problem out, because nobody has been able to help me so far.

    ReplyDelete
    Replies
    1. Hi Paul,

      I've replied to you in the forum:
      https://groups.google.com/a/googleproductforums.com/d/msg/blogger/-/-QfP81vGUPwJ

      Let's continue there as it'll be easier for me to escalate your issue to a Google employee.

      Delete
  60. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Markus,

      The following css should eliminate the repeating nature, and it should align your background to the right as well:

      #header .header-bar{
      background-repeat: no-repeat;
      background-position: right;
      }

      Cheers!

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
  61. Thank you very much for sharing this.
    I have been wondering where i can learn more about the different tags and elements of the css of blogger.
    i have a photo-blog which i just started. And I chose snapshot view for it. The snapshot view shows posts like tiny stick-able Polaroid photographs (which is like a white background and a pic in the middle.) I would like to change that white to black. I have successfully change the background of the post to black that can be seen when i click on the snapshot, but I can't seem to get it as black when no post is selected. I tried pasting the code you have posted here. but that works well for other views, not snapshot view. Is there a place where I can learn about the different CSS elements, so that i can key in my own customizations? or should I read the whole html for that?

    ReplyDelete
    Replies
    1. Hi Krish,

      Don't bother looking up for HTMLs, they're not gonna be that useful when it comes to Dynamic Views. If you're just starting, I'd advise you to get some developer's tool like Firebug to inspect the elements that you're trying to address. Once you've inspected them, you need to know the right CSS attribute to apply (Google them).

      To change your postcard background to black, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .snapshot .item{
      background-color: black !important;
      }

      Delete
  62. hi!

    I first background changing code doesn't seems to work on my blog! Am a newbie!

    I added the following script at Add CSS:

    #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;
    }

    I can work on the image url after that I can change the default one! Please help!!

    The background remains the same. I use the "http://img804.imageshack.us/img804/482/a5cab87e1c5144f9beca505.png" last theme what has been highlighted. Let me know if there's something else I need to change before making it to work.

    Thanks

    ReplyDelete
    Replies
    1. Hi Benny,

      Can I have a look at your dynamic views blog? What is your blog's address?

      Delete
  63. Hi Yogaratnam,

    can you have a look into my blog ?

    http://emc-storage-expert.blogspot.in/

    I want to set the background color to #333333.I have gone through the some googling and I was able to change in the post outside area(in blogger template designer background section not enabled).I want to set same color in header color as well..please help me

    ReplyDelete
    Replies
    1. Hi Anoop,

      I can't open your blog. Is the address correct?

      Delete
  64. Hi Yogartnam,
    I did a change in my address.new address is http://emcsaninfo.blogspot.in/

    I managed to edit the html and changed the color..Thank You.

    ReplyDelete
    Replies
    1. Oh, good.. Glad you got it sorted :)

      Delete
  65. First let me say you are amazingly skilled at this stuff. WOW. I am loving how much better my blog looks. You are so talented!
    (I started making changes to my blog last night--with your help--and I am LOVING it!) Thank you for all your help.

    I have been tweaking for the last 15 hours or so and I think I must have messed something up. In the magazine view the posts look fine. However in the flip-card view, some of the older posts have a grayed out background and are unreadable.

    Any thoughts about what I may have done wrong?

    blog address: LivingwithJMTandGdog.blogspot.com

    Here is the code from my template add CSS

    #Mosaic.ss, #views ul li:nth-child(4),
    #Snapsnot.ss, #views ul li:nth-child(6),
    #Timeslide.ss, #views ul li:nth-child(7)
    {
    display: none !important;
    }
    #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://1.bp.blogspot.com/-Modu-YNPtF8/T87S7BHE78I/AAAAAAAABUQ/yzXnvYYoNQc/s1600/yellow+background.jpg') fixed !important;
    }

    .comments-header h3{
    font-size: 0px;
    }
    .comments-header h3:before{
    content: "Tell me what you think!";
    font-size: 14px;
    }
    .items.hfeed{
    background: transparent !important;
    }

    .snapshot .item.comments .title {
    left: 5px;
    right: 5px;
    font-size: 14px;
    text-wrap: normal !important;
    white-space: normal !important;
    overflow: visible !important;
    }

    .snapshot #content .item h3.title{
    bottom: 5px;
    height: auto;
    }

    .snapshot .item .comments-count {
    bottom: 220px;
    }

    hh

    1
    2
    3
    4
    5
    6
    7
    8
    #ssnoshadow img{
    padding: none !important;
    border: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    ReplyDelete
    Replies
    1. Hi Jennifer,

      Your blog looks very pretty and colorful now, good job! As for your CSS code, I don't see anything wrong with it, except that you can remove this redundant part:

      hh

      1
      2
      3
      4
      5
      6
      7
      8

      To be honest, I couldn't find the older posts that you were referring to. Mind linking me some of these posts so that I can take a look?

      Delete
    2. Here is one:
      http://livingwithjmtandgdog.blogspot.com/2011/06/safety-first.html

      It is when I click from the "flip card" view, to anything older than about 2 months.

      Delete
    3. This is what I'm seeing:
      http://i.imgur.com/jfVtE.jpg

      If you're seeing something different, try clearing your browser's cache/cookies, or see if it looks the same in another browser.. If you're still seeing something different from what I'm seeing, could you send me a screenshot of what you're seeing?

      Delete
  66. This is what I am seeing

    http://3.bp.blogspot.com/-W9AD51CmUM0/T9DjSSkHb8I/AAAAAAAABYE/D8jsLLZkwXE/s1600/blog%2Bproblem.png

    (BTW I never knew how to do that before reading your blog!)

    Also--why is my blog post not centered? Any thoughts on how to figure out how I did that? :)

    ReplyDelete
    Replies
    1. That isn't right.. I don't think this is a problem with your blog, rather something looks off with your browser.

      1) Have you tried clearing your browser's cache/cookies?
      2) Have you tried using a different browser?

      As for the posts, do you want to center-align them? Note that all the posts in your blog will be center-aligned if you wanna apply the CSS method. Your newer posts are justified now, so applying a center-align CSS rule will ruin them all. Or were you referring to something else when you said your blog post is not centered?

      Delete
    2. I had a gander as well (curiosity) and I see the problem... and on some posts the background is only on half of them while the grey part is the top half.

      Also, on magazine view, the home view is right aligned for some reason, rather than the magazine being central

      Delete
    3. Thanks Hannah.. I can see the problem in Chrome now.. It looks fine in Firefox.. I'll try to track down what's causing this, and see if I can come up with a fix..

      Delete
    4. @Jennifer: Could you get in touch with me in private via email please? I'm trying to simulate your issue but to no avail. I need some info from you that might help me to re-create your issue.. Only then I can work on finding a fix.. My email: yoboy7[at]gmail[dot]com

      Delete
  67. Where do you paste this code? and do you need to delete anything. Thanks :)

    ReplyDelete
    Replies
    1. Hi Insatiable Donut,

      The instruction is under Step 2 (on where you should place the code), and nope, you don't have to delete anything :)

      Delete
  68. Hi there,

    Thanks for this tutorial, it ALMOST works for me, but I've got one problem: the transparant image I use, seems to double on the place where the text is...

    To be more clear, take a look at my post: http://dikkethomas.blogspot.nl/

    I would like do not have the image doubled where the text is... Just the whole thing as it is outside the text. And I would like to remove the outerline of the postbox as wel. Could you help me out? Thanks in advance!

    Cheers.

    ReplyDelete
    Replies
    1. Hi Dikke,

      I assume you're referring to your header bar? The only way to solve this is by setting your header bar to an opaque color, instead of transparent. To assign a color to your header bar, go to Template Designer - Advanced - Header Bar - Background Color.

      As for the border around your post box, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .classic li.item{
      border: 0px !important;
      }

      Cheers :)

      Delete
  69. Love this... it works great! 2 questions...

    Question 1: I changed my content background to black but now I can't see the text because it's also black. How do I change the text color so it'll show up on a black background?

    Question 2: The main background image shows up in my header too. I think I just want the header to be a solid color or opaque. Can this be done?

    See here on my test blog: http://crashtestgky.blogspot.com/

    ReplyDelete
    Replies
    1. Hi SM,

      1) Use this CSS:

      .magazine .story{
      color: white !important;
      }

      2) Yes there's a way. Use this instead (remove the one you currently have):

      body, .viewitem-inner{
      background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;
      }

      Cheers :)

      Delete
  70. Hello,

    My blog address is www.dhirajkhatri.blogspot.com.
    I want to change the post background to black. I tried your codes, but could not get the result. Can you please help me?

    Is there any specific reason why Google has not added this fucntion in the blog itself. This feature is available for other templates but not for Dynamic view. Why?

    ReplyDelete
    Replies
    1. Hi Diraj,

      My code does work on Dynamic View templates. But you're not using a Dynamic View template - you're using Picture Window. Or did you give me the wrong blog?

      Delete
  71. Hello Yoga,

    I used it in Dynamic Views only. I added the code to CCS, but nothing happened. Then I changed back to the current version without applying the changes to blog.

    I am assuming that the change done due to the code will be visible in the preview window also, before applying to the blog.
    The blog address is correct. Let me know, if I need to again switch back to Dynamic views.

    Let me know, if I am doing anything wrongly.

    Can you also answer me the last part of query....why is this feature not available by-default?

    Thank you,

    ReplyDelete
    Replies
    1. It must be an inconvenience to leave your blog in a template that you're not comfortable with, just for troubleshooting purposes. I've got a better idea. Why don't you create a new dummy blog, and gimme the link of the blog? Set that blog's template to Dynamic Views, and do all the customizations there. I'll help you out with your background problem once I have the link. The customization is easily transferable. When you're happy with what you're seeing, you could just copy and paste your custom CSS to your actual blog.

      As for why it is not available by default, what I could tell you is that Google doesn't want users to heavily modify the DV templates. The reason is because they're afraid users might break the template. DV templates run heavily on scripts, and updates are constantly (and not-so-transparently) being rolled out every now and then. I suppose CSS customisation couldn't hurt, but hey, I think Google is just being paranoid..

      Delete
  72. Hello Yoga,

    Now I got some of the changes using your codes mentioned above in the chain. Actually, unless I apply it to the blog, and see the blog, it is not visible in the pre-view...strangely.

    Now, I need your help to (blog address : www.dhirajkhatri.blogspot.com):

    1) Remove the white box on the top right corner of the blog. I do not know, from where is appeared.

    2) How to change the color around the post. Currently it is black, I want it grey and the post back-ground as black. For the time being, I have reversed it as I was not able to change the black color of the post.

    But along with that, there are some texts written in black at the end of each post. How to change the color of these texts?

    3) I want all the labels visble on right and "about me" on left. In previous options, I was easily able to do it, but not in dynamic view:-(.

    4) I am also not able to see the total page views, which was visible previously.

    5) I want only the heading or some selected text to be visible on the main page of each blog. Currently, all my written text of each posts have accumulated and appearing as a paragrah on the main page, which is not appealing.

    You suggestions have been really useful, thank you so much for that.

    ReplyDelete
    Replies
    1. Hi Diraj,

      It'll be quicker for me to attend to you if we address one issue at a time. But I'll see to the 5 issues that you've listed above this time.

      1) The only white box I can see on top right corner of your blog is your search bar. To remove it, add this to your CSS:
      #search{
      display: none !important;
      }

      2) Gonna need more context. Are you referring to your post pages (the page that pops up when you click on your post), or the front page of your Magazine view? In any case, I can only see a dark grey background for now, and I don't see anything black unless if I hover over your post. Is this what you were referring to? If you want it grey and post background as black, try this:

      #content .item{
      background: black !important;
      }

      3) Not following. Are you referring to the links in your header bar or something? If yes, go to Dashboard - Pages - New Page - Web Address - and add the link of your labels, one at a time. It should appear in your header bar when you've added them right.

      4) We can't compare Dynamic View templates with the standard templates. Lots of things are possible in standard templates, but not in DV. But DV sure is pretty, and elegant.. See this for an alternative:
      http://www.southernspeakers.net/2012/06/adding-statcounter-in-blogger-dynamic.html

      5) I'm afraid it isn't possible. This behavior is controlled by scripts hosted at Blogger, and we don't have access to it. We could disable the text summary from showing though, but it's only gonna leave big gaps behind, if you know what I mean.

      Delete
    2. Hello Yoga,

      Thank you so much for your kind support. This has really been useful. My blog looks much better now.

      Regarding the point number 2. Actually, when we click on particular post, the back-ground of post is black (which I am not able to change), however I am able to change the text background using your codes (which I have kept grey currently).

      Regarding point number 3, if you see my blog, on the right hand side, if you move your mouse, labels will appear. I want them to be permanently visible. Not sure, if this is possible.

      Sincerely apologies for posting multiple queries. I thought, multiple queries will reduce the number of communication exchange.

      Thank again.

      regards,
      Dhiraj

      Delete
    3. Hi Dhiraj,

      2) I'm still confused on which background you're trying to change. This is what I'm seeing:
      http://img21.imageshack.us/img21/7904/97796954.png

      I couldn't see any black background at all. What am I missing? Let's speed things up. Gimme an annotated screenshot of what you're seeing, and what you want changed (eg: A little arrow on a particular background and the color that you'd like to change it to).

      3) I think you're referring to your gadget dock. You'll find what you're looking for in the following link:
      http://www.southernspeakers.net/2012/04/force-gadgets-to-stay-unhidden-in.html

      Cheers :)

      Delete
  73. Thanks,it works!I always thought it can't be modify.

    my blog:

    http://artslava.blogspot.com
    http://gsteinmusic.blogspot.com
    http://mr-freeware.blogspot.com
    http://grevid.blogspot.com

    ReplyDelete
  74. Hello Yoga,

    Thanks for your kind support.

    It seems, the website looks different on my PC. May be due to the browser. Let us leave it for the time being.

    Thank you again.

    regards,
    Dhiraj

    ReplyDelete
  75. Hi, rookie here needing help. I've input my header but the background image for the main blog is still feeding through into the header - which isn't what I want. I just wanted to have my header in here (and a colour seeing as my header currently isn't long enough to stretch). Any help much appreciated. http://www.fblockblog.co.uk/

    ReplyDelete
    Replies
    1. Hi CW,

      We can change the background's background to black. Find this line in your CSS:

      background: url(https://lh4.googleusercontent.com/-n53n3nB_I6U/T_gq9OgPtWI/AAAAAAAACGk/4ov-VRjBw0c/s1600/fbbyellow3.png)
      no-repeat center;

      And change it to:

      background: black url(https://lh4.googleusercontent.com/-n53n3nB_I6U/T_gq9OgPtWI/AAAAAAAACGk/4ov-VRjBw0c/s1600/fbbyellow3.png)
      no-repeat center !important;

      Cheers :)

      Delete
  76. It is helpful! Still i haven't found proper background color, it's quite difficult...
    Anyway thank you for your infotmation

    ReplyDelete
  77. Is there any way to make the content background transparent with those colors? For example white transparent, black transparent....
    I noticed in your code there is "background: transparent", but I don't know the function of it.

    ReplyDelete
    Replies
    1. 'Transparent' is a color that CSS recognises, and it is mutually exclusive with other colors like black or white. You can't use a combination of two in a line, but you can use a combination of a color and an image url in a line.. as in:
      background: white url(like_to_a_transparent_image.jpg)

      What exactly are you trying to do? Perhaps I'll be a better help if I have more context..

      Delete
    2. Thank for you reply.

      I'm sorry I used the wrong words last time. It's dark transparent, and light transparent (not black and white).

      What I'm trying to do is to have a content background like "Transparent light" or "Transparent black" of navbar, or the drop down menu in Timeslide - Dynamic View. You can see the page background through that drop down menu. That's the kind of transparent I tried to explain in the previous comment.

      The good news is that I found a fine content background for my blog. It fits well with 6 dynamic style but sidebar. When I switch to sidebar, there is still half white background. The content background doesn't stretch out to whole page...Could you help me with that, please?

      Thanks a lot!

      Delete
    3. Hi Anon,

      What's your blog's address? And where exactly do you want this background to be?

      Delete
  78. http://ml-englishlibrary.blogspot.com/

    I'm using Timeslide. So please choose Sidebar, you'll see the background of the post (wooden background).

    Btw, I like the font of your post, can I know what it is?

    Thanks a lot!

    ReplyDelete
    Replies
    1. Hi Anon,

      Try this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      body{
      background: url("http://www.photoshopstar.com/wp-content/uploads/2008/05/wood-texture.jpg") !important;
      }

      This should fill up the white space in Sidebar view with your wooden background. Do check your other views to make sure everything is fine.

      My font.. Ahh, to be honest, I've got not clue! Hang on, let me check for you what my default font is....... Its 'Trebuchet MS'.. Hope it helps :)

      Cheers!

      Delete
    2. Hi Yoga,

      Your code is about setting background for the body of the page. If the background of the body and the content are the same, it will bring the feeling that the content background is fill up in Sidebar view, but actually it doesn't. Because when I tried it on, the background body in Timeslide and other views are also replaced by that wooden picture.

      But thanks to your code, I figured out that the length of the wooden background in Sidebar view in fact depends on the length of the post. So if the post is short, it's also short and cannot cover the whole page.

      And to get rid of that white space, I replaced the wooden url to the one in HTML code of my Dynamic template, and it works perfectly. You can come back to my blog and check it out. My English is poor, so I cannot express all what I mean.

      Thanks for the font too :D

      I appreciate your help!

      Have a great day!

      Delete
    3. Oops.. I'm sorry it didn't quite work out the way you were looking for, and glad you manage to find an alternative. But if you're still interested, I know a way to apply the background to the Body of Sidebar view only, which means other views will not be affected.. Here, try this:

      body.sidebar{
      background: url("http://www.photoshopstar.com/wp-content/uploads/2008/05/wood-texture.jpg") !important;
      }

      Cheers :)

      Delete
    4. That's amazing! Thanks a bunch! :D

      Delete
  79. Is there any way to make the posts' background transparent for views other than Timeslide?
    karanbattu.blogspot.com

    ReplyDelete
    Replies
    1. Hi there,

      This CSS should make all post background transparent.. Here:

      #items li, .article, .overview-wrap, .overview-inner, #content, .item.hentry.selected, .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content {
      background: transparent !important;
      }

      Cheers :)

      Delete
  80. How do you change the outer background(the hearts picture you've used in the test blog)?

    Is it possible to create a background picture of a certain size so it tiles one above the other and scrolls down with the posts?

    Many thanks!

    ReplyDelete
    Replies
    1. Hi Rosie,

      That can be easily done by going to the Background tab in Template Designer. Upload your picture there, and by default, it should tile-up just like you've asked for. It won't scroll down with the posts though, except if you do the following. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      body{
      background-attachment:fixed;
      }

      Let me know how it goes. Cheers :)

      Delete
  81. Hello, i have hard time working with issue below and i really wished you could help me out!:

    1) how to get that background image full screened?
    2) is it possible if I wished to get that pages border part completely transparent like without shadow or anything whatsoever?

    you can get the idea by looking here: www.mallorylee.com
    really appreciate for the reply, keep going =)

    ReplyDelete
    Replies
    1. Hi Mallory,

      1) The image that you're using now is 864px x 611px, which is pretty small to be a background.. If you can't get your hands on a higher-resolution of the image, the only option you have left is to tile-repeat the background to cover the entirety of your blog space.. You can do so by adding the following code in your 'Add CSS' box in Template Designer - Advanced:

      body{
      background: url(http://4.bp.blogspot.com/-gvFIZz-8OrE/UD1pRd7_FtI/AAAAAAAAB_8/Fl5vv6vWkCE/s1600/38.png) repeat !important;
      }

      2) This should remove the shadows:

      #header .header-drawer, .ss, #header .header-bar{
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Cheers :)

      Delete
  82. Hi Yoga,

    i add the background but in flipcard view, when i click on the comments, my background become transparent ? I really don't understand why ?
    Here's an example : http://www.lespetitsbruits.fr/2012/10/marvin-gaye-whats-going-on-kan-sano.html
    I use Chrome.

    And when i click on previous article (line 4 or 5 or more) in the the of flipcars, the background of the article become transparent.

    Do you know how to fix that ?

    Sorry for my english, hope you'll understand.

    Thanks for you help.
    Thomas
    http://lespetitsbruits.fr

    ReplyDelete
    Replies
    1. Hi Thomas,

      The background definition is still intact, but somehow another definition is overriding it. And I can't quite put my finger on which element is causing this. Could you try to publish a post without the soundcloud music player, and see if your background is still disappearing?

      Also, I've noticed that your 'Add CSS' box has lots and lots (and lots and lots and lots) of repeating elements.. I'm not sure how it got there, but the same set of code is repeating itself like dozens of times. This isn't good at all. First of all, your blog's load speed is gonna take a serious hit. Next, it could cause to conflicting CSS definition. Make sure the codes arent' repeating..

      Delete
    2. Hi Yoga,

      i fixed the problem with the repeating elements.
      And you're right, a post without the soundcloud widget has no problem. Do you have any idea to fix this problem when i add the soundcloud widget in a post.

      Thank you so much.
      Thomas
      http://www.lespetitsbruits.fr

      Delete
    3. Have you got your transparent problem fixed as well?

      As for adding the widget, it's hard to say.. The DV templates are running from scripts, unlike conventional templates that run from HTML (mostly).. That is why we can expect script conflict when you insert a script into a script.. If you could find an HTML alternative for soundcloud, you'll be good to go..

      Delete
  83. Hi, I stumbled upon on your page where you help people with their Blogger blogs, could you help with mine as well? My blog is primummovens.blogspot.com, I just started it, I will be writing some random thoughts and describe my hiking and bicycling travels. I need an inspiration though, I couldn't find a list of dynamic view blogs anywhere so I looked at the blogs from people that commented on your page, and I guess a couple of them I did like in concept, like
    http://yagmkylelarson.blogspot.com/
    http://glyossary.blogspot.com/

    Some ideas? Thanks in advance, Miroslav

    ReplyDelete
    Replies
    1. Hi Miroslav,

      That's the thing with Dynamic Views.. By default, all DV templates look the same. But there are lots of customisation options that you can apply to make your template look unique.. I've posted a bunch of tutorial in this site as well. Use it as you wish. If you have some particular tweak in mind and you're not sure how to do it, let me know and I'll see if I can help.

      In any case, you're gonna have to customize your template from scratch.. Do things one at a time..

      Cheers :)

      Delete
    2. Ok thanks. Is there a list of (popular) blogs using dynamic view anywhere?

      Delete
    3. Sorry for the late reply. I can't think of a place that might have a list of DV blogs. But if you could head over to Blogger Help Forum, kindly start a thread under 'The Coffee Shop' asking ppl to share their Dynamic View blogs. You might generate a list yourself :)

      Delete
  84. Well, I've compiled a list of things I would like to do on my blog, primummovens.blogspot.com. Can we do it one by one?

    1.HOW TO SET A PICTURE IN THE HEADER COVERING THE ENTIRE PAGE'S WIDTH (NO MATTER THE RESOLUTION OFCOURSE)? WHAT LENGTH SHOULD THAT PICTURE BE? CAN IT BE OF ANY HEIGHT? I WOULD ALSO HAVE IT SERVE AS A LINK TO THE HOMEPAGE.

    ReplyDelete
    Replies
    1. The header that you're gonna add is gonna be of finite length. Your blog is gonna have a different width on different screen size, so you gotta compromise and fix the width of your header. And this is how you add one:

      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      And this is how you can make the entire header clickable:

      http://www.southernspeakers.net/2012/06/use-entire-header-as-home-button-in.html

      Tips: There are quite some dynamic view tutorials in this blog.. You might find the search function at the top of this page useful if you're looking for something in particularly.

      Cheers :)

      Delete
  85. Ok, I will get on to it, and let you know when I finish. A few things:
    1. I presume I can left align the header?
    2. What is the default header height in Dynamic view, how many pixels? So that I can estimate the proportions of my picture.

    ReplyDelete
  86. Thanks. I will get on to it. I need just one more info:

    -what is the default height of the header? So that I know how to measure my own. I presume I can make a bit larger one then the default height?

    ReplyDelete
    Replies
    1. In Line 25 of the header code, you should see a tag that says 'center'. Change it to 'left' if you want to left-align your header.

      And the default height is 65px.

      Delete
  87. Thanks Yoga, hear you when I finish this.

    ReplyDelete
  88. I am almost done with the header, and one thing is bugging me in the meanwhile. If you take a look at e.g. this post

    http://primummovens.blogspot.com/2012/10/biciklijada-vis-bisevo.html

    you can see that the photos don't align well with text. Actually it seems that is the proper alignment, but I dislike it. What I would like is that the upper edge of the photo aligns with the paragraph, not be underneath it, and I would also like to move the caption closer to the photo. Is that possible?

    And second, when I click on a photo it just opens it in the same tab overlaying the blog, so I need to go back in the browser to return to the blog. I have the lightbox option turned on, but it doesn't work. Is it possible to turn it on, so that, if the post contains say 7 photos, it would be possible to scroll through them? Photos are from a Picasa album.

    And third, I would like to connect the whole Picasa album to the post, but I don't like just pasting a link to it. Is this perhaps possible via lightbox or something similiar?

    Thanks

    ReplyDelete
    Replies
    1. 1) Try this:

      .article-content tbody img{
      vertical-align: text-top !important;
      position: relative !important;
      top: -16px !important;
      }
      .article-content .tr-caption span{
      position: relative !important;
      top: -20px !important;
      }
      .article-content div table.tr-caption-container{
      margin-bottom: -15px !important;
      }

      2) Lightbox is not supported in Dynamic View for now. I'm afraid the current way is the only option we have for now.

      3) I'm not sure if Picasa offers embed code for albums.. But if you could find such code, you could paste the code in your post's HTML section. Try asking the Picasa Help Forum to see if such code exists.

      Delete
  89. 1. Much MUCH better! Thanks!

    2. So I read after I posted my question, sorry about it... Is it in theory possible to bypass it with 3rd party solutions?

    3. I will. Thanks again. I'm off to make the header.

    ReplyDelete
    Replies
    1. 2) Well, that's where the problem lies. Pretty sure you can find lots of third party scripts that offer alternative solutions - but most scripts don't work in Dynamic View templates as they clash with the templates' native scripts..

      Cheers..

      Delete
  90. Hi,
    Your blog is really helpful!
    Thanks so much for your afford!

    But here is a question when i am applying the code of making a background in the sidebar view.

    Though a outer background is successfully placed, the height of the background picture changes according to the length of the posts.

    What I would like to do is to make it fixed, no matter how long the post is, the background is fixed and will not scroll around.

    May you please tell me how can i do that?

    Thanks so much!!!

    ReplyDelete
    Replies
    1. Hi Zoelau,

      Can I have a look at this page you're referring to? It'd be easier if I could just use your page to work on..

      Cheers..

      Delete
  91. I did something with the header, could you take a look?

    http://primummovens.blogspot.com/

    I will improve the header somewhat, but this is a test. So now:
    1. How do I remove the blog's title? The hyperlink needs to disappear. It doesn't allow me to leave the field blank.
    2. How do I squeeze the header to fit nicely, without the white spaces above and below?

    ReplyDelete
    Replies
    1. 1) To remove your title, see the following link, under Extras, item #2.

      2) Find for this line in your 'Add CSS' box:

      background: url(http://3.bp.blogspot.com/-ax1eqItCVpg/UJkQZ7mB36I/AAAAAAAANzM/37QGleRgUOs/s1600/Look_For_Hope_by_aslak_b+copy+130.jpg)

      And change it to:

      background: black url(http://3.bp.blogspot.com/-ax1eqItCVpg/UJkQZ7mB36I/AAAAAAAANzM/37QGleRgUOs/s1600/Look_For_Hope_by_aslak_b+copy+130.jpg)

      Cheers..

      Delete
  92. I don't understand 1) Extras, item #2?

    Thanks

    ReplyDelete
    Replies
    1. Sorry. Forgot to include the link:

      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      Check out the section titled 'Extras', item number 2.

      Delete
  93. Nice. And fitting the header image? There is too much space above and below it.

    ReplyDelete
    Replies
    1. Sorry for the late reply. Use this code instead for your header (remove the current one):


      #header .header-drawer.sticky, #header .header-drawer {
      top: 99px;
      }
      #header .header-bar{
      height: 130px;
      }
      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 130px;
      }
      #header-container {
      height: 170px;
      }
      .viewitem-panel .viewitem-inner {
      top: 650px;
      padding-bottom: 85px !important;
      height: auto !important;
      }
      #header-container #header.header .header-bar span.title{
      background: black url(http://3.bp.blogspot.com/-ax1eqItCVpg/UJkQZ7mB36I/AAAAAAAANzM/37QGleRgUOs/s1600/Look_For_Hope_by_aslak_b+copy+130.jpg)
      no-repeat left;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 130px;
      }

      Delete
  94. I'm done with the header, although I can't get it to be nearly as crisp as when I view it in Photoshop. I don't know what I'm doing wrong there. If you have an idea, great, if not, ok.

    Let's move on:
    1.Can I change the color of the menu bar to something gradient like? Or, can I place a picture on top of it? Or is all I can do just change it's color in template designer?
    2.I would like the menu bar to contain the following links:
    HOME ABOUT ME LINKS
    I don't need the different views option, I would like to remove that, just leave Sidebar.

    ReplyDelete
    Replies
    1. 1) You can change its color, or use an image instead of a color, or you could use a picture menu:
      http://www.southernspeakers.net/2011/12/blogger-dynamic-view-picture-menu.html

      2) See this:
      http://www.southernspeakers.net/2011/09/disable-certain-dynamic-views-in.html

      Cheers.

      Delete
  95. Thanks so much.

    Now I would like to do the following: right of the blog title, with some space between, I would like to place a few links. The links I want to place will be as following:



    Like option
    +1 option
    Tweet option

    Google+ Icon should lead to my Google profile, Facebook to my facebook profile.
    E-mail Icon should open an option to subscribe by e-mail.
    +1 option can work just the same as underneath the posts, as well as tweet, but I would like the facebook like option to open a field where one can add a comment if he chooses to.

    ReplyDelete
    Replies
    1. It is not possible to add links to the side of your post title in Dynamic Views, since we do not have access to the template's scripts (the HTML part is virtually nothing)..

      Cheers..

      Delete
  96. It seems to me that Google just gave out dynamic views out as it is, with very few options to make something of it. For someone who is all-google, I find this really disappointing. I liked the sidebar most of all; I hate when I need to scroll indefinitely, and I don't find the archive a proper substitute. I guess I will just need to find another, more open option.

    ReplyDelete
    Replies
    1. Seconded. And it doesn't look like Blogger is planning to make any significant improvement to DV templates in the near future.

      Delete
  97. Then I will revert back to the old style. I know nothing about HTML though. Is it possible, in principle, to create a page from scratch to use as a blog, and if yes, I presume you need to follow some rules to be able to post, comment etc. I noticed that templates are all non-editable, so that doesn't really help much. Is there perhaps some list of blogspot blogs rated, so that I can browse through it and find interesting designs? What would you propose?

    ReplyDelete
    Replies
    1. Yes it is possible to create a blog from scratch - granted that you have the skills it takes. IMO, it'll be much easier to just use one of the pre-made templates. There are two types of templates - Dynamic View and the xml ones. The XML ones are customisable as it runs from HTML that you have access to (Dashboard - Edit HTML).. There are two types of xml templates - those that are recommended by Blogger, and the third party ones. Most tweaks and mods online are based on the Blogger recommended ones, so you might wanna start of with this. You can find these templates under Dashboard - Templates - 2nd row onwards (Simple, Awesome Inc, etc).. As for the third party templates, just Google 'Blogger Templates' and you'll come across lots of results. IMO, the third party templates are fancier, but there aren't much tweaks written specifically for them (as there are thousands of third party templates online).

      Cheers..

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.