Remove border from single image only

Community Forums Forums Design Tips and Tricks Remove border from single image only

This topic is: not resolved

Tagged: 

This topic contains 8 replies, has 3 voices, and was last updated by  SoZo 2 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2533

    momsthewordus
    Participant
    I use the most recent versions of WordPress, Genesis and BeeCrafty.  
    
    I love the borders on my images, but occasionally, I need a border removed from just one image. Is there a way to do that? I tried setting the border to "0" in the advanced settings for the image, but it didn't work. Is there a way to override the border?
    
    Thank you!
    
    My site is OneCreativeMommy.com.
    #2575

    SoZo
    Moderator
    Post count: 1573

    You would need to apply a class to your image or wrap it in a div that you can target with a new style rule to remove the border


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #2580

    momsthewordus
    Participant

    Thank you.  Here is a style I created:

    .noborder {
    border: none !important;
    background:none;
    padding: 5px;
    margin: 0 5px 0 5px;
    }

    I tried using it by adding

    noborder

    to the CSS Class box in the advanced settings, but it didn’t change anything.  Is there something wrong with my code?

     

    • This reply was modified 2 years ago by  momsthewordus. Reason: I took out the line including a box shadow. (Of course that would add a line around the image.) It didn't change anything. There is still a border
    • This reply was modified 2 years ago by  momsthewordus. Reason: I took out the line including a box shadow. (Of course that would add a line around the image.) It didn't change anything. There is still a border
    #2630

    momsthewordus
    Participant

    Using the noborder class made a slight change to the border, but the problem still remains.  You can see the difference here:  The first image has the noborder class applied to it.  Notice that the shadow on the top and left are now gone, but the white space and shadow on the right and bottom remain.  I use the beecrafty template.  Perhaps there is something else that needs to removed that I am missing.

    This is the latest thing I tried:

    .noborder {
    border: none !important;
    background:none;
    padding: 0;
    margin: 0;
    box-shadow: 0;
    -moz-box-shadow: 0;
    -webkit-box-shadow: 0;
    }

    I was hoping that adding 0 to the shadows would negate the shadows in the regular style for my images.  It didn’t.  Help!

     

     

    #2637

    SoZo
    Moderator
    Post count: 1573

    There’s still a background and box shadow applied by #content img, #content p img. You need to make your selector more specific, e.g. #content img.noborder


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #2649

    Dorian Speed
    Participant
    Post count: 140

    I think it should work if you change it to this:

    .noborder {

    border: none !important;

    background:none;
    padding: 0;
    margin: 0;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    }

    There’s got to be a cleaner way to do this without all of the !important declarations…but this seems to work in Firebug, at least.


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    #2653

    SoZo
    Moderator
    Post count: 1573

    You only need !important when the selector isn’t specific enough or the rule you are trying to override is using !important.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    #2668

    momsthewordus
    Participant

    Thank you so much!  I had tried the !important trick, but it didn’t work.  I needed to use “none” instead of 0.  Thank you so much!  I have been trying to figure this out forever!

    #2686

    SoZo
    Moderator
    Post count: 1573

    You’re welcome :)


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Remove border from single image only’ is closed to new replies.