Posted 2 years ago #
On my site http://www.recordmyfamilyhistory.com I have uploaded and inserted images (an ebook cover and payment buttons). All of these images have a border around them looking like they have been cut and pasted. Not very professional looking.
I received some advice from elsewhere saying to add the code below to my images, but i was unsure where to add this code, and I played around with it with no luck..
border="0"
Any ideas very appreciated! Thank-you.
Posted 2 years ago #
add this to your css:
img{
border-width:0px;
}if you want to keep the border on other images add a class like this:
img.noborder{
border-width:0px;
}Hope this helps.
Posted 2 years ago #
Around line 98 of your style.css file you will fine this:
img {
background-color:#FFFFFF;
border:1px dashed #E3C2FB;
padding:5px;
}The 'border' property is what you need to edit ... you can comment it out like this:
img {
background-color:#FFFFFF;
/* border:1px dashed #E3C2FB; */
padding:5px;
}... or change it to this:
img {
background-color:#FFFFFF;
border:none;
padding:5px;
}... or simply remove the 'border' property line altogether. I would use the commenting method myself.
You might also consider adding to the end of the style.css file this bit to remove the dotted lines under your clickable images:
img a {text-decoration:none;}
Posted 2 years ago #
cais,
hi I have dotted lines under my images too but when I pasted the code you suggested (see below) into my .CSS file the dotted lines still remained. Can you please tell me where "exactly" to paste the code into my CSS and is this all of the code I need?
Thanks.
img a {text-decoration:none:}
Posted 1 year ago #
I want to be able to delete the border of a certain image(s), but not the border of all images. How can I do this? I tried creating a class ".noborder {border: none;}," and then adding this class to the img tag, but that doesn't work.
Please help.
the images might have an attachment id or image class with which you can address them in style.css.
something like .wp-image-193
check the html code of your site in the browser, and see if you can find these classes.
Posted 1 year ago #
I did. Just shows the DIV I created to wrap the image in. The image itself has no class. Not sure what to do. Going nuts over this.
Just shows the DIV I created to wrap the image in.
if you created a div, you can add a class to this div ( <div class="special"> ) and then format the image using that class
.special img { border:none; }
( in extreme you could try and force the style: 'border:none!important;' )
and remember to clear the browser cache by pressing the 'reload' button, or CTRL and F5 at the same time.
Posted 1 year ago #
@alchymyth: Thanks so much for responding. Naturally I tried that but that didn't work. It's the most bizarre thing. I have not tried with 'border: none!important;' though, so I'll do that now. Thanks again for responding.
you could post a link to your site where the image with border can be seen.
if it is a linked image in your special div, you could try:
.special a img {border:none;}
if you don't want to (or can't) post a link, you could post the code from the browser, covering a few lines before and after the image.
Posted 1 year ago #
Actually you're awesome! I applied the style you suggested, "border: none!important" and it worked! I never heard of adding "!important," to the value, but I guess all that means is that I have to brush up on my CSS. It sucks that I'll have to use this style or a similar style (.special img {border: none!important;}) to remove borders from images, but I was desperate for this fix so whatever.
Right now I have one of those "temporarily out of order" pages hiding my site, but if you really want to see what's up let me know and I'll take it down for a day. Thanks again for the help tho. I really appreciate it.
This topic has been closed to new replies.
