WordPress.org

Ready to get started?Download WordPress

Forums

borders around cats on sidebar (10 posts)

  1. th3gh05t
    Member
    Posted 9 years ago #

    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

  2. mat
    Member
    Posted 9 years ago #

    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

  3. Kiddeath91
    Member
    Posted 9 years ago #

    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.

  4. Root
    Member
    Posted 9 years ago #

    Its unnecessary. CSS cat selectors are built in.

  5. Kiddeath91
    Member
    Posted 9 years ago #

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

  6. Root
    Member
    Posted 9 years ago #

    Theme makes no difference. Just style in the CSS.

  7. th3gh05t
    Member
    Posted 9 years ago #

    Thanks for all of your replys!

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

    Thanks again!

  8. th3gh05t
    Member
    Posted 9 years ago #

    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

  9. th3gh05t
    Member
    Posted 9 years ago #

    someone please help me..

  10. th3gh05t
    Member
    Posted 9 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.