Styling Specific Images with NO BORDER

[GR8FL]

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.

[scrambler]

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.

[GR8FL]

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

[scrambler]

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

[GR8FL]

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. 

[Author]

Posts