Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] Image Border (http://forum.bytesforall.com/showthread.php?t=16611)

pgrytdal Jan 27, 2012 04:21 AM

[SOLVED] Image Border
 
Hello!

I saw a website, that had some images that were normal, then some that had a border around the outside of it. I clicked and drug the image, and noticed that the border was part of the theme, not the image.

I would like to know how to do this on my website, if that is possible!

I have already submitted this question, but I wasn't clear that both my site, and the one I saw this border on, use atahualpa. Sorry for the confusion.

Thanks!

juggledad Jan 27, 2012 04:24 AM

go look at the image settings ato->Style IMAGES

pgrytdal Jan 28, 2012 01:00 AM

I don't think that is what I'm looking for. I took a pic of the site I saw, to show you what I'm trying to do.

http://img714.imageshack.us/img714/2649/boarders.png

By the way, thank you for you're help!

juggledad Jan 28, 2012 04:50 AM

the styling of images in posts is controled by the setting at ato->Style IMAGES->Images in Posts it is a combinaton of padding, border and background color

pgrytdal Jan 28, 2012 05:27 AM

My problem is that I want to be able to have a border around most images, but have no border around some images... can I do that in ato->Style IMAGES->Images in Posts or is there a plugin that will allow me to do this?

juggledad Jan 28, 2012 05:32 AM

no, you will have to use some CSS. add a class to the images you don't want a border on...call it 'img-no-border'...then code some css to remove the border on those images. put the css in the 'CSS Inserts' option and you ahould be good to go.

pgrytdal Jan 28, 2012 11:45 PM

Something like this? (I gave the link to this thread to a friend, and he helped me)

Code:

Atahualpa Settings -> Style Images -> paste this in Images In Posts box. Hit save. You can change the border & border color as needed.

border: 1px solid #005297;
text-align: center;
background-color: #005297;
padding: 4px 4px 4px 4px;
margin: 0px 0px 0px 5px;
moz-box-shadow: 1px 1px 10px #00f;
-moz-border-shadow: 30pc;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 5px 5px 0px 0px #c5d0e0;
-moz-box-shadow: 5px 5px 0px 0px #c5d0e0;
box-shadow: 5px 5px 0px 0px #c5d0e0;}

Atahualpa settings -> ADD HTML/CSS Inserts -> paste this in CSS Inserts box. Hit save.

.customImage img{
padding: 0px;
border: none;
background: none;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0px 5px 0px 0px #c5d0e0;
-moz-box-shadow: 0px 0px 0px 0px #c5d0e0;
box-shadow: 0px 0px 0px 0px #c5d0e0;}

All images will then have a border. (If you have a website cache plugin it might not appear instantly)

If you want an image to have no border, go to edit the post or page's HTML. Look for the <img src=""> thing for the image. Before the image code starts, put <div class="customImage">. After the image code ends put </div>.

Example code for no border:

<div class="customImage"><img class="aligncenter" src="http://cpwriterstrack.x10.bz/rookie/rookietracker2.png" alt="" width="470" height="250" /></div>


juggledad Jan 29, 2012 05:13 AM

that's the idea. did you try it?

pgrytdal Jan 30, 2012 12:31 AM

Yup... and it worked... thanks!


All times are GMT -6. The time now is 01:12 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.