0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
de
/
[
Home
]
File: theme_create.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>Creating your custom theme - 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. To make sure your custom theme does not get overwritten when upgrading, you should start with a custom theme name." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="robots" content="noindex" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/de/theme_create.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_create"></a><h1>Creating your custom theme<a href="#theme_create" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <a name="theme_create_rename"></a><h2>Rename your theme first<a href="#theme_create_rename" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>To create a new theme, the best solution is to use an existing one as its copy template. To do that, make a copy of the folder of the theme you want to use as a basis. Then edit the "<strong>template.html</strong>", "style.css" and "<strong>theme.php</strong>" files and replace all occurences of "<strong>themes/old_theme_dir</strong>" with "<strong>themes/new_theme_dir</strong>" in order for the links to point to the correct place.<br /> Avoid using spaces and special chars in your custom theme name - only use alphanumerals and the underscore (_).</p> <p>Also keep in mind that despite this file being located in the "<strong>themes/your_theme_dir</strong>" directory, it must be coded as if it was in the main directory of the coppermine installation. For example, in order to display an image, you must use <tt class="code"><img src="<strong>themes</strong>/theme_dir/images/image.gif" alt=""/></tt> and not just <tt class="code"><img src="images/image.gif" alt=""/>.</tt> The same principle applies for the "<strong>theme.php</strong>" file.</p> <div class="cpg_example"> <ul> <li><strong>Create a copy</strong><br /> Browse the local coppermine gallery copy on your client, navigate to the themes folder (<tt class="code">your_coppermine_folder/themes/</tt>), right-click on the folder name that represents the theme you want to base your custom theme on (in this example, we will use the classic theme, so we will use <tt class="code">your_coppermine_folder/themes/classic/</tt>), select "copy" from the context menu. Then paste the content of the clipboard into the themes folder; a folder (named "Copy of classic" or similar) will turn up.</li> <li><strong>Rename the folder</strong><br /> Right-click on the newly created folder (<tt class="code">your_coppermine_folder/themes/Copy of classic/</tt>) and select " rename" from the context menu. Choose a unique theme name - in this example, we will use "my_theme" (resulting in the folder to be renamed to <tt class="code">your_coppermine_folder/themes/my_theme/</tt>).<br /> Keep in mind that we will upload the theme to your webserver later - you will have to make sure to properly use capitalization: on Windows-driven clients, capitalization does not matter, so there is no difference between "<tt class="code">my_theme</tt>" and "<tt class="code">My_theme</tt>". Most webservers are Linux-driven though, where capitalization <em>does</em> matter (there <em>is</em> a difference between "<tt class="code">my_theme</tt>" and "<tt class="code">My_theme</tt>"). To be safe it is recommended to use lower case to stay out of harms way.</li> <li><strong>Edit the files to reflect the theme name</strong><br /> Use a plain text editor (in this example, we will use notepad.exe), open <tt class="code">your_coppermine_folder/themes/my_theme/template.html</tt>. Find "<tt class="code">themes/classic</tt>" and replace with "<tt class="code">themes/my_theme</tt>" (may exist in the file several times, so make sure to replace <em>all</em> occurrences of "<tt class="code">themes/classic</tt>" with "<tt class="code">themes/my_theme</tt>"). Save your changes. Then do the same thing for the files <tt class="code">theme.php</tt> and <tt class="code">style.css</tt>. </li> </ul> </div> <p>It is strongly recommended to rename your custom theme as suggested above, even if you only plan to accomplish minor changes to a default theme that coppermine comes with. The reason is quite simple: when upgrading at a later stage, you will not run into issues (e.g. accidentally overwrite your customized theme with an updated default theme).</p> <a name="theme_create_tipps"></a><h2>Tipps & tricks<a href="#theme_create_tipps" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>If you're not sure how to go about creating your own theme, you could also have a look at the download section of the coppermine homepage: there are many <a href="theme_user-contributions.htm#theme_user-contributions">user-contributed themes</a> available for download that can be previewed on the <a href="http://coppermine-gallery.net/demo/">coppermine demo page</a>.</p> <p>While you're in the process of creating or testing a new theme, you might not want your theme to be displayed to visitors of your site, but you (as the coppermine admin) may want to still be able to preview your theme. To do that, simply add <tt class="code">theme=your_theme_name</tt> to the url in your browser.</p> <br /> <div class="cpg_example"> <ul> <li><tt class="code">http://yoursite.tld/coppermine/index.php?theme=your_theme_name</tt> will show the coppermine index page, using your theme</li> <li><tt class="code">http://yoursite.tld/coppermine/thumbnails.php?album=1&theme=your_theme_name</tt> will show the thumbnail view of album 1, using your theme</li> <li><tt class="code">http://yoursite.tld/coppermine/?theme=xxx</tt> will reset your view back to the theme you chose as your <a href="configuration.htm#admin_theme_theme">default theme</a> in coppermine config</li> </ul> </div> <a name="theme_create_wysiwyg"></a><h2>Using WYSIWYG-editors<a href="#theme_create_wysiwyg" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>It is strongly recommended <strong>not</strong> to use a <acronym title="What You See Is What You Get">WYSIWYG</acronym>-editor at all to edit Coppermine files. The coppermine dev team is aware that it might seem easier for beginners to use those graphical editors. However, they have some major drawbacks:</p> <ul> <li>Some editors (mostly MS Frontpage) are notorious for "beautifying" the code in a manner that renders embedded PHP code invalid. Subsequently, if you use a WYSIWYG-editor to edit theme.php, the file may get corrupt (i.e. un-usable)</li> <li>Graphical editors tend to create deprecated, invalid, proprietary HTML. You have more control if you use a plain text editor instead.</li> <li>You don't learn anything. Sooner or later, you will want to do something your precious WYSIWYG-editor isn't capable to do. Now what? You have always used the editor to do your work - you don't understand HTML. When using a plain text editor, the learning curve may be steep, but it's much more entertaining.</li> </ul> <p class="cpg_message_info">If you're not sure what editor to use, take a look at the list of editors on the page <a href="dev_tools.htm">tools recommended by the devs</a>.</p> <a name="theme_create_template_html"></a><h2>Editing template.html<a href="#theme_create_template_html" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>The file <a href="theme_template.htm">template.html</a> is the core file of each theme: it can only contain HTML/CSS/JavaScript code (no PHP!) plus some placeholder tokens that will get replaced with content when the theme is being parsed (i.e. when the HTML output of a gallery page is being generated). Template.html determines the overall layout of your gallery pages. Use it to make your gallery match the overall look of your entire website.</p> <a name="theme_create_template_favicon"></a><h3>Favicon<a href="#theme_create_template_favicon" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Coppermine comes with a <a href="http://en.wikipedia.org/wiki/Favicon" rel="external" class="external">favicon</a> file that resides in the gallery root folder. There is reference to it in all themes that come with coppermine out of the box. You're welcome to use a favicon file of your own and change the reference to it in your custom theme. To accomplish this, edit themes/your_custom_theme/template.html, find <tt class="code"><link rel="shortcut icon" href="favicon.ico" /></tt> and edit as you see fit.</p> <p>Alternatively, just replace the favicon that ships with the theme you use with your custom favicon file.</p> <a name="theme_create_colors"></a><h2>Modifying colors & design<a href="#theme_create_colors" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>To modify the colors, fonts, font sizes, etc... used by the script, you should edit the "<strong><a href="theme_style_css.htm">style.css</a></strong>" stylesheet whenever possible. For example, if you want to increase or decrease the size of the fonts you can simply modify the line with : <tt class="code">table { font-size: 12px; }</tt>. Most of the font sizes used by the script are defined as a percentage of this size.</p> <a name="theme_create_advanced"></a><h2>Advanced Steps<a href="#theme_create_advanced" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>There are some advanced steps that you should follow - they are being described in the sections <ul> <li><a href="theme_create_matching_page_tutorial.htm#theme_matching">Creating a Coppermine theme that matches your overall site layout</a></li> <li><a href="theme_theme_php.htm#theme_php">Editing theme.php</a></li> </ul> <a name="theme_create_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>