Jump to content

No Borders For Particular Images


netsujit
 Share

Recommended Posts

In my CSS based theme.... every image has borders by default.I know how to give 'no borders' for a particular single image or two.But i want to know how give 'no borders' to images of a particular folder or directory.Suppose... if i want to give no borders for all the images from the folder "mydomain.com/abc/images/"then what code should i use???

Link to comment
Share on other sites

The following selector will select all images with the path "abc/images" inside their source - this will match "abc/images/path.png" but also "foo/abc/images/blah.jpg".

img[src*="abc/images"] { ... }

http://www.w3.org/TR/css3-selectors/#attribute-substringsEdit: however, this is CSS3, so don't expect universal support. There is no other way, though, using pure CSS.

Edited by Synook
Link to comment
Share on other sites

In my CSS based theme.... every image has borders by default.I know how to give 'no borders' for a particular single image or two.But i want to know how give 'no borders' to images of a particular folder or directory.Suppose... if i want to give no borders for all the images from the folder "mydomain.com/abc/images/"then what code should i use???
Like this:
img {border: 0px;}/* or if you want to sets all <p> to have underlines */p {text-decoration: underline;}

Sorry miss read but hope this of some use anyway :)

Edited by ckrudelux
Link to comment
Share on other sites

The following selector will select all images with the path "abc/images" inside their source - this will match "abc/images/path.png" but also "foo/abc/images/blah.jpg".
img[src*="abc/images"] { ... }

http://www.w3.org/TR/css3-selectors/#attribute-substringsEdit: however, this is CSS3, so don't expect universal support. There is no other way, though, using pure CSS.

I understood ur point and got the explanation. But somehow its not working under my CSS thingy.Ok, i'll bring in the real stuff.Here's the CSS code where i need the modification.
div.post img { border:1px dashed #888888; padding:5px !important; padding:0; }img[src*=images/smilies] { border: none; !important; }
I wrote the thing u mentioned, but still its not working. Can u tell me what mistake i m doin??? :)
Link to comment
Share on other sites

What browser are you using? I think that will only work in webkit-based browsers (e.g. Safari, Chrome, Konqueror).

Link to comment
Share on other sites

you can achieve this, with javascript + dom, use document.images to search through ALL images src, and make required css style changes if the specific directory is listed within src.it works, but obviously javascript is required enabled, to work.<script type="text/javascript">var imgtotal = document.images.length;for(i=0;i<imgtotal;i++){var imgsrc= document.images.src;if(imgsrc.indexOf("/imgDirectoryName/")>-1){//alert("Image "+(i+1)+" src: "+imgsrc )document.images.style.borderStyle="none";}}</script>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...