Remove Image Borders from Mistylook

dollyewing · Member · Jan 7, 2009 at 10:07 pm
Copy link

Add topic to favorites
I am inexperienced in CSS so please bear with me. I am trying to remove the borders (drop shadow) from the Mistylook theme as follows:

}
.entry img
{
background:none;
padding:4px 10px 10px 4px;
border:none;
border-top:none;
border-left:none;
}
.entry a img {
border:none;
background:none;
padding:none;
background:none;
padding:4px 10px 10px 4px;
border-top:none;
border-left:none;
}

However, when I save the revisions, my header image disappears and also the icons for posts and comments. I think it is because setting the background to none is removing the background image for the header. There doesn’t seem to be a separate class for images within the main body.

Can anyone assist … please?
thesacredpath · Member · Jan 7, 2009 at 11:22 pm
Copy link
Can we get a link to your wordpress.COM blog please?
dollyewing · Member · Jan 7, 2009 at 11:27 pm
Copy link
Thank you … yes of course … http://dollyewing.wordpress.com/. Please note that the blog currently uses the default CSS.
thesacredpath · Member · Jan 7, 2009 at 11:40 pm
Copy link
Where you want to make your change is in .entry img .

change “background to none and change “border-width to 0. In other words add the .
```
.entry img {
background:none;
border-width:0;
}
```
thesacredpath · Member · Jan 7, 2009 at 11:42 pm
Copy link
In the above that you posted, you have a closing } right after .entry img which is ending things before you define the values.
thesacredpath · Member · Jan 7, 2009 at 11:44 pm
Copy link
The other thing is, that you have to set “border-width” to 0 rather than “border” or the “border width” will still be in the original CSS and will still apply.
dollyewing · Member · Jan 8, 2009 at 12:43 am
Copy link
Hmmmm … I’ve tried it and unfortunately I’m still losing the header image and Posts and Comments icons. To clarify I replaced the following:

.entry img
{
background:url(img/shadow.gif) no-repeat right bottom;
padding:4px 10px 10px 4px;
border:none;
border-top:#eee 1px solid;
border-left:#eee 1px solid;
}

with the following:

.entry img {
background:none;
border-width:0;
}

I thought it might be a Mozilla issue and checked in IE but its not working in there either. Incidently, the layout in IE is a mess (not surprising with IE 7 though?).
thesacredpath · Member · Jan 8, 2009 at 1:57 am
Copy link
When you add new CSS with the CSS upgrade, the header image URL has to be put directly into the CSS. Whatever was uploaded with the customer header function in the dashboard is no longer linked. You have to upload it to the media library and then put the URL of that image into the header section in the CSS.

My suggestion when working with CSS here at wordpress.COM is always to only put the stuff that you are changing into the edit window and leave everything that remains the same out and then use the “add to existing CSS”.

In other words just add this to the edit window with the add to existing stylesheet selected.

.entry img {
background:none;
border-width:0;
}

I’ve put the above changes into your CSS using Firebug and the borders go away from the images. The comments link remains since it is not controlled by that section of the CSS.

No items found.