Southern Listeners

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

Monday, August 6, 2012

Semi-transparent Post Background in Blogger Dynamic View

Before
After
Several months ago, I've shared a set of code that allows you to customize your Dynamic View posts' background. The tweak was written in a generic note, which allows the code to be changed to fit users' different background preferences.. However, if you're looking for ways to change Dynamic View default post backgrounds to a semi-transparent background, the previous post isn't gonna help much - thus the reason for this week's post. To put simply, this week's tutorial allows you to transform your default post background (plain ol' white) to a slightly transparent version of itself - letting your beautiful background to be seen through your posts. This is a respond to blog reader (and a friend) Bob Kansas.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code towards the bottom of your 'Add CSS' box --> Press enter after the last character of the last line } --> Apply to Blog.
.sidebar .item{
background: #E4E4E4 !important;
}
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
}
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
}
#overview .overview-backdrop{
opacity: 0 !important;
}
Note: If you have existing CSS codes in your 'Add CSS' box, it is very important that the newer code goes towards the bottom of your 'Add CSS' box, not top.. Your CSS code needs to be in a chronological order to avoid accidental over-riding, from top to bottom..

Extra: Fix for Sidebar View

Sidebar view, by default, does not have a background. In other words, making your posts transparent isn't gonna show you anything, as there is no background defined underneath your posts.

Step 1:

To fix this, first, find out the direct link for your background image. This can be done by right-clicking on an empty space using Classic Dynamic View, and choose 'View Background Image', using Firefox web browser.


Step 2:

You will now see your background opened in its direct link. Copy the address that you see in your address bar. This is what I've gotten for mine:
http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP


Step 3:

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code towards the bottom of your 'Add CSS' box..
body.sidebar, #sidebar .items{
background: url('http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP') fixed center top !important;
}

Step 4:

Change the address in Line 2 above to the address that you've gotten from Step 2. Hit on 'Apply to Blog' once you're done.

184 comments:

  1. Thanks Yoboy! Works great in Classic view but in the Sidebar view the sidebar is semitransparent but the post is not. Did I do something wrong? See kansasbob.com if you want to test out (Content on menu bar = sidebar view).

    Have a great week my friend!

    ReplyDelete
    Replies
    1. Hi Bob,

      I've updated the main code above, particularly on Line 7.. Give it whirl and let me know how it goes :)

      Cheers!

      Delete
    2. Thanks for the help Yoboy! I should have known to add to the bottom of the CSS. Works great now!

      Delete
    3. Awesome Bob! Thanks for the feedback! :)

      Delete
  2. Hi,

    It is a beautiful code.

    I have one problem... In the main page, the post's background is semitransparent and it looks nice .. when I hover mouse on a post on main page, it becomes opaque, which is helpful ,, but when I click on any post on main page to read the whole content, the semitransparency is creating problem in viewing as the text of main page is obstructing in viewing text of the particular post ... It would be better if the post background is opaque when clicked to view the full post ...any work around ?

    Thanks.

    ReplyDelete
    Replies
    1. Hi Cosmic Raga,

      That is totally understandable.. Here, use this set of main code instead:

      .sidebar .item{
      background: #E4E4E4 !important;
      }
      #items.items li.item, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
      background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
      }
      .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
      background: transparent !important;
      }

      Let me know if something's amiss :)

      Delete
    2. Hi Yoga!
      Awesome blog for bloggers :-D
      The magazine fix above was great, thanks for that.
      I am wondering, however, if it would be possible to "hide" the magazine div when the post is open over it... or would that require javascript to achieve?

      Thanks again!
      -Bjorn

      Delete
    3. Hi -Bjorn,

      What do you mean by magazine div? If you're referring to your magazine view's post summaries once a post page is open, it might be possible, but you're gonna have to insert a code to each one of your posts. Go edit your posts (one at a time) - in the post editor, switch to HTML mode (as opposed to Compose mode) - Copy and paste the following towards the bottom of your post, and hit Update/Publish.

      <style>
      .magazine #content{
      display: none !important;
      }
      </style>

      Cheers! :)

      Delete
    4. Wow man, that was EXACTLY what I was looking for!

      Now the dynamic magazine layout disappears when I open a post, showing only the background image through the transparent blog post window.

      Thanks! :-D

      Delete
    5. I have the same issue with the Timeslide view Yoboy. I tried the code above substituting .timeslide for .magazine but it did not seem to work.

      Wondering if I did it right. Also thinking that a more opaque white post background might work.

      What do you think? Thanks much!

      Delete
    6. Hi Bob,

      Use this instead:

      <style>
      .timeslide #main{
      display: none !important;
      }
      </style>

      Cheers :)

      Delete
    7. Thanks Yoga! It worked! I added it to the end of my post template.

      Delete
    8. Hey Yoga, your posts have been very helpful to me. Thankyou!

      But is there any way that the following code that you provided Stine be applied to all pages without doing it individually post per post?

      < s tyle >
      .magazine #content{
      display: none !important;
      }
      "

      Delete
    9. Hi Anthony,

      I'm not gonna lie. We might be able to inject the code to all pages using javascript. But since I'm not that well-versed in Java, it's gonna take a lonnnnng time for me to figure out a way.. Honestly, the amount of effort that you'd have to put into this (since it involves Dynamic View) is ridiculously a lot, that it outweighs the benefit of having a script in the first place..

      It is just much easier to insert the HTML above to your posts until an easier method becomes available.

      Cheers :)

      Delete
  3. Hi Yoboy, this blog has been a great help on my dynamic views battle, hehe.

    I have a cry for help, actually two, I´ve been searching the internet and no luck so far. :/

    Do you know how to adjust the height of the custom pages of a menu? (see my blog please, ludedesign.blogspot.com, if you click "about me" or "links", the page title is partially covered by the menu bar. :/, do you know how to adjust the page so it sits lower and the title is visible?

    The other question is about the page background color, I would like to change the menu pages to the same blog background, but again, no luck in finding how to do so.

    Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Lude,

      It appears that the value in your header code aren't matching with each other.. This is what you should have.. Adjust the values (all of them) accordingly:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 97px;
      }
      #header .header-bar{
      height: 128px;
      }
      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 128px;
      }
      #header-container {
      height: 168px;
      }
      .viewitem-panel .viewitem-inner {
      top: 63px;
      padding-bottom: 83px !important;
      height: auto !important;
      }
      #header-container #header.header .header-bar span.title{
      background: url(http://img266.imageshack.us/img266/8875/headerdynamicviews.jpg)
      no-repeat center;
      margin-left: none !important;
      margin-right: none !important;
      height: 128px;
      }

      As for the background in your pages, it looks similar to the one set in your homepage, probably the same.. I'm referring to the darkish grey color of your blog's background, that's what I'm seeing in your pages menu as well.. What am I missing?

      Delete
  4. Hi Yoga,

    I uploaded a background image to my Blogger blog, and selected the center feature. Though I manually need to move the background image like 5 pixels to the left so it can align perfectly with my header (the header and background image are custom made and when aligned together correctly, they form a full image). Is there a CSS code which I can use to alter the positioning of my background image? Thanks!

    ReplyDelete
  5. Hi Josh,

    Instead of suggesting some codes to you that I have not tried myself before, I think it is best if I could have a look at your blog and come up with a working solution. What's your blog's address?

    ReplyDelete
  6. Hey Yoboy,

    I'm wondering if I can just hire you to fix my blog? I just want to make it a bit more functional. Add a few tabs, stuff like that. I went to your "ask a question tab" - couldn't figure that link out.

    ReplyDelete
    Replies
    1. 'Hire' is too big of a word for me. I'd just help you voluntarily, as long as I can take my own time to reply you. Get in touch with me via email, by going to My Google+ Page - click on 'Send Yogaratnam N. an email'...

      Cheers :)

      Delete
    2. Been trying to send you an email. When I click on "send Yogaratnam N. an email" nothing happens. I think I'm just struggling with blogger/google in general. I can't open anything by clicking on it, instead I have to right click and then open in a new tab... bah! I don't know if you are able to send me an email? Just proof I need your help with such simple things.

      Delete
    3. Sounds to me like your entire browser might be falling apart.. Tell you what, dump whatever browser you're using right now, and get either Firefox or Chrome (whichever isn't your current browser). Try the things that you've failed before.. If you still need help, holla at me at yoboy7@gmail.com

      Cheers!

      Delete
  7. Hello friend I need your help , I have a just change new theme and it not showing total visitor from beggning so how to add stat in new theme
    See once http://www.samjhanakophool.blogspot.com
    if i try to add again then it shows already added please help

    ReplyDelete
    Replies
    1. It seems to me like you have a whole sidebar on your left that has been hidden, and your stat gadget is placed in this gadget. You need to temporarily make this left sidebar visible again, and remove/reposition your stat gadget. Once you're done, you can make your left-sidebar hidden again.

      To make your left-sidebar visible, add this to your CSS. And to make it hidden again, simply remove the code:

      #lsidebar-wrapper {
      display: block !important;
      float: left !important;
      }

      Cheers..

      Delete
    2. Thank you a lot dear friend , you only one who have a knowledge of all

      Delete
  8. Hi! Love the website, but I'm having some trouble with my static pages. I know that I can't play around with the header, but my background isn't working. Here is one of the two pages I'm struggling with, http://www.legallynorthofbabylon.com/p/about.html

    Please help!

    ReplyDelete
    Replies
    1. Hi Jason,

      Have you set a background for your blog by going to Dashboard - Template - Customize - Background?

      Delete
  9. Hey :) How do i remove the borders and background for my sidebar images? the css code you gave me before only removed the background and borders from my posts images. Thanks in advance!

    ReplyDelete
    Replies
    1. Hi Aprielle,

      Sorry for my ridiculously late reply. I've got just what you're looking for, check it out:
      Remove Blogger Picture Shadow and Border

      Let me know how it goes. Cheers :)

      Delete
  10. Appreciation for great content. I’m certainly glad I had taken the time to learn this.

    ReplyDelete
  11. Hello thanks for your exelent tutorials.
    One thing im still trying to figure out is how i can change the color when making new pages..it always shows white.
    Example http://veetle-tv.blogspot.nl/p/blog-page.html
    is there also a way to make the page bigger if so i would hope to hear more ty.

    ReplyDelete
  12. For some reason my earlier post about making changes to my blog pages isnt showing let me try again..i fixed my issue with the widt and changed the colors however i have a new one now..i have added a chat from chatango on my site and for some reason i lost the ability to use the j and k key its very strange because its only happening on the dynamic view from blogspot i tried multiple chatango chats but only happens here..this is the page http://veetle-tv.blogspot.nl/p/blog-page_14.html..maybe someone here has a clue on what strange thing might trigger a chatbox in to not let only 2 keys work.

    ReplyDelete
    Replies
    1. Hi there,

      Try this to change your background:
      http://www.southernspeakers.net/2011/09/change-bloggers-dynamic-view-background.html

      As for the Chat client, I think it is a bug within the widget itself. Have you tried contacting chatango regarding this issue?

      Cheers.

      Delete
  13. Thanks Yoga,
    I have contacted them on the feedback option i do however doubt if they actually read it.Chatango is enormous.Anyways thanks for your quick response i really love the layout of your site very easy to go trough and lots of helpfull information.

    ReplyDelete
  14. What a fantastic help you are! Thanks to you I've been able to do some great stuff with my blog in Blogger. I love the semi-transparent post background fix, but would like to tweak it a bit. Right now, the transparent white background actually looks kinda pinkish in hue. My background image is light gold in color, and the pinkish post background just does't look right. Is there a way to tweak the transparent post background to more of a cream or ivory color, instead of the bright (although transparent-ized) white?
    Thanks!!!!!

    ReplyDelete
    Replies
    1. I have used this CSS ...

      background-color:rgba(255,255,255,0.4);

      ... to adjust apacity on one of my non-DV blogs. Could something like that works for radishes' blog?

      Delete
    2. Bob: That is a neat trick! I think it'd work on all browsers that support CSS3.

      Radish: Try this instead. And you have Bob to thank for suggesting this awesome trick:

      .sidebar .item{
      background: #E4E4E4 !important;
      }
      #items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
      background-color:rgba(236,236,30,0.3) !important;
      }
      .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
      background: transparent !important;
      }
      #overview .overview-backdrop{
      opacity: 0 !important;
      }

      Cheers all :)

      Delete
  15. Hi,

    I want to ask if you can use with other default template in blogger?

    Thanks.

    ReplyDelete
    Replies
    1. Can be added, but the code needs to be tweaked a little. There are lots of non-dynamic templates out there, so the tweak depends on the kinds template that you've chosen. I'll be happy to look at your blog if you need assistance.

      Cheers..

      Delete
  16. hello friends, i was so confuse on how to cutomize my blog after using dynamics view. can u help me ? i was also did not know how or where to get background picture and how to put it. i got a headache doing all this stuff. please help me ?

    ReplyDelete
    Replies
    1. Hi there,

      You'll find lots of resources on how you can customize your dynamic view templates here --> Dynamic Views

      As for changing your background picture, try going to Dashboard - Template - Customize - Background. There will be plenty of backgrounds to choose from.

      What's your blog's address btw?

      Delete
  17. Hello,

    I am trying to use this code and it is not working for me. I copied the code above and posted in within the "add css" box. Can you take a look at peoniesandhoney.blogspot.com and offer some advice?

    Thanks.

    ReplyDelete
    Replies
    1. Hmmm.. It seems like your code is terribly broken. Have you noticed the same set of code in your 'Add CSS' box repeating itself like 10 times? On top of that, they are broken, which would make all new code useless unless you have the old one fixed first.

      Here's what I'd suggest.
      1) Go to your 'Add CSS' box, and copy the whole code and keep it somewhere safe in your computer.
      2) Delete the code, make sure your 'Add CSS' box is empty.
      3) I've treated your broken and repeating code and come up with this. Paste this in your 'Add CSS' box instead:

      body {
      background:#fff url("http://www.imagekiss.com/images/2012/11/04/Vd5Y.jpg");
      background-position: down-left;
      background-attachment: fixed;
      background-repeat: no-repeat;
      margin: 0;}

      .sidebar .item{
      background: #E4E4E4 !important;
      }

      #items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
      background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
      }

      .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
      background: transparent !important;
      }

      #overview .overview-backdrop{
      opacity: 0 !important;
      }


      Let me know how it goes. Cheers..

      Delete
    2. Thanks for your advice. Yes, I have seen the same codes repeated over and over and I was so confused as to what that was? I have no idea how this has happened? I took your advice and deleted all information that was in the "Add CSS" box and reposted the new codes you listed. Question for you, if I delete the broken codes in the Add CSS box are they completely gone or will they still exist within "Edit HTML?"

      I backed up my HTML after I had made some changes, so my fear is that I have lost my normal coding and now am stuck with broken codes within my HTML?

      After I pasted your codes listed above I am still not getting a semi transparent background on my post on the main page? Should it be semi transparent on the main page and within the post once you click into it?

      I appreciate your help, you are very knowledgeable!

      Delete
  18. I now have my background within my header instead of the header background being all white and the background being just within the body of the page. Ugh, please help!

    ReplyDelete
  19. Okay, sorry for the constant posts, but I made some progress! I was able to get the semi-transparent background on my posts, but realized the look won't work for my overall blog.

    My only road block at this point is just trying to figure out how I can keep my background image on the body only and have my header with my blog title have a white background. Suggestions?

    ReplyDelete
    Replies
    1. Not sure if I'm following entirely, but here's how you can make your header white. Add the following to your CSS.

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

      Let me know if this isn't what you're after.

      Cheers :)

      Delete
  20. Dude, thanks for all the help.

    Any idea why my font size for posts won't change for me? Using Flipcard. It should be super-easy, but I've been trying for four hours now.

    ReplyDelete
    Replies
    1. The template designer has been broken for quite some time now. We should be able to manually change the size using CSS code. What's your blog's address?

      Delete
  21. you seem to be very skilled at this. no one seems to be able to answer a question I have about meebo bar to work with the dynamic views. http://www.meebo.com/websites/ Not even sure where to start?

    ReplyDelete
    Replies
    1. Hi Sean,

      I have not used Meebo before, but it appears it's using scripts to run the bar. I'm afraid it will clash with dynamic view template's native scripts.

      Delete
  22. Hello Yoga,
    Can i use #f8f8f8 color in line 2?

    ReplyDelete
    Replies
    1. Yes you can, but it will only change the post item background color in Sidebar view. What exactly are you going after?

      Cheers :)

      Delete
  23. Hello yoga is there any code reduce post with & height

    my blog is http://www.sinhalasms.tk/

    thanks in advance :)

    ReplyDelete
    Replies
    1. Hi Djxn,

      Looks like you're using a third party template. I'm not quite familiar with the structure of your template, but it does seem like it is using some kinda script to generate post summaries. It'd be best if you could contact the maker of your template to see if the height and width is adjustable within the script.

      Good luck :)

      Delete
  24. Hi Yoga,

    I'm using the Travel template, just wondering if the code needs to be different?

    Thankyou in advance! :)

    ReplyDelete
    Replies
    1. Yeap, it needs to be different. What's your blog's address?

      Cheers :)

      Delete
    2. I'm the anon above.
      It's softlyunspoken.blogspot.com

      Thanks for the quick reply! :)

      ps: used the code for getting rid of static page title and it worked perfectly - thankyou!

      Delete
    3. Hi N,

      I've seen your blog, and it looks like your post is already transparent, and your blog uses a gradient-like effect from top-down. Where would you like to apply the semi-transparent background?

      Delete
  25. Hi,

    I liked your code, but it doesn't work on Sidebar Dynamic view. I've tried several things to make it work but i didn't succeed.

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Croccam,

      The main code won't work for Sidebar view, that's why I've created an extra section to post a fix for sidebar view. Have you given it a try? It's under the title 'Extra: Fix for Sidebar View' in the post above.

      Cheers :)

      Delete
    2. Thank you very much for your answer, when i read "Fix for sidebar" i was thinking on a bar on the side of the webpage. My fault i didn't read it properly.

      Thanks again ;)

      Delete
    3. No prob ~ Actually, I'd prefer it if they actually introduce a conventional sidebar to Dynamic View templates - but looks like it ain't gonna happen.

      Cheers :)

      Delete
  26. Hi!
    I've previously tried another background where it'll make it hard to see the words if it's set to transparent. I thought it'd be good to have the post background be semi-transparent if that's possible?

    ReplyDelete
    Replies
    1. Hi N,

      The code in the post above should give you a semi-transparent background - granted that you're using a dynamic view template. For non-dynamic templates, the code varies. What's your blog's address?

      Delete
  27. I'm the same ~N as above, just replying to your question, where you mentioned the post background's transparent Sorry for the confusion! same blog address: softlyunspoken.

    ReplyDelete
    Replies
    1. Hi N,

      Try this. Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code towards the bottom of your 'Add CSS' box --> Press enter after the last character of the last line } --> Apply to Blog.

      .column-center-inner{
      background: rgba(255,255,255,0.6) !important;
      }

      Cheers :)

      Delete
  28. Hi Yoga,

    On the subject of transparency, I have a slightly different issue. I have added a background image to my blog (http://gemmarobinson.blogspot.co.uk/) to appear as if I have a customised header. I'm using Dynamic Views. I have set my blog title colour to transparent so that it doesn't appear over my image, which seems to work just fine when I view it in Safari, but in IE the blog title is still visible over the top of my background image.

    I have trawled the internet looking for solutions but as a total novice to code I don't know where to start. A friend suggested I could try setting the text-indent for the blog title to -9999px to force it out of view, but I'm not sure what code I would need to use for this. Maybe you can help me out with the code for this, or maybe there's another solution that you could suggest instead?

    I know I'm sort of hijacking your tutorial and taking it off subject slightly, but I am going slightly crazy trying to figure out a solution to this.

    Pleeeeeeeeease can you help?!!!!

    Thank you :-)

    ReplyDelete
    Replies
    1. Hi Gemma,

      What version of IE are you using? I've tried viewing your blog with IE10, IE9, IE8 and IE7, and the title remained hidden in all these versions. Could you perhaps send me a screenshot of what you're seeing?

      cheers :)

      Delete
  29. Hello,

    Thanks so much for getting back to me. Here's a link to a screenshot (which I posted on Twitter): https://twitter.com/GemRobinson/status/276245211045310464/photo/1.

    My husband took the screenshot on his computer at work using IE8.

    Thank you!

    Gemma

    ReplyDelete
    Replies
    1. Hi Gemma,

      I could not reproduce this issue on any of my browsers (including IE8), which could suggest that the problem is not within your blog. Can you check if this issue is local to your husband's computer alone, by viewing your blog on a different machine?

      Delete
  30. Hi Yoga,

    I've asked a couple of other IE users to test my blog. It looks fine on my father's computer using IE, which is encouraging. However, my husband asked a colleague at work to test it on another computer in their office and the same problem occurred. I wonder if the problem is isolated to the computers at my husband's workplace? I will continue testing it on other machines outside of my husband's workplace and let you know.....

    Very strange!

    Thanks again for your help :-)

    ReplyDelete
    Replies
    1. That is strange.. Honestly, I havent got any theory on what could be wrong. I've tried with 3 machines here and they all look fine.

      In any case, let's take an extra measure. Add the following to your 'Add CSS' box, towards the end of your existing code (so that older code stay at top):

      #header .header-bar .title h1{
      display: none !important;
      font-size: 0px !important;
      }

      Let me know how it goes :)

      Delete
  31. Hi Yoga,

    I'm looking all over your blog to found the solution of a little problem !
    In blogger dynamic view, when you click on the header bar (for example to return on the most recent post), there is a blank space during one second. Do you understand what I mean, and do you know how to remove it ?

    ReplyDelete
    Replies
    1. Hi Valerie,

      To be honest, I can't quite picture it.. Let's have a look at your blog. What's your blog's address?

      Delete
    2. Here:
      http://valarchblog.blogspot.fr/

      (Excuse-me if I can't explain with more precision, I don't speek english very well !!)

      Have a nice day,

      Delete
    3. Hi Valerie,

      That is just the way Dynamic View templates are made. The base xml is loaded first, followed by design CSS scripts. Your customisation codes reside within this script, the reason why you're seeing a brief blank screen. I'm afraid there isn't much we can do about it.

      Delete
  32. Thanks for your answer, Yog.

    And have a very happiness end of year, and a beautiful new year.

    ReplyDelete
    Replies
    1. Same goes to you Valerie :) Merry Christmas and Happy New Year.

      Delete
  33. Hey Yoga,

    I have a question. So I used this CSS and made my background semi transparent, but since the post itself is transparent you can see everything behind it as well. Is there any way to make to fix that?

    Here's a screenshot if you need.

    http://snag.gy/qQfG9.jpg

    ReplyDelete
    Replies
    1. Maybe we can adjust the opacity of the post to make it less transparent, or perhaps we can disable the effect in pages that have pop-up posts. Which one would you wanna go for?

      Cheers :)

      Delete
    2. Actually, I'd love to know how to adjust the opacity as well!

      Delete
    3. Hi Will,

      Try this (Adjust the '0.3' in the code below to adjust the opacity..):

      .sidebar .item{
      background: #E4E4E4 !important;
      }
      #items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
      background-color:rgba(236,236,30,0.3) !important;
      }
      .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
      background: transparent !important;
      }
      #overview .overview-backdrop{
      opacity: 0 !important;
      }

      Delete
  34. Hi, no matter what I do I just simply don't get the right result. I'd like to have semitransparent white background like in this tutorial, can you tell me what am I doing wrong?

    My blog is: http://luxielisbon.blogspot.cz/

    Thanks a lot :)

    ReplyDelete
    Replies
    1. Hi Lux,

      Use this code instead for your blog:

      .date-outer, .ss{
      background: rgba(255, 255, 255, 0.7) !important;
      }

      Let me know if you're still having issues.

      Cheers :)

      Delete
    2. Looks great! Thank you so much! ^^

      Delete
  35. Hi... I need help here.. it doesn't turns out what it should be >.<

    At first i changed the background and it works...

    #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://i266.photobucket.com/albums/ii259/sly123456789/Lovewallpaper.jpg') fixed !important;
    }

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

    But then, when i added the semi transparent css code, it turns back to the original form. Which is without the background picture. I added these just below the one above.

    .sidebar .item{
    background: #E4E4E4 !important;
    }
    #items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
    background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
    }
    .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
    background: transparent !important;
    }
    #overview .overview-backdrop{
    opacity: 0 !important;
    }

    Do i need to replace this:http://www.blogblog.com/1kt/transparent/white80.png..??

    ReplyDelete
  36. forget about the previous comment... I get it already... i missed out one step.. Thanks a lot...!!! ^.^

    ReplyDelete
  37. Hi. I am looking for the exact opposite of this problem. My background is transparent and I want it pure white. Could you please help me solve this issue?

    ReplyDelete
    Replies
    1. Sure thing. Let's have a look at your blog. What's your blog's address?

      Delete
    2. My blogs address is www.nailglaze.com. What's bothering me is that thin transparent border around my blogs body and sidebar area.

      Delete
    3. Right. Here, add this to your CSS:

      .content-outer{
      background: white !important;
      }

      Cheers :)

      Delete
    4. It works perfectly! Thank you very much!

      Delete
  38. Hey Yoga,

    Cheers for all the Dynamic View tips and tricks - my site's looking so much slicker now!

    http://intothenetherworld.blogspot.com

    ReplyDelete
  39. I applied this code with a slight change: I used a different image in color instead of yours in transparent white, and it works perfect in Magazine view, which is my current. but... I'm planning to move the default to snapshot, and there the back of each post is still white. Can you tell me if this can be changed and how? Thanks so much in advance :)

    ReplyDelete
    Replies
    1. Hi Bicheras,

      Try this:

      .snapshot .item{
      background: brown !important;
      }

      Cheeers :)

      Delete
  40. Great! Changed brown for my hex code color and that's it, thanks Yoga :)

    ReplyDelete
  41. Thank you so much, I just found this after a little research and works wonderful!
    I just asked in another post about changing the background but am very satisfied with this solution. Thanks, a very smart page you've got here :)

    ReplyDelete
    Replies
    1. Thanks a lot :) I might have already replied you in the other post..

      Cheers :)

      Delete
  42. Thanks much! I love the idea if a transparent background, so am sticking to it now! Keep up the great work and we (Bloggers) thank you for that!

    ReplyDelete
  43. Hey, the semi-transparent post-background is a worthy cause. Being able to show off my main-background to the readers of my blog, I have now the problem that the text is now unreadable.

    Is it possible to enhance the css code in the following way that on the main-page the post-background is semi-transparent, but clicking on a special post will change the postbackground to non-transparent.

    I would be very thankful for responding my question!

    http://wissenhochdrei.blogspot.com

    ReplyDelete
    Replies
    1. Hi there,

      Your post background isn't transparent anymore on the pop-up window. Have you got it figured?

      Delete
    2. Hi Yoga,

      my former problem is already solved. Sorry for not telling you this. Meanwhile I have a new one.

      The post background changes from transparent to non-transparent by poping up the post-window. So far, so good.
      Recently I have added a additional page to my blog, which is available via a button on the main navbar on the top of the blog. Contrary to the posts on the mainpage the text of the additional page does not open in a pop up, so that the background is still transparent and the text is hardly readable. How can I fix the settings with the result that on the mainpage the post-background ist still semi-transparent, but on the additional page untransparent.

      The example for my additonal page is: http://wissenhochdrei.blogspot.de/p/am-besten-erklare-ich-erst-einmal-was.html

      As the last time I would be very thankful for responding my question!

      Delete
    3. My second Question is now also obsolete. I fixed it...

      Thanks anyway!

      Delete
    4. Hi Wiseacre,

      I see your page is loading untransparent now. Have you got it sorted? Sorry for the late reply.

      Delete
  44. Hey, I'm trying out this code and pasting it a few times but it just doesn't seem to work. could you help me out?

    ReplyDelete
    Replies
    1. Sure.. What's your blog's address? And please have the code saved in your blog so that I can inspect why it isn't working..

      Delete
  45. Hey there!! I am looking for css code to remove the dynamic view post white border not the images? Is this possible? Cheers.

    ReplyDelete
    Replies
    1. Hi Trish,

      Not quite sure which white border.. Do you have a link/screenshot I can look at?

      Delete
  46. Hello Yoga, I've tried the code above and it seems to not work on me. I wanted to have my posts on my blog to be transparent. But it somehow shows a white background instead as seen here:
    http://smileasia.blogspot.com/

    I'm not too good with these stuffs, so I really hope you could help me with this. Thanks!

    ReplyDelete
    Replies
    1. Hi Aria,

      Sorry for the late reply. Your blog isn't using a Dynamic View template. What am I missing here?

      Delete
  47. Yoboy! This blog is a lifesaver! But I do have a couple issues that I haven't found on here yet.
    1. How can I make the content background semi-transparent ONLY in "classic view"? I have it fully transparent for the other views, and I like that.
    2. On some views (classic, magazine, mosaic), there is a faint border around my content. Can I get rid of it?

    ReplyDelete
    Replies
    1. Hi Jescapism,

      1) It depends. What's your blog's address?
      2) Still need your blog's address :)

      Delete
  48. Hi Yoga! I'm having problems making your aforementioned changes to the travel template. I'm assuming the code is different from what you posted. Mind helping me out? I'd like the main background to be semi-transparent so as to see the background image. Thanks!!! http://hondafitcamping.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Kani,

      I see you already have a semi-transparent background. Have you got it sorted?

      Delete
  49. Hi there, amazing blog. Just wondering is there a way to, in mosaic view, edit the width of the expanding border from the tiles and/ or if it would be able to float it above so it moves more smoothly or just use one of the other post layouts from say, clipboard. Thanks

    ReplyDelete
    Replies
    1. Hi there,

      I can't quite visualize what you're trying to edit. Mind posting an annotated screenshot?

      Delete
    2. Hi yogi, thanks, it's at www.siknox.com. When you click an image it expands to fill screen but would like to expand to half the width or set the width. Alternatively Id like to disable this and use another. Photo expand like that of the flipboard view. Thanks

      Delete
    3. See if this is what you're looking for:

      .item.hentry.open, .sspe{
      width: 50% !important;
      }

      Replacing the mechanism with an alternative one is out of the question. Do note that this tweak has all the potentials to misbehave due to the nature of the mosaic design. Simply put, it is a bad idea to tweak this.

      Delete
  50. Thanks yoga, thats the one. Is there a way for centering this, or possibly floating it so it is positioned centered over the other images? Many thanks

    ReplyDelete
    Replies
    1. Try this:

      .item.hentry.open, .sspe {
      margin-left: auto !important;
      margin-right: auto !important;
      position: relative !important;
      width: 50% !important;
      }

      Cheers..

      Delete
    2. Nice one, thank you so much yoga. I have been trying to work out the tags but there's just so many. Great work thank you

      Delete
    3. If you have Chrome, hit on F12, and a developer tool will pop-out that will allow you to examine the tags. You can do the same with an add-on called Firebug in Firefox.

      Delete
  51. Hey Yoga. I've been trying to make this work for my blog the longest... I'm not sure what I'm doing wrong. A little help would be great! http://a-new-sugar.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Mikki,

      It seems like your background is already transparent, have you got it sorted?

      Delete
  52. hey yoboy... you're awesome... thanks for everything...
    i'm a new blogger. still trying to make it right. that's why, the anonymous comment.
    please.... tell me how can i not have transparent post backround... i would like it gray, or black or something dark anyway.

    ReplyDelete
    Replies
    1. It depends on the kind of template you're using. Let's have a look. What's your blog's address?

      Delete
  53. Hi, I am trying to get my sidebar to appear as white or just completely clear. I set it as transparent, but it looks grey and even if I try to set it as white it isn't completely white. For instance, when I set it as white it looks grey, when I set it as transparent it looks grey, and if I set it as red or something like that it just ends up looking like a darker version of the color I selected. I just want it to be white. What do you think I should do?

    ReplyDelete
    Replies
    1. Hi..

      Well, first, let's have a look at your blog. What's your blog's address?

      Delete
    2. It's www.isleoftyler.blogspot.com. I am using the Travel template. Thanks. :)

      Delete
    3. Here, give this a try. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .main-inner .fauxcolumn-right-outer .fauxcolumn-inner{
      background-image: none !important;
      }

      Cheers :)

      Delete
    4. It worked! Thanks so much! You are really nice for helping everyone out with these things. :)

      Delete
  54. Hey there you're awesome!I would like to ask if you have any idea to change the background image to become as a whole instead of tile? and how can i upload an image for the space filled in white? Would appreciate if you could spare a few seconds have a look into my blog .http://www.jessyca-jc.blogspot.com

    ReplyDelete
    Replies
    1. Hi JC,

      Sorry for the late reply. By whole, did you mean fixed in a position - as in the background sticks to your screen while you scroll. Is that what you're looking for?

      For your content space, you can add a background by adding the following to your 'Add CSS' code in your Template Desginer - Advance:

      .content-inner{
      background: url('ENTER_IMAGE_URL_HERE') !important;
      }

      Delete
  55. Hey Yoga - latest follower. I had a friend work on my blog but I cant add the transparency your tutorial shows, any ideas why that is? here is the blog http://shadesofblueinteriors.blogspot.com/

    thanks in advance

    ReplyDelete
    Replies
    1. Hi Rachel,

      This should work, here:

      .content-inner{
      background: rgba(255,255,255,0.5) !important;
      }

      Let me know how it goes!

      Delete
    2. You're the best at this! It did work great. One last thing, my main page background is still opaque I tried using

      #header .header-bar{
      background: rgba(255,255,255,0.8)!important;}

      but it didnt change to semi transparent....any ideas? thanks in advance!

      Delete
    3. Hi Rachel,

      I believe the key lies on what exactly you meant by your main page background. If you literally meant your background image, I'm afraid it can't be done, as opacity are meant to be applied to elements on the foreground (anything that has background behind it). If we make the background itself transparent, there won't be anything else to be seen underneath, and thus it just won't work.

      If you meant something else, let me know what exactly you want to change to opaque and I'll see if it can be done :)

      Delete
  56. hi yoboy,

    dear i want to know how to make semi transparent post background in awesome inc. tamplate. please tell me.

    ReplyDelete
    Replies
    1. Hello Manoj,

      Can I have a look at your blog?

      Delete
    2. Hi Yoga. I am also wondering how to do semi transparent background for posts using the awesome inc template. Here is my page http://zachginnever.blogspot.com/ Thank You!

      Delete
    3. Hi Zach,

      Sorry it took ages to get back back to you. Here add this to your CSS:

      .date-outer{
      background: rgba(0,0,0,0.8) !important;
      }

      Delete
  57. Hi Yoga - I have a standard template and I don't think it's working on mine, mostly I just post images, and I would prefer to be able to see only the image and the background. Could you help me, I tried your code, but no luck, not sure what I'm doing wrong. http://mikascottadventures.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Mika,

      Not entirely sure if this is what you're looking for, but do give it a try and let me know how it goes. Cheers!

      .post-outer{
      background: rgba(255,255,255,0.1) !important;
      }

      Delete
  58. Hi

    I did get transparent background for the content of page/post. I want to remove borders which are being displayed in grey color. I want to remove them also ?How ?
    http://ourptc-sites.blogspot.in

    ReplyDelete
    Replies
    1. Hi there,

      I don't see any border on your page. Have you got this resolved?

      Delete
  59. Could you please let me know how I could do it for a Picture Window template?

    Thanks,
    Maria

    ReplyDelete
    Replies
    1. Hi Maria,

      Isn't Picture Window template already semi-transparent by default?

      Delete
  60. No questions here, but thanks so much for this! You're doing the blogosphere a truly valuable service.

    ReplyDelete
  61. Hey Yoga, thanks for your codes ! they are really helpful. My question is when you select a post from sidebar, there is a thin line crossing the centre of selected post.

    Do you know how to fix it ?

    ReplyDelete
    Replies
    1. Hi there,

      This looks like from your background itself. Could try another background that doesn't have any frame surrounding it?

      Delete
  62. Hi, I just did all the steps and got zero change. Trying to figure out if i did something completely wrong or what is going on. I would love an input. http://atlslowmotionbooth.blogspot.com/

    ReplyDelete
    Replies
    1. Hello,

      Your blog is set as private - I can't view it.

      Delete
  63. Hello there Yoga,

    Thanks for all the information you have been providing about Blogger's Dynamic Views. You've helped me a lot to get what I wanted from my blog's design.
    http://laminafiada.blogspot.pt

    I'm still working on it. My current issue is how to set transparency of my posts' inner content to a slightly more opaque level than how they are shown in the main page view (currently set to "Magazine", but want this to work on all views). Just to make them easy to read, but not boring to look at. Your code works for me, but I want the background of the posts content to be just very slightly transparent (not actually opaque).

    I want to set the content background to rgba(xxx,xxx,xxx,0.95), but leave them at rgba(xxx,xxx,xxx,0.5) in any of the main dynamic views. How can I do this?

    I'm tweaking right now. I'll let you know if I solve this issue by my own.
    Cheers!

    ReplyDelete
  64. By the way, I'll want the content background to have a different color hue from their previews, so I'll want to have distinct rgbs values foreach.

    ReplyDelete
    Replies
    1. Hello Carl,

      In the code above Line 4 should allow you to set the background transparency for post pages, while Line 7 for the main page. If you could assign to separate background attributes to them, that should do the trick.

      Delete
    2. Thank you for your reply Yoga. I owe you an apology because I didn't express myself correctly. I only wanted to apply a different background transparency to the pop-up content windows, not to all the content pages. So classic, sidebar and mosaic views, and the other blog pages, could be left equal to the rest of the main pages. Fortunately, I figured out that ".overview-inner" refers to the pop-up content area, so I isolated it and managed to do exactly what I wanted. :)

      I have two other questions, though:
      1 - How can I apply a semi-transparent color to the main color theme (top header bar and pop-up gadget dock, preferably individually)? The available options only provide solid colors or full transparency... I'm sure its simple, but I don't know how to invoke those elements...

      2 - I reckon that someone else already asked this, but is it possible to apply a Blur filter to the same elements on which a semi-transparent color is applied (except the pop-up content windows, I'll leave these as they are right now)? So that they create a blurring glass effect on the background image of the blog over which those elements are overlaid. A bit like Windows Aero Glass theme... I know that CSS3 allows for blurring effects, but I'm not sure how to do it. Info is very scattered on this.

      Cheers!

      Delete
  65. oops, sorry... When I mentioned the "top header bar" in the previous reply, I actually meant to say the navigation bar where the links for labels and pages are presented.

    ReplyDelete
  66. I figured out how to apply semi-transparency on the top navigation bar and its drop-down sub-menu of Dynamic Views:

    .header-drawer{
    background: rgba(xxx,xxx,xxx,0.5) !important;
    }

    .header-drawer .menu span{
    background: rgba(xxx,xxx,xxx,0.5) !important;
    }

    Now I need a way to change the color of the Dynamic Views options on the drop-down sub-menu when I hoover my mouse over them.... I still couldn't figure out how to do this on the gadget pop-up menu and all its sub-menus...

    ReplyDelete
    Replies
    1. This should help for your drop-down sub-menu:

      .header .menu li:hover{
      background: yellow !important;
      }

      As for the gadget menu, it is rather tricky, mainly because I've observed the handlers used have been changing over the years (months, whatevs). You might find something useful here:

      http://www.southernspeakers.net/2012/03/change-gadget-color-in-blogger-dynamic.html

      Delete
    2. Thank you, Yoga. This helped me to find the way.

      Delete
  67. Hi Yoga,
    I use picture window template on my blog and there is a grey semi-transparent window all over my blog. I want to remove that. Please help.

    You can check out my blog at
    http://dhanshreesoni.blogspot.in/

    ReplyDelete
    Replies
    1. Hello Dhanshree,

      Please add the following to your 'Add CSS' box:

      .content-outer{
      background: none !important;
      }

      Cheers.

      Delete
  68. Hi Yoga,
    i use a custom minimal template from pocket,
    Google page insight detected my website rating below 100%
    Please how can i optimize the issues found detected!
    Here is my blog http://beat2hit.tk
    Thanks...

    ReplyDelete
    Replies
    1. Hello Cent,

      Do you know what exactly are the issues detected?

      Delete
  69. You're a genius and really patient.. Cheers!

    ReplyDelete
  70. Hi,

    This is fantastic (thank you!), though it works a little too well on my blog; it's become fully transparent. Is there any way to fix it?

    Also, would it be possible to choose the colour of the transparency?

    If you can help, thank you very much. Your scripts have been invaluable to me since I changed to Dynamic Views :)

    ReplyDelete
    Replies
    1. Hey,

      Mind if I take a look at your site? What's your blog's address?

      Delete

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