[resolved] adding custom css for a page (4 posts)

  1. Drew Hart
    Posted 3 years ago #

    I would like to add the following css and only have it work on pages:

    #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
    #navlist li, #navlist a{height:44px;display:block;}
    #home{background:url('img_navsprites.gif') 0 0;}
    #prev{background:url('img_navsprites.gif') -47px 0;}
    #next{background:url('img_navsprites.gif') -91px 0;} 
    #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
    #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

    Any help on how I should format it and add it to the 2011 Style CSS would be appreciated. Many thanks in advance,


  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    You can implement a Child Theme, or more easily a Custom CSS plugin.

  3. Michael
    Forum Moderator
    Posted 3 years ago #

    Twenty Eleven uses body_class() and therefore has a page (static page) specific css class .page in the body tag.

    add this .page to each of your css selectors to make them page specific;


    .page #navlist{position:relative;}

    do not edit Twenty Eleven directly, but create and work with a child theme http://codex.wordpress.org/Child_Themes

  4. Drew Hart
    Posted 3 years ago #

    Thanks for the info - I think I will use the .page method in a child theme. Thanks again,


Topic Closed

This topic has been closed to new replies.

About this Topic