Back Home

Open Designs

Community. Driven.

General Talk: [resolved]Overriding Styles in your CSS sheet

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthor4evrblu
    • CommentTimeJan 3rd 2007 edited by 4evrblu on the 03rd January 2007 at 20:42:03 EST
     
    My CSS sheet controls, among other things, the look and feel of image presentation withing my entry/content section of my site, and for the most part I love the look and feel of images when they appear there. However, I have a desire to override that one style, selctively throughout my site.

    Specifically, I occassionally do not want the one inch border around some images (such as those on my home page http://totalphysiqueonline.com/

    I want to remove the 1px border from the images, and I was wondering how best to do that. I have tried inline styles and that did not work. Either I did not code it correctly, or my aproach needs to be a different one.

    Any suggesions, or does my question need clarification?

    Thanks in advance.
    • CommentAuthorrefueled
    • CommentTimeJan 3rd 2007
     
    Is this what your looking for:

    .entry img, .entrytext img {

    border: none;

    margin: 5px;

    padding: 5px;

    }



    .entry a:hover img, .entrytext a:hover img {

    border: none;

    padding: 5px;

    }
    •  
      CommentAuthorainslie
    • CommentTimeJan 3rd 2007
     
    1 inch border?

    If you look around line 328 of the style sheet you will see the following css:

    .entry img, .entrytext img {
    border: 1px solid #b0b0b0;
    margin: 5px;
    padding: 5px;
    }

    .entry a:hover img, .entrytext a:hover img {
    border: 1px solid #505050;
    padding: 5px;
    }

    That puts the border around all the images and if you change it as refueled has said it will remove the borders from all images in your posts and pages.

    But as I understand you only want some images without borders so I suggest you make a more specific class to add to your images to override the current css like this:

    img.noborder {
    border: none;
    }

    and then add class="noborder" to the images that you do not want to have a border.

    You will have to open up the html editor and insert the class manually to each image though.
    • CommentAuthor4evrblu
    • CommentTimeJan 3rd 2007 edited by 4evrblu on the 03rd January 2007 at 20:41:15 EST
     
    OK, Ainslie, great suggestion.

    I imagine we are looking for something like this

    <div class="noborder"><a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=213"><img border="0" alt="Firefox 2" title="Firefox 2" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png"/></a></div>

    right? And yes, the style was added to my style sheet, and here it is

    img.noborder {
    border: none;
    }

    Oddly enough it did not work.

    I tried

    .noborder img{
    border: none;
    }

    as well

    For some reason, it did not work. And the reason is the closing image tag was not correct and the syntax was somewhat goofy.

    <div class="noborder"><a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=213"><img border="0" src="http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-2.png" alt="Firefox 2" title="Firefox 2" /></a></div>

    <div class="noborder"><a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=177"><img src="http://sfx-images.mozilla.org/affiliates/thunderbird/reclaimyourinbox_small.png" alt="Get Thunderbird!" title="Get Thunderbird!" /></a></div>

    Now it works.
    •  
      CommentAuthorainslie
    • CommentTimeJan 4th 2007 edited by ainslie on the 04th January 2007 at 07:57:59 EST
     
    I actually meant to add the class to the image tag like this:

    <img class="noborder" src="http://... and so on.

    But if you have it working then all is ok.
    • CommentAuthor4evrblu
    • CommentTimeJan 4th 2007
     
    Oddly enough, I tried adding the class in just the way you were thinking and for some reason it did not work. Odd.
    •  
      CommentAuthorainslie
    • CommentTimeJan 4th 2007
     
    Oh well.

    It worked on my version but if you are sorted all is well.

1 to 7 of 7

  1.