WordPress.org

Support

Support » Themes and Templates » borders around cats on sidebar

borders around cats on sidebar

  • Hi,

    How would I put a border around each element of the sidebar? (ex, pages, calendar, etc.)

    I would like this border to be dotted and black or gray.

    If you can just point me in the rigth direction, or have some code samples, that would be great.

    Thanks, th3gh05t

Viewing 9 replies - 1 through 9 (of 9 total)
  • adding something like this:
    border:2px dotted #000000;

    to the #sidebar ul li area of the style.css for the theme you are using will get you started.

    Also the codex is a great read for this type of thing. http://codex.wordpress.org/Styling_lists_with_CSS

    Best bet would be to enclose each ‘element’ into a div. In this case you would want to create a class, so that you could use it many times on one page. Maybe call it: <div class="sidewrap"></div>

    .sidewrap {
    border:1px dotted #ccc}

    You will probably want to also add padding and/or margin values to get your .sidewrap style more visually satisfying on the page.

    Its unnecessary. CSS cat selectors are built in.

    I always forget that not everyone has cats turned off like me :} Like Mat says, check the theme you are using.

    Theme makes no difference. Just style in the CSS.

    Thanks for all of your replys!

    As soon as I start editing, and run into problems, I will let you guys know.

    Thanks again!

    Ok. This is as far I have gotten. I have figured out how all of the ul,ol, and li works with the CSS.

    I am so close.

    Here is the CSS:

    #sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    border:2px dotted #ccc;
    }

    But it also puts a border around the third tier of ‘li’ and it should not.

    I am modifying the default template.

    Thanks, th3gh05t

    someone please help me..

    Hi,

    I decided to put each element into divs, but it didn’t turn out I had hoped for, in Internet Explorer. I have only used Firefox other than IE, and wondering if someone can site check this for me.

    http://www.pumpupthevalium.com

    Here is the CSS I used for the div:


    #sidebar .sidewrap {
    border: 2px dotted #ccc;
    margin-bottom: 10px;
    margin-top: 10px;
    }

    And some HTML output:


    <div class="sidewrap">

    <li><h2>Theme Switcher</h2>
    <ul>
    <li class="ts_current_theme"><a href=#=default'>blue</a></li>
    <li ><a href='#=green'>green</a></li>
    <li ><a href='#=red'>red</a></li>
    </ul>
    </li>
    </div>

    <div class="sidewrap">

    <li><h2>Author</h2>
    <b>derek</b> - This is where you find information about me.

    <b>location</b> - los angeles, ca
    </li>
    </div>

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘borders around cats on sidebar’ is closed to new replies.