Remove Border Around Some Images

[GR8FL]

In the Content Areas > Image Border Color +CSS Box, I have the following: 

{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;}

For some images, I don’t want any border – they especially look bad for transparent ones.

In Weaver Pro, I added this to my CSS: img.noborder {border: none !important;} and used the class “noborder” in the text editor.

This doesn’t seem to work in XTreme. Though I was able to eliminate borders around images by checking off the box to only use images from the media library, all the images that I use have a border. 

[scrambler]

the principle is the same. You may need to specialize the selector to make your rule win like

#content img.noborder {…}

If you have it in place and it does not work, you need to look with your browser developer tool to make sure you rule is there and check what rule is overriding it.

[GR8FL]

I resolved this. Had to go to Firefox and use developer tools, since Chrome’s stopped working.

The problem had to do with WordPress built-in class for aligning images whenever using the media insert feature. While this worked in Weaver Pro 

<img src=”MYPICTURE class=”aligncenter noborder” />, it failed in Xtreme. This would be same for alignleft class and alignright class.

From the info on WordPress Codex page for wrapping text around images: http://codex.wordpress.org/Wrapping_Text_Around_Images, I made three no border classes:

#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;}

In the html in the page editor, instead of the above example, I now use <img src=”MYPICTURE class=”c-noborder” /> and the same works for left aligning or right aligning.

[scrambler]

assuming the correction of the closing quote on img src attribute

<img src=”MYPICTURE” class=”aligncenter noborder” />

Should work if the noborder class is properly define (proper selector, and/or using !important.

If it does not, you should give us a page with it setup so we can tell you what is wrong.

There is no need for you to recreate all the alignment classes

[GR8FL]

As soon as I can get this page ready for the public I can give you the URL.

Still having issues with this because I would like to have the container_top images not have a default border.

Most all pictures will have borders, but the ones that have transparent backgrounds won’t.

If you want to go see the page from the admin login, it’s the same as what I gave you in a private message. The image that I don’t want any border can be found on the one and only blog post.

If you want to wait a few more days, then this will have to wait until I can have it not under mainteance.

[scrambler]

To remove the borders in the container top, you can use

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

[GR8FL]

awesome!

Have I wished you happy Valentine’s Day?

I think not.

So here we go…

.

.

.

.

.

Happy Valentine’s Day, Scrambler !

[scrambler]

🙂

[GR8FL]

I am revisiting this again, because it is not working properly, when it goes from RSS to MailChimp. 

In Weaver Pro, all I had to do was add a class: img.noborder {border: none !important;}

In the html editor, I added noborder to the class (just the same way I can add my-img-clear CSS).

It doesn’t work in Xtreme the same way and even trying to MAKE it work, either it doesn’t take away the border, or my plugin which depends on WordPress built in align classes, only aligns left.

Below is several of the CSS I have used to try just for aligning right with no border.

#content img.r-noborder {float: right; margin: 0 0 1em 1em; border: none !important;}

content img.none {border: none !important;}

#content img.noborder {padding:0 !important; border:none !important;background-color:transparent !important;}

And the html:

<img src=”http://lavenderfieldsde.com/wp-content/uploads/Soap_Order_Online.png&#8221; alt=”Soap_Order_Online” width=”290″ height=”100″ class=”alignright r-noborder my-img-clear” />

or class=”alignright noborder my-img-clear” />

or class=”alignright none my-img-clear” />

Only thing that works is this combination

CSS: #content img.r-noborder {float: right; margin: 0 0 1em 1em; border: none !important;}

html: class=”r-noborder my-img-clear”” /> AND THEN IN RSS it is aligned left.

Site: http://lavenderfieldsde.com/happy-spring/

FEED: http://lavenderfieldsde.com/feed/

You can see Feedburner: http://feeds.feedburner.com/LavenderFieldsAtWarringtonManor/

Currently it is <img src=”http://lavenderfieldsde.com/wp-content/uploads/Soap_Order_Online.png&#8221; alt=”Soap_Order_Online” width=”290″ height=”100″ class=”my-img-clear r-noborder” />

[Author]

Posts