0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
es
/
[
Home
]
File: theme.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Themes - Coppermine Photo Gallery - Documentation & Manual</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="Coppermine comes with a powerful engine that allows you to create your own theme, giving your gallery a unique look that matches the overall layout of your entire site. Other applications call them skins or templates, well call them themes." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/es/theme.htm $ $Revision: 8154 $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation and Manual</h1> <div id="toc"> <a href="toc.htm">Table of Contents</a> </div> <div id="doc_en_only">No translation available</div> <a name="theme"></a><h1>Themes<a href="#theme" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <p>Coppermine comes with a powerful engine that allows you to <a href="theme_create.htm#theme_create">create your own theme</a>, giving your gallery a unique look that matches the overall layout of your entire site. Other applications call them "skins" or "templates", well call them "themes".</p> <p>There is a (constantly growing) number of <a href="theme_user-contributions.htm#theme_user-contributions">user-contributed themes</a> that can be previewed and downloaded from the Coppermine web site.</p> <div class="indent"> <a name="theme_builtin"></a><h2>Themes that come with Coppermine<a href="#theme_builtin" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> The Coppermine package comes with some pre-made themes: <div class="indent"> <a name="theme_builtin_curve"></a><h3>Curve<a href="#theme_builtin_curve" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <img src="../images/themes/thumb_curve.png" width="100" height="75" border="0" alt="" title="Curve" align="left" style="margin-right:5px" /> A theme with a light background and a cascaded horizontal menu that expands using CSS only. The new default theme for cpg1.5.x that has been inspired by the new theme for <a href="http://www.simplemachines.org/" rel="external" class="external">SMF 2.0</a>. The navigation menu doesn't rely on JavaScript, but is purely CSS-driven. The curve theme is the "youngest" theme inside the Coppermine core and therefore is the most modern one. It looks clean, with a lot of rounded corners and should work with most existing sites with light backgrounds. The rounded corners will not work in all browsers.<br clear="all" /> <div class="cpg_message_info"> The curve theme currently uses workarounds to display correctly in Internet Explorer 6 and 7. If this bothers you, i.e. if you're not fond of applying browser hacks and believe in coming up with valid, pure code, you're welcome to remove those browser hacks.<br /> <h4>IE6</h4> To remove IE6 support, <ul> <li>delete <tt class="code"><!-- Begin IE6 support --> ... <!-- End IE6 support --></tt> from <tt class="code">themes/curve/template.html</tt></li> <li>delete the file <tt class="code">csshover3.htc</tt> from the theme folder (<tt class="code">themes/curve/</tt>).</li> </ul> <h4>IE7</h4> To remove support for IE7, <ul> <li>delete <tt class="code"><!-- Begin IE7 support --> ... <!-- End IE7 support --></tt> from <tt class="code">themes/curve/template.html</tt></li> <li>remove all lines with <tt class="code">/* IE7 */</tt> from <tt class="code">themes/curve/style.css</tt>,</li> <li>uncomment the line <tt class="code">/* min-height: 95px; */</tt> in <tt class="code">themes/curve/style.css</tt> by replacing it with <tt class="code">min-height: 95px;</tt>.</li> </ul> </div> <a name="theme_builtin_eyeball"></a><h3>Eyeball<a href="#theme_builtin_eyeball" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <img src="../images/themes/thumb_eyeball.png" width="100" height="75" border="0" alt="" title="Eyeball" align="left" style="margin-right:5px" /> A theme with a dark background and a horizontal menu that expands for user interaction features <br clear="all" /> <a name="theme_builtin_hardwired"></a><h3>Hardwired<a href="#theme_builtin_hardwired" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <img src="../images/themes/thumb_hardwired.png" width="100" height="75" border="0" alt="" title="Hardwired" align="left" style="margin-right:5px" /> A theme with a dark background and a smallish font size that works well for narrow space and smaller resolutions. Comes with two horizontal menus <br clear="all" /> <a name="theme_builtin_rainy_day"></a><h3>Rainy Day<a href="#theme_builtin_rainy_day" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <img src="../images/themes/thumb_rainy_day.png" width="100" height="75" border="0" alt="" title="Rainy Day" align="left" style="margin-right:5px" /> A theme with dark background and rounded edges <br clear="all" /> <a name="theme_builtin_sample"></a><h3>Sample<a href="#theme_builtin_sample" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> The sample theme would look identical to the water_drop theme. It will not be displayed using the theme selector - it is just meant as <a href="theme_theme_php.htm#theme_sample">a template to copy from</a> when creating or modifying your own theme. <br clear="all" /> <a name="theme_builtin_waterdrop"></a><h3>Waterdrop<a href="#theme_builtin_waterdrop" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <img src="../images/themes/thumb_water_drop.png" width="100" height="75" border="0" alt="" title="Waterdrop" align="left" style="margin-right:5px" /> A theme with a light background and a "conventional" horizontal menu <br clear="all" /> </div> <p class="cpg_message_info">The themes "Classic", "Fruity", "Igames", "Mac OX X" and "Project VII" that existed in cpg1.4.x have been removed from the cpg1.5.x package. They are available as separate downloads instead - refer to the section <a href="theme_user-contributions.htm#theme_user-contributions">user-contributed themes</a> for details.</p> <a name="theme_upgrading"></a><h2>Upgrading your custom theme<a href="#theme_upgrading" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>To upgrade an existing custom theme from cpg1.4.x to version 1.5.x, read the <a href="theme_upgrade_14x-15x.htm">theme upgrade documentation</a>.</p> <p>If you are upgrading from cpg1.3.x to cpg1.5.x, you will have to perform your theme upgrade in two steps: first, you need to upgrade your custom theme from cpg1.3.x to cpg1.4.x and then on <a href="theme_upgrade_14x-15x.htm">from cpg1.4.x to cpg1.5.x</a></p> <p>You only have to upgrade your custom theme when upgrading between major versions (e.g. from cpg1.3.x to cpg1.4.x or from cpg1.4.x to cpg1.5.x), as from one major version to the next, the theming engine is subject to changes. When only upgrading from minor versions to the next (e.g. from cpg1.5.x to cpg1.5.y), you don't have to update your custom theme.</p> <p>The core themes that come with Coppermine packages don't need to be updated, as they should be replaced during the upgrade and therefore will contain all needed changes. However: if you have based your custom theme on one of the core themes that come with coppermine (e.g. the classic theme), pay attention to possible changes. As suggested below, it's advisable to rename your custom theme to make sure that it doesn't accidentally get overwritten when upgrading.</p> <a name="theme_upgrading_end"></a> <a name="theme_files"></a><h2>Content of a theme<a href="#theme_files" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Coppermine themes are stored in the "<strong>themes</strong>" directory, each consists of 3 primary files : </p> <ul> <li>"<strong><a href="theme_template.htm">template.html</a></strong>" the main template in plain HTML.</li> <li>"<strong><a href="theme_style_css.htm">style.css</a></strong>" the stylesheet associated with the template</li> <li>"<strong><a href="theme_theme_php.htm">theme.php</a></strong>" the PHP theme file</li> </ul> <p>Additionally, there usually is a folder named "images" that resides within the theme folder (themes/theme_name/images/) that contains the images used by the particular theme (logos, bullets, backgrounds and other graphical resources needed).</p> <a name="theme_files_end"></a> <a name="theme_engine"></a><h2>How the theme engine works<a href="#theme_engine" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>When a Coppermine page is being parsed, the core code will call theme functions. If those functions exist in your custom theme, they will be taken into account. If a particular function does <strong>not</strong> exist in your custom theme, the core function will be used. The core functions (the default theme behaviour if you want to put it that way) reside in <tt class="filename">includes/themes.inc.php</tt>.</p> <p class="cpg_message_error">Therefore, you <strong>mustn't</strong> edit <tt class="filename">includes/themes.inc.php</tt>, under no circumstances, as all your changes will be lost when upgrading in the future. Everything that possibly could be accomplished by editing <tt class="filename">include/themes.inc.php</tt> can be accomplished by editing <tt class="filename">themes/yourtheme/<a href="theme_theme_php.htm">theme.php</a></tt> as well - stuff defined in your custom theme will take precedence over the core theme functions.</p> <a name="theme_engine_end"></a> <a name="theme_whats_next"></a><h2>What's next?<a href="#theme_whats_next" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>There are step-by-step instructions provided in the section "<a href="theme_create.htm">Creating your custom theme</a>" that you should read for details. If you're looking for examples how to modify your custom theme, you should read the page "<a href="theme_examples.htm">Theme examples</a>" thoroughly, as it contains solutions ready for copy'n paste that allow you to modify your custom theme dramatically, especially as far as <a href="theme_examples.htm#theme_examples_content">additional content</a> is concerned. Pay attention as well to the sections that deal with the "<a href="theme_copyright.htm">copyright-disclaimer in footer</a>" and the section "<a href="php-content.htm">Dynamic (PHP-driven) content</a>".</p> </div> <a name="theme_end"></a> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>