Theme Upgrade Home» style.css template.html theme.php Validation
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.