Home Forums Weaver Xtreme Theme Styling Specific Images with NO BORDER

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17533
    GR8FL
    Participant
    I asked this originally in http://forum-archive.weavertheme.com/discussion/11341/remove-border-around-some-images – but it may have gotten lost in confusion with other issues. Going to try to make this very simple.

    My default image border as setup in Content Areas > Image Border Color +CSS Box is:
    {border: .05px solid #525252;
    padding: 0px;
    -moz-box-shadow: 3px 3px 8px #2e2e2e;
    -webkit-box-shadow: 3px 3px 8px #2e2e2e;
    box-shadow: 3px 3px 8px #2e2e2e;}

    However, for some images, I do not wish for any border or background.  This is especially true with transparent png images.

    In Weaver Pro II, I had this in the Head > CSS: img.noborder {border: none !important;}
    In the html that used the image, I added noborder to the class. For example: <img src=”path/imagename.png” width=”290″ height=”100″ class=”alignright noborder” />. I could even nest other classes, for example, “my-img-clear” to prevent any wrapping on smaller browser.

    In Xtreme, this doesn’t work so well and what I found was the only way to get rid of the default border was to create a class that also used the styles from WordPress classes for alignright, aligncenter, & alignleft.  I ended up creating the following for Xtreme in the CSS:
    #content img.r-noborder {float: right; margin: 0 0 1em 1em; border: none !important;}
    #content img.l-noborder {float:left; margin:0 1em 1em 0; border: none !important;}
    #content img.c-noborder {display: block; margin-left: auto; margin-right: auto; border: none !important;}

    And in the html I replaced class =”alignright” with class =”r-noborder”.

    This then rendered the plugin “Align RSS Images”, which depends on WordPress built-in align classes to work incorrectly. All images were aligned left, no matter what was called in the html. This is a nice & simple plugin that I use ensure that all images are correctly aligned and set with proper margins in the RSS feed which in turn is used to auto-populate a MailChimp RSS-based template. 

    I temporarily “fixed” this by editing the plugin php file, but this should not be the final work-around. If they update this plugin, my changes will be lost. 

    I don’t understand why I cannot combine alignright (or left or center) with “noborder” and have it work. I have no problems combining alignright (or left or center) with the class “my-img-clear”, just as I was able to in Weaver Pro.

    Hoping this can be resolved….

    Thank you.
    #20889
    scrambler
    Moderator

    Let us go back to basics here.

    If you want to remove only the border (not the shadow) that is created by the CSS you have in the borde CSS+ box

    {border: .05px solid #525252;
    padding: 0px;
    -moz-box-shadow: 3px 3px 8px #2e2e2e;
    -webkit-box-shadow: 3px 3px 8px #2e2e2e;
    box-shadow: 3px 3px 8px #2e2e2e;}

    Then you should only need a noborder class defined by
    img.noborder {border: none !important;}

    and place the noborder class on the image tag.

    If you have done that on a specific image and it does not work, then we need to get a link to the page with specifics about the image in question so we can find out why that is. You should not have to mess with anything else.
    #20890
    GR8FL
    Participant

    I want to remove border and shadow. I am calling it noborder.

    #20891
    scrambler
    Moderator

    Then the rule should be

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

    If with the rule defined as is in Main Options > Fonts & Custom > Custom CSS Rule box, an image carrying the class noborder  still shows a border, provide a link with specifics about which image

    #20892
    GR8FL
    Participant

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


    Should have figured that out from the beginning, but it worked without it in Weaver Pro, so I looked elsewhere for more complicated (and frustrating) solutions. 



Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.