WordPress.org

Ready to get started?Download WordPress

Forums

WP Classic sidebar CSS figured out (maybe) (2 posts)

  1. BillRamby
    Member
    Posted 9 years ago #

    Please correct me if I got something wrong.
    *************************************************************
    #menu {
    /* Background color of sidemenu
    */
    background: #800000;
    /* Don't know, nothing I change seems to affect it.
    */
    border-left: 3px single #000;
    /* Top border space, setting px higher gives the impression of a color block between the header and the actual start

    of the sidemenu.
    */
    border-top: solid 0px #fff;
    /* space before the first text entry of the side menu in 4 parts. The first point is space between the top start point

    of the sidemenu background and the top of the menu text. The second point seems to turn spacing on/off. The third

    point is space between the bottom text of the sidemenu and the bottom of the menu itself. Set to 100%, the sidemenu

    goes all the way down to the footer. The fourth point is the space between the left border and the beginning of the

    menu text.
    */
    padding:20px 0 10px 30px;
    /* Positions the sidemenu statically on the page so it doesn't get affected by the rest of the page.
    */
    position: absolute;
    /*Horizontal space from right side of page
    */
    right: 2px;
    /* Vertical Start point of sidemenu
    */
    top: 78px;
    /* Width of side menu
    */
    width: 11em;
    }

    #menu form {
    /* First point used to space the searchbox form vertically from the Menu text directly above it. Second point used to

    margen from the right side of the menu area. Third point is used for spacing between the form bottom (input and search

    button) and the next Menu text (first level) entry. Fourth point used to indent (move) the searchbox to the right of

    the menu text (first level).
    */
    margin: 0 0 0 13px;
    }

    #menu input#s {
    /*Controls the width of the searchbox input field
    */
    width: 80%;
    /*Background color of the seachbox input form
    */
    background: #eee;
    /*Border of the searchbox form in three parts. First part is the thickness of the border. Second part is the type of

    outline. Third part is the color of the outline.
    */
    border: 1px Solid #999;
    /*Color of the text input for the searchbox form.
    */
    color: #000;
    }

    #menu ul {
    /*Sidebar Menu first level color.
    */
    color: #CCC;
    /*Sidebar Menu first level thickness (normal/bold/bolder/lighter/100-900).
    */
    font-weight: bold;
    /*Contols the appearance of the Menu (first leve). Some options are none/disc/circle/square/decimal
    */
    list-style-type: none;
    /*Margen space from left of sidebar to beginning of menu text (first level)
    */
    margin: 0;
    /*Somewhat like margin but implemented after margin
    */
    padding-left: 3px;
    /*Determines text type of menutext (first level). Options are none/capitalize/uppercase/lowercase
    */
    text-transform: lowercase;
    }

    #menu ul li {
    /*Menu text (first level). Pretty self explanatory.
    */
    font: italic normal 110% 'Times New Roman', Times, serif;
    /*Spacing between each letter of Menu text (first level). Options are normal/length. As used here length=0.1em.
    */
    letter-spacing: 0.1em;
    /*Margin between each first level catagory. This means from the bottom of a section (first level and and second level)

    to the top of the next section.
    */
    margin-top: 10px;
    /*Much the same as margin, but acted on after margin. In other words margin=10PX plus padding-bottom=10px would equal

    20 px space between Menu netry 1 and menu entry 2.
    */
    padding-bottom: 2px; /*border-bottom: dotted 1px #ccc;*/
    }

    /*Second level font settings
    */
    #menu ul ul {
    /*Set text case for second level. Options are normal/small-caps
    */
    font-variant: normal;
    font-weight: normal;
    /*Second level text height.
    */
    line-height: 100%;
    /*Second level bullet style.
    */
    list-style-type: none;
    /*Margin for second level text
    */
    margin: 0;
    /*Spacing between first level entry and second level list start
    */
    padding: 0;
    /*Align second level menu text to the right margin.
    */
    text-align: left;
    }

    #menu ul ul li {
    border: 0;
    font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    letter-spacing: 0;
    margin-top: 0;
    padding: 0;
    padding-left: 13px;
    }

    #menu ul ul li a {
    /*Second level text color
    */
    color: #CCC;
    /*Controls how second level text is shown. Options none (normal)/underline/overline/line-through/blink (netscape)
    */
    text-decoration: none;
    }

    #menu ul ul li a:hover {
    /*When you hover your mouse ove a second level link defined in three parts. Part one; Thickness of underline. Part

    two; type of underline. Options are none/dotted/dashed/solid. Part three is colorof the hover text.
    */
    border-bottom: 1px solid #809080;
    }

    /*I think this is thrid level text, but not sure.
    */
    #menu ul ul ul.children {
    font-size: 142%;
    padding-left: 4px;
    }

  2. BillRamby
    Member
    Posted 9 years ago #

    Oh, and thanks to ElasticDog's sandbox for letting me experiment without hosing my site while figuring it out.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.