Dotted line around posts and widgets

  • Author
    Posts
  • #985366

    lafraiserie
    Member

    I would like to replace the rounded shape of my posts and widgets with a square shaped dotted line, how would that be possible ?

    Thanks a lot

    The blog I need help with is chefmignonnette.com.

    #985471

    zandyring
    Staff

    Hi there,
    add this to your CSS stylesheet:

    .widget-area .widget {
        background-color: #E5E1D6;
        border-radius: 0 0 0 0;
        border: 2px dotted #000000;
    }

    I left in the background color in case you planned on changing that. You can change the width of your border by adjusting the “2px” portion, the “dotted” changes the line from “solid” to dotted, and the #000000 is black. You can tweak all of these to get the effect you want. Border Radius is the corner effect. When those numbers go up, your corners get more or less rounded. They need to be displayed like “10px 10px 10px 10px;” (with “px”) but they don’t all have to be the same. You can come up with some fun little effects using this. If you don’t want to see it, set them all to zero (so it overrides the current style) and you’re good to go.
    Good luck!
    -Z

    #985472

    zandyring
    Staff

    Sorry, I ignored your “and posts” part. Adjust this code to match the code you use above.

    div.post {
        background-color: #E5E1D6;
        border: 2px dotted #000000;
        border-radius: 0 0 0 0;
    }

    #985478

    lafraiserie
    Member

    Hi ! Thanks so much for your help ! Actually, I planned on leaving everything in white. I will try that !

    #985603

    zandyring
    Staff

    If you don’t already know, white is #FFFFFF;
    Good luck!

    #985606

    zandyring
    Staff

    Also, I just checked out your site again, and if you want a little space between the dotted lines and your widget info, add padding. To the .widget-area .widget selector you targeted above, add this:
    padding: 2px;

    To add space between the individual boxes, add margin. After your padding above, add this:
    margin: 2px;
    You can increase or decrease those as you see fit – they don’t have to be the same. If you like it as-is, you’re all set already!

    #985669

    Dear Zandyring,

    I tried both of your suggestions as I’m trying to either put a border around my posts or a border around my widgets, but neither worked. My website is http://www.paltrymeanderings.com. Is there anyway you can help me. You seem to know what you’re doing. The theme is Blaskan. Thanks so much.

    CCL

    #985671

    zandyring
    Staff

    CCL – check your other post – I showed you specific CSS for your theme there. Each theme has specific CSS, so cross CSS-ing usually doesn’t work, unfortunately. Once you get the basics down, however, you get an idea of how to modify stuff to suit what you have.

    #985673

    Thanks again. Last night was the first time I’ve ever attempted to write code in my life. I’ve never even taken a computer class. Still, I’m pretty proud that I managed to make a bunch of changes on my own – and really grateful to people like you who know what you’re doing.

    #985674

    BTW, to thank you, I’m creating a blogroll page and adding your blog to it! I really do appreciate your help. :)

    CCL

    #985675

    zandyring
    Staff

    I’m so glad I could help! And thank you :)

The topic ‘Dotted line around posts and widgets’ is closed to new replies.