Need help? Check out our Support site, then


Coloured borders around images

  1. jordantheheadcase
    Member

    Hi there.

    I'm a complete beginner at CSS and although I've had a go and managed to do a couple of things, I'm now completely stuck. I want to experiment with a coloured border around an image or two and I'm trying first with the image on my header. Here is the CSS code that I thought would give me a red border (or at least using the same colour as my links):

    img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: #ba0707
    }

    When I press 'Save' it doesn't change anything at all. Can someone help please? Also is there a way of previewing changes because all I can see how to do is either 'Save' or 'Cancel'! Sorry if these are rookie questions; but the fact is I am indeed a rookie! Many thanks!

    The blog I need help with is jordantheheadcase.wordpress.com.

  2. 1) Each theme uses different selectors. "img.aligncenter" isn't taken from the CSS of Bueno.
    2) Still, it's a very general selector, so it would work in Bueno, but not for the header image: the header image isn't centered (it's just a full-width image inside the header area), and it has its own selector.
    3) When you want to change something, you add only the relevant rule(s). The "display" rule and the "margin" rules in the above code are what make a centered image centered, and they are already present in the original CSS of the theme, so you don't repeat them: if you only want to change the border, you add the border rule(s) only.

    So, to change the border of the header image, add this in the CSS editor (it will also allow you to change the thickness and/or the style of the border, if you wish):

    #header-image img {
    border: 5px solid #BA0707
    }

    See this post of mine too, for some general advice and resources:
    http://wpbtips.wordpress.com/2013/02/21/where-is-the-theme-css-and-how-do-i-edit-it/

  3. Sorry, forgot the semicolon:

    #header-image img {
    border: 5px solid #BA0707;
    }
  4. jordantheheadcase
    Member

    Thankyou so much! It worked fine. In fact I've been reading through a lot of your advice posts and they're fantastic. Thanks so much for the help; I was on the verge of headbutting my laptop earlier!

  5. jordantheheadcase
    Member

    Actually, one more question! I tried the Featured Article widget which is great, but I don't actually like the borders that are being generated on the thumbnail pictures; they're ever so thick. I had a look at the CSS but I can't see where that is. Is there any way of reducing the thickness or taking the coloured border away altogether on the little pics? It's too much. Many thanks (again).

  6. You're welcome.
    Agree, that border is too thick for thumbnails that are so small. Paste this in the CSS editor:

    .widget-bueno-featured span.thumb img {
    border: 5px solid #123456;
    }

    Change the numbers to decrease the thickness and change the color. For color palettes and hex numbers you can consult this page:
    http://www.december.com/html/spec/color.html

    Or paste this to remove the border altogether (but I don't think this is the best solution):

    .widget-bueno-featured span.thumb img {
    border: none;
    }

    As I'm saying in the post I linked to, you'll be able to answer such questions yourself if you learn to use Firebug in Firefox.

  7. jordantheheadcase
    Member

    Hi, sorry for the delayed reply to that. Tried all you suggested and it all worked so many thanks. I've got Firebug and am learning to use it so hopefully I'll feel a bit more competent soon!

Topic Closed

This topic has been closed to new replies.

About this Topic