Southern Listeners

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

Saturday, December 31, 2011

Removing Border and Shadow from Selected Images in Blogger Dynamic View

Previously, I wrote a tutorial on how you can remove borders and shadows from your pictures, in a Dynamic View template. The tweak applies to all the pictures in your blog. Blog reader Filipe wants to know if it is possible to remove borders and shadows from a single image alone, instead of applying the tweak to all images. Yes, it is possible, and here's how.


Step 1:

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.
.ss, .noborderdv img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}

Step 2: 

Compose a post, and upload an image. Once you've inserted the image to your post editor, click on 'HTML' to view its HTML content. This is what you will see:



Step 3: 

Change the word 'separator' in the very first line, to 'noborderdv'. This is what your HTML should look like now.


And that's it. To relieve a picture from its border and shadows, just change 'separator' to 'noborderdv', and that image alone will be shadowless and borderless.

Happy 2012 everyone!

117 comments:

  1. @Mekey: That's because you're not using Dynamic View template :) This tweak is for dynamic view templates only.

    ReplyDelete
    Replies
    1. I would like to have a code for something I want to go away!!!
      I would love to see the border from the blog posts go away..
      www.peardesign.blogspot.com

      between the background and the white square (blog post) is a shadow or border, how can i get that one away?

      Delete
    2. Hello Jasper,

      Try the following:
      http://www.southernspeakers.net/2011/11/remove-border-and-shadow-from-blogger.html

      Cheers.

      Delete
  2. So glad I have found your blog!! :)i guess i'll be here for a while!

    ReplyDelete
    Replies
    1. I take that as a positive feedback :) Enjoy your stay here.

      Delete
  3. Perfect! This is just what I needed for a recent blog post. Kudos, man, kudos. Since it looks like I'm sticking to dynamic view for a while yet, I'm gonna be a regular customer here. :)

    ReplyDelete
    Replies
    1. Thanks for dropping some words. Appreciate it :) Cheers!

      Delete
    2. Thank you zoo much, I have found where to go for all things dynamic

      Delete
  4. How do we move the new gadget dock down on the page and change the color?

    ReplyDelete
  5. Not really work... :/
    it work just for somes pictures, but not for all... I don't understand why that works on certain photo, and not on the others... It is unpredictable !

    ReplyDelete
    Replies
    1. Hi pakal,

      Can I have a look at the pictures that you claim don't work? With the code placed in your template of course. Right now, the code is no where to be found in your template.

      Cheers.

      Delete
  6. Thanks! I got very frustrated when the new blogger brought back the borders!

    ReplyDelete
    Replies
    1. Glad both your borders and frustration are gone now :)

      Delete
  7. it works on me! thanks for the tutorial but i really need your help,
    do you know how to remove the dots on dynamic view on older and newer post,
    i just don't want any dots show in my blog, thanks so much!!

    ReplyDelete
    Replies
    1. I can't find any dots in Dynamic Views, but I've found a dotted line in your blog (your template is non-dynamic views by the way). Here's how you can remove it:

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

      .blog-pager{
      background: none !important;
      }

      Cheers :)

      Delete
  8. Hi there!
    I’m using bloggers simple template and i wanted to remove the shadow and borders ONLY on the Widget images on the sidebar, but keep it on the posts.. Can anybody help me??

    thanks in advance!

    ReplyDelete
    Replies
    1. Yeah sure :)

      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-right-2-1 img{
      padding: none !important;
      border: none !important;
      background: 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;
      }

      Delete
    2. Yoga,

      I was so excited when I found this post because I have been searching to do JUST THIS!! (remove border from a sidebar widget, but not in blog post images)... however, this code didn't work for me!! Any other tips?

      Delete
    3. Hi Aliya,

      Let me have a look. Could you give me the link of the page where your image is placed at (the one that you'd like its border gone)?

      Cheers :)

      Delete
  9. Thanks so much for you prompt reply! It worked perfectly! :)
    By the way, i’ve adjusted the margins between the images on sidebar, and on safari it looks perfect, but on firefox and IE the margin appears bigger! I made the experience, and noticed that the extra margin is added the moment i link the image to a URL, do you know what i can do to avoid this? (the correct blog is the one i’m using to write this comment)

    Thanks!

    ReplyDelete
    Replies
    1. Hi Mariana..

      Are you 'teste ♥ poc'? Sorry it caught me off-context. In any case, can I look at your blog and the code that you have entered into your template?

      Delete
  10. Yes, i’m teste ♥ poc’, but the real blog is the one i’m posting from now, the other was just a test..
    Yeah sure, how can i give you access to that?
    I didn’t enter any code, except changing the margins on bottom.. the images on side bar are wiidgets and as i add the link they create that margin i didn’t wanted..

    ReplyDelete
  11. No, its a public one :)
    the address is www.peaceofcakedesign.blogspot.com!
    Thanks!

    ReplyDelete
    Replies
    1. Here, try this:

      .Image.widget{
      margin: 0px !important;
      margin-bottom: 10px !important;
      }

      Cheers.

      Delete
  12. Hi Yogaratnam

    Didn’t work perfectly but i was able to slightly reduce the margins on Firefox an IE, so it better than nothing right :)

    Cheers.

    ReplyDelete
    Replies
    1. Hi Mariana,

      Bringing the margin from 10px to 28px would increase the gap actually. Set a lower value if you want to reduce the gap between the banners.

      Cheers.
      -Yoga-

      Delete
  13. Hi,

    the problem is that if a set a lower margin, in Safari they are on top of each other :/

    ReplyDelete
    Replies
    1. Hi Mariana,

      I could investigate further, but I'd need a copy of your template. If you want me to look into it, go to Dashboard - Template - Backup/Restore - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Come back to this thread and leave your link here.

      Delete
  14. Dear Yogaratnam, here you go!

    http://www.sendspace.com/file/fh4jdq

    Thank you for beeing so helpfull!

    ReplyDelete
    Replies
    1. Hi Mariana,

      I've replicated the problem in one of my test blogs. I'll get back to you should I come across a solution.

      Cheers!
      Yoga

      Delete
  15. Hi Yoga!

    Looking forward to it!

    Cheers!
    Mariana

    ReplyDelete
    Replies
    1. Hi Mariana,

      I may have found a fix. This works in my test blog, do let me know if it works on yours too. Add it to your CSS. All the best!

      .main-inner .column-right-outer {
      margin-right: -310px !important;
      width: 310px !important;
      }

      Delete
  16. It worked! :)
    Thank you so much Yoga, you were great!

    Cheers!
    Mariana

    ReplyDelete
    Replies
    1. Yeah~ I'm sorry it took forever to get this sorted. But hey, you got it fixed now. Happy blogging! :)

      Delete
  17. Hey!

    I'm not sure if you can help me or not, but do you have any idea how I can remove the borders from the tabs section on my blog? I just recently designed my blog and can't remember how I did it last time. I've changed the colors in advanced to match the color of my background, but the lines from the tabs still show up and its driving me crazy haha!

    Zara
    x

    ReplyDelete
    Replies
    1. Hi Zara,

      Have you got this sorted? I don't see any border around your tabs no more.

      Delete
  18. Tried it and got rid of the border but a shadow still remained on the pic I posted today at kansasbob.com. Any way to get rid of it?

    Thanks Yoboy!

    ReplyDelete
    Replies
    1. Hi Bob,

      Though I can find .noborderdv in your CSS, I can't see the link between this image (I assume you're referring to the magnifying glass image) and the said rule. Can you repeat Steps 2 and 3. You should end up having 'class=noborderdv' on your image's HTML itself..

      Delete
    2. Thanks Yoga. It was there when I added the pic and I changed the class. When I just looked at it the div parameter was no longer there. Maybe the div was removed when I moved the image from the right side of the post to the left? Anyhow, I added it and it works fine. Thanks.

      Also, a few weeks ago DV seemed to change the way that images are handled. The width and height parms have always been ignored by DV and now the positioning (top, left, right, bottom) parms are ignored as well. Wonder what changed?

      Enjoy the weekend!

      Delete
    3. Hi Bob,

      I'm no exactly sure what happened. Tell you what. Create a question thread in Blogger Help Forum, and I'll escalate this issue to a Google employee, and see if they know anything about it.

      You too have a good weekend Bob! :)

      Delete
    4. Thanks Yoboy! I posted it at https://productforums.google.com/forum/#!category-topic/blogger/something-is-broken/V9kRTDC_BQg

      Delete
  19. Dynamic View is the new blogger templates that display a lot of pictures on the home page? I don't have one of these, I use the blogger simple template and I wanted the images in my post, and on certain pages to have borders so I used one of your tutorials to change the border, remove the shadow and have a simple dashed line around my images. I wanted to remove this setting for some of the pages in my blog and I tried this out but my images would not loose the border :/ Anyways, I read a comment in which you said that this was for blogger dynamic view and I was wondering if I could do this with the normal simple template I have?

    ReplyDelete
    Replies
    1. Hi Charlotte,

      For simple template, try using the following code in Step 1, instead of the one given above:

      .ss, .noborderdv img{
      padding: none !important;
      border: none !important;
      background: 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;
      }

      Let me know how it goes! Cheers :)

      Delete
    2. This didn't work for me any advice?

      Delete
    3. The template designer was broken, and it just got fixed. Could you give it another try?

      Delete
  20. Good job! Thank you yoga. Very helpful.

    ReplyDelete
    Replies
    1. Thanks Michael, glad you find it helpful :) Happy weekend!

      Delete
  21. thanks for the tip it was just what I was looking for...works for widgets too!

    ReplyDelete
    Replies
    1. I have one more problem. The blog's shadow is still visible when you visit the post. Take a look at this http://onblues.blogspot.com/2012/09/blogger-vs-wordpress.html..
      Thanks.

      Delete
    2. Try this:

      .viewitem-content{
      border: 0px !important;
      }

      Cheers..

      Delete
  22. Thank you! This really helps much.
    Very good.

    ReplyDelete
  23. I'm using the Watermark template in blogger and I want to keep the white border behind the images in my posts. However, I don't want the white background on my sidebar images. How can I fix this?

    ReplyDelete
    Replies
    1. Hi Daisha,

      The following code should do what you're looking for. Add it to your 'Add CSS' box:

      #sidebar-right-1{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      Cheers :)

      Delete
    2. Hi Yoga,

      Thanks for your response but it's not working. I'm probably asking the wrong question or using the incorrect terms. When I add an image to my sidebars that I KNOW has a transparent background, I still end up with a white background. I don't want a border or background color on my sidebar images but I would like to keep the border on any images in my posts.

      Thanks for your help.

      Delete
    3. If I add a gadget to my sidebar using the HTML/Javascript feature it does not give me the white border around it which is understandable. Put if I add a gadget using the picture feature then it gives me a white border around my picture and/or adds a white background to my transparent images.

      Delete
    4. Hi Daisha,

      I get you now. Could you upload a transparent image and leave it on your sidebar? Kinda hard to take a guess when the image isn't there. I'll work on a unique workaround once your image is uploaded to your sidebar (gimme a nudge once you've done so)..

      Delete
    5. Hi Yoga,

      The blog I'm actually working from is a private blog but I created a help blog using the same template. I added a frame to the sidebar that actually has a transparent background but it's showing up white. If you can take a look at it and get back to me that would be great.

      Delete
    6. Right.. Try this.. Add it to your 'Add CSS' box:

      .sidebar .Image img{
      padding: none !important;
      border: none !important;
      background: 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;
      }

      Cheers..

      Delete
    7. Yoga,

      Thanks for your help. This works perfectly on my test blog but it's not working on my actual blog. Maybe there is some conflicting code I've entered. I guess I will have to try to figure it out. Thanks so much for your help!

      Delete
    8. Do you want me to take a look? Leave the code and the test picture in your actual blog and gimme a nudge.

      Delete
  24. Thank you so much! Not only did I remove those pesky borders and shadows but it made my blog faster! Vinaka!

    ReplyDelete
    Replies
    1. Ahh excellent! Makes sense anyway.. The lesser the elements to load, the faster your blog gets!

      Delete
  25. Hey, Yoga, Thanks so much for this info! I used it to get rid of the borders around my sidebar Image widgets. Now I'm trying to figure out what css to add to decrease the space after image widgets. It's a little uncomfortably wide at present (blog under construction: http://www.tomindaadkins.blogspot.com )

    ReplyDelete
    Replies
    1. Hi Tominda,

      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.

      #Image2, #Image1, #Image3{
      margin-bottom: -30px;
      }

      Cheers :)

      Delete
  26. Hi Yoga, How would I make more "white space" between text and images in my posts? www.numberbog.com (see second post for example of squishiness)

    ReplyDelete
    Replies
    1. Hi Dreg,

      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.

      .article-content img{
      padding: 10px !important;
      }

      Cheers :)

      Delete
  27. Thank you so much! I tried everything and nothing seemed to work... till I found your post! It works! Thanks!!!

    ReplyDelete
  28. Hello!
    Thanks for this useful tutorial. It WORKED! Now, I have a little detail that bothers me: I'd like to remove the borders that seperate my tabs on Blogger 2012. Here's the section of my code that I want to alter:

    /* Tabs
    ----------------------------------------------- */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);
    }

    .tabs-inner .section:first-child ul {
    margin-top: -$(header.border.size);
    border-top: $(header.border.size) solid $(tabs.border.color);
    border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
    }

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);
    }

    .tabs-inner .widget li a {
    display: inline-block;

    padding: .6em 1em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-$startSide: $(tabs.border.width) solid $(content.background.color);
    border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

    }

    .tabs-inner .widget li:first-child a {
    border-$startSide: none;
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    color: $(tabs.selected.text.color);
    background-color: $(tabs.selected.background.color);
    text-decoration: none;
    }



    Do you think there's a trick to get rid of these ugly seperators?

    Thanks for helping all of us, anyway! Keep it up! ;)

    ReplyDelete
    Replies
    1. Hi there,

      I can't see these separators that you're referring to. Could you provide me an annotated screenshot of the said separators?

      Delete
  29. Can't seem to get rid of the shadows around the images. I followed the dynamic view post. Alternatives in the comments. Reset the template and added the selective image css and replaced the 'seperator' with 'noborderdv'. Relaunch firefox.

    Here is the page. I want to remove the shadow around the images.
    http://frogpondconcertseries.blogspot.com/2013/01/video-at-frog-pond-has-its-own-website.html

    I'm bound to be doing something wrong lol.

    ReplyDelete
    Replies
    1. Hi Chris,

      It doesn't seem like there's any code saved in your 'Add CSS' box. Could you confirm this by checking your 'Add CSS' box? It shouldn't be empty after restarting your browser.

      Delete
  30. I am using DV. It worked!
    But... Is it possible to remove these borders on the mobile version? Thanks!

    ReplyDelete
    Replies
    1. Hi Ted Reid,

      In Step 1, use this code instead:

      .mobile .noborderdv img, .ss, .noborderdv img{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      Cheers :)

      Delete
  31. I just wanted to thank you so much for all these amazing tutorials! I have used several of your suggestions, and am much happier with my blog!!! Thanks again!

    ReplyDelete
    Replies
    1. Hi Chef Di,

      Thanks for taking the time to drop some words here. Means alot. Thanks! :)

      Delete
  32. Thanks!
    Working perfectly in my blog!

    ReplyDelete
  33. Is keeping the borders on the pictures with captions--any advice? www.anarmywifeadapts.blogspot.com. Also, is there an easier way to remove them from each post instead of having to go in each time and change the wording in HTML?

    ReplyDelete
    Replies
    1. Hi there,

      I'm not so clear on your first question there.. In any case, if you wanna remove your borders and shadows from all the images, see this post instead: http://www.southernspeakers.net/2011/11/remove-border-and-shadow-from-blogger.html

      Delete
  34. Hi
    Dark BG and around my pictures and video cards white border and shadow. Your steps not working for me. Help please!

    ReplyDelete
  35. I managed to get rid of the shadow around my images - but Im hoping to get rid of the shadow around my posts, and the shadow around my title - any ideas?

    I'm using the Watermark template.

    http://lookbooksandcoathooks.blogspot.co.uk/

    Thanks!

    ReplyDelete
    Replies
    1. Hi Ella,

      Sorry it took so long.

      Try this:

      .post-outer{
        -moz-box-shadow: 0px 0px 0px transparent !important;
        -webkit-box-shadow: 0px 0px 0px transparent !important;
        box-shadow: 0px 0px 0px transparent !important;
      }
      .Header h1{
      text-shadow: 0px 0px transparent !important;
      }

      Cheers :)

      Delete
  36. I'm trying to do exactly this, which your article is about - remove the shadowing from a single pic at the bottom of page - but after finding and replacing "separator" with the "noborderdv" there is no change.

    Can I assume it's because I am using the Watermark template? If so, is there a way to also make this work on Watermark? I've used your other CSS tutorial to add the shadows (but without borders) and like the effect, but I really don't want a shadow on this one single image =)

    Thanks!

    ReplyDelete
  37. My Bad!! it's 4am here and I didn't click "apply to blog" after pasting the first code string before swapping in the "noborderdv" =)

    Works perfectly - sorry for my first post and thank you so much for sharing your knowledge!!

    ReplyDelete
    Replies
    1. Lol.. Just curious, why are you still up at 4am in the morning?

      Anyways, glad you got it figured..

      Cheers! :D

      Delete
  38. Thank you so much! Been searching for ages and this is the only post I've seen that makes sense and has actually worked! :)

    ReplyDelete
  39. hello there I'm using Dynamic views,how can I remove the shadows from posted images?

    ReplyDelete
    Replies
    1. Mind if I have a look at your blog?

      Delete
    2. yep,sure http://bit.ly/17vwPeV

      Delete
    3. I don't see shadows in your images (anymore). Have you gotten it fixed?

      Delete
  40. I'm wondering if you can help me. I've been using your advice and it worked perfectly up until the post I"m working on now. Before each image had a separator code so I could unshadow what I want and leave the rest, but this post doesn't. Any thoughts? Thanks for the great tutorial! Up until this post it was working perfectly. :)

    ReplyDelete
    Replies
    1. Not a worry. You can still add your own div/span tags to include the CSS class. Just use the following template.

      <span class='noborderdv'>
      Add your content here, you can just copy and paste stuffs. It can be of multiple lines. Just your regular post HTML, actually.
      </span>

      Delete
  41. Hey! Is there a way I can remove the shadow from the actual body part under the header bar? My blog is all white so it looks odd! Also can I make the size of each post thumbnail bigger? Thanks!

    ReplyDelete
    Replies
    1. Hey..

      Tried making the flipcards bigger --- failed miserably.

      As for your the shadow, add this to your CSS:

      #header .header-drawer{
      box-shadow: 0px 0px 0px transparent !important;
      }

      Delete
  42. Hello There,

    The code for removing the gadget shadows worked fine but when i applied the code in order to remove one of the post images it enabled the shadows for the gadgets again. It seems the codes are conflicting each other.

    Any solution please?

    ReplyDelete
    Replies
    1. That shouldn't have happened. Could you point out the URL of the page you've been working with?

      Delete
  43. hey thank you so much for this. it helps me a lot. :))

    ReplyDelete
  44. Hey! Thank you for the brilliant guides. I was wondering if it's also possible to remove the background on a specific image also?

    ReplyDelete
  45. Never mind, I added "background: none !important;" to the CSS and sorted it :)

    ReplyDelete
  46. Thanks for this post! I've been trying to figure out how to remove the border around certain pictures but not others for the longest time, this made it real simple!

    ReplyDelete
  47. Hi, I would like to keep the mobile default template but I just want the image to be border-less. Is that possible?
    Another way is to choose "Custom" but the default homepage will not be what I want.

    ReplyDelete
    Replies
    1. The last time I attempted to apply a different set of style for mobile templates, things did not go as expected. I will give it another try when Ive got the time.

      Delete
  48. Hi, I've been using this tip to remove the border from individual images in posts (usually one amongst several, all the rest of which retain the drop-shadow effect). Normally it works, but today it doesn't. Any suggestions why this might be? [I'm working on an iMac in Safari] Regards, Seb

    ReplyDelete
    Replies
    1. Hi Seb, mind if I have a look at what you're working on?

      Delete
    2. Sure, compare these two posts:

      http://aquestionofscale.blogspot.co.uk/2015/07/book-review-journal-of-russian-campaign.html

      http://aquestionofscale.blogspot.co.uk/2015/07/book-review-rites-of-peace-zamoyski.html

      This issue is with the little grayscale images of 5 Napoleonic 'bicorne' hats (my equivalent of a 5-star rating system!). The first instance above still has the border, despite making changes to the coding; the 2nd is as I want them all to be.

      Thanks for taking time to help

      Delete
    3. Sorry for my ridiculously late reply. I see you've applied the 'noborderdv' class (Step 2 and 3) to an empty div tag, not the one that has the rating image. You can locate the correct div tag by find the tag that has the img url few lines below it. Alternatively, you can refer to your second post to see how you've got it done there.

      Delete

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