File: /home/freeval/public_html/e-cards/docs/theme/edit_style.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Edit style.css</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta name="language" content="en" />
<meta name="author" content="Coppermine dev team" />
<meta name="copyright" content="Coppermine dev team" />
<meta name="description" content="Coppermine Photo Gallery project - Theme Upgrade Documentation" />
<!-- CVS version info: $Id: edit_style.html 4090 2007-11-29 12:56:01Z gaugau $ -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="start" href="index.html" title="Theme Upgrade Home" />
<link rel="end" href="validation.html" title="Validation" />
<link rel="prev" href="index.html" title="Theme Upgrade Home" />
<link rel="next" href="edit_template.html" title="template.html" />
</head>
<body>
<div class="globalNav">
<a
href="index.html">Theme Upgrade Home</a><font
class="globalNavSelect">» style.css</font><a
href="edit_template.html">template.html</a><a
href="edit_theme.html">theme.php</a><a
href="validation.html">Validation</a>
</div>
<a href="index.html">Previous</a> | <a href="edit_template.html">Next</a>
<!-- end nav links -->
<h2>Edit style.css</h2>
<ol>
<li>
Create a new ID for the "#admin_menu_anim object"
<h6>Find:</h6>
<pre>.admin_menu a:hover {
color: #000000;
text-decoration: underline;
}
</pre>
<h6>Add after it:</h6>
<pre>td #admin_menu_anim {
background-image : url(images/button_bg_anim.gif);
}
</pre>
</li>
<li>Copy the file "button_bg_anim.gif" from "themes/classic/images" to the theme's "images" directory.</li>
<li>Create a new class for the "thumb_filename" class.
<h6>Find:</h6>
<pre>.thumb_title {
font-weight : bold;
font-size: 80%;
padding: 2px;
display : block;
}
</pre>
<h6>Add before it:</h6>
<pre>.thumb_filename {
font-size: 80%;
display: block;
}
</pre>
</li>
<li>
Remove the proprietary value "hand" for class ".clickable_option"
<h6>Find:</h6>
<pre>.clickable_option {
border-bottom : 1px dotted blue;
cursor : hand;
}
</pre>
<h6>Replace with:</h6>
<pre>.clickable_option {
border-bottom : 1px dotted blue;
cursor : default;
}
</pre>
</li>
<li>
Add the style information for the vanity roll-over graphics
<h6>Insert at the bottom of style.css</h6>
<pre>#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);}</pre>
</li>
<li>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.
<h6>Find:</h6>
<pre>.tableh2 {<br /> background: #D1D7DC ;<br /> color : #000000;<br /> padding-top: 3px;<br /> padding-right: 10px;<br /> padding-bottom: 3px;<br /> padding-left: 10px;<br />}</pre>
<h6>Replace with:</h6>
<pre>.tableh2, .catrow_noalb {<br /> background: #D1D7DC ;<br /> color : #000000;<br /> padding-top: 3px;<br /> padding-right: 10px;<br /> padding-bottom: 3px;<br /> padding-left: 10px;<br />}</pre>
</li>
<li>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.
<h6>Find:</h6>
<pre>.tableb {<br /> background: #EFEFEF ;<br /> padding-top: 3px;<br /> padding-right: 10px;<br /> padding-bottom: 3px;<br /> padding-left: 10px;<br />}</pre>
<h6>Replace with:</h6>
<pre>.tableb , .display_media , .catrow {<br /> background: #EFEFEF ;<br /> padding-top: 3px;<br /> padding-right: 10px;<br /> padding-bottom: 3px;<br /> padding-left: 10px;<br />}</pre>
</li>
<li>Validate the style sheet: <a href="http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator</a>
<h6>Make changes as necessary.</h6>
</li>
</ol>
<div id="footer" style="border-top: 1px solid gray; margin-top: 30px; padding-top: 10px;">
<a href="index.html">Previous</a> | <a href="edit_template.html">Next</a>
<div class="globalNav">
<a
href="index.html">Theme Upgrade Home</a><font
class="globalNavSelect">» style.css</font><a
href="edit_template.html">template.html</a><a
href="edit_theme.html">theme.php</a><a
href="validation.html">Validation</a>
</div>
<!-- end nav links -->
</div>
</body>
</html>