Previous | Next

Edit style.css

  1. Create a new ID for the "#admin_menu_anim object"
    Find:
    .admin_menu a:hover {
            color: #000000;
            text-decoration: underline;
    }
    
    Add after it:
    td #admin_menu_anim {
            background-image : url(images/button_bg_anim.gif);
    }
    
  2. Copy the file "button_bg_anim.gif" from "themes/classic/images" to the theme's "images" directory.
  3. Create a new class for the "thumb_filename" class.
    Find:
    .thumb_title {
            font-weight : bold;
            font-size: 80%;
            padding: 2px;
            display : block;
    }
        
    Add before it:
    .thumb_filename {
            font-size: 80%;
            display: block;
    }
        
  4. Remove the proprietary value "hand" for class ".clickable_option"
    Find:
    .clickable_option {
            border-bottom : 1px dotted blue;
            cursor : hand;
    }
    
    Replace with:
    .clickable_option {
            border-bottom : 1px dotted blue;
            cursor : default;
    }
    
  5. Add the style information for the vanity roll-over graphics
    Insert at the bottom of style.css
    #vanity a {
            display:block;
            width:57px;
            height:20px;
            margin: 3px 20px;
    }
    #vanity img {border:0}
    #v_php {float:left;background-image:url(../../images/powered-php.gif);}
    #v_php:hover {background-image:url(../../images/h_powered-php.gif);}
    #v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
    #v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
    #v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
    #v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
    #v_css {float:right;background-image:url(../../images/valid-css.gif);}
    #v_css:hover{background-image:url(../../images/h_valid-css.gif);}
  6. Add the "catrow_noalb" class. It is used for rows that do not contain albums and was based on "tableh2". In order to maintain your themes look simply add it to "tableh2" selector.
    Find:
    .tableh2 {
    background: #D1D7DC ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    }
    Replace with:
    .tableh2, .catrow_noalb {
    background: #D1D7DC ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    }
  7. Add the "catrow" and "display_media" classes which are both based on "tableb". "catrow" styles the category rows on the index page and "display_media" styles the background color of the intermediate image on the displayimage page.
    Find:
    .tableb {
    background: #EFEFEF ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    }
    Replace with:
    .tableb , .display_media , .catrow {
    background: #EFEFEF ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    }
  8. Validate the style sheet: http://jigsaw.w3.org/css-validator
    Make changes as necessary.