Permalink
Browse files

cleanup

  • Loading branch information...
1 parent f1a9fdf commit 0f074bfa940bc338ed92cdc3a28c72c1d5c80f84 @saschadube saschadube committed Nov 7, 2011
@@ -1,43 +1,46 @@
<h1 class="title">How to customize a theme</h1>
-<h2>Change the look and colors</h2>
+<p>In this tutorial we'll show you, how to start customizing a Warp theme and which tools do you need to learn to make small modifications like changing the look and colors of a theme.</p>
-<p>Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous <a href="https://addons.mozilla.org/de/firefox/addon/firebug/">Firebug-Plugin</a> for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out css-styles right in your browser and inspecting existing styles to find their location in the theme's css-files. Let us have a look at these two possibilities now.</p>
+<h2>Web Developer Tools</h2>
+
+<p>Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous <a href="https://addons.mozilla.org/de/firefox/addon/firebug/">Firebug-Plugin</a> for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme's CSS files.</p>
+
+<h3>Editing CSS styles directly in your browser</h3>
-<h3>Editing css-styles directly in your browser</h3>
-<img src="../../../assets/images/warp/customize_firebug.png" width="847" height="290" />
<p>Bring up Firebug by right-clicking on an interesting element and choosing "Inspect Element". On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.</p>
+<img src="../../../assets/images/warp/customize_firebug.png" width="847" height="290" />
+
<p>Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so can not just edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.</p>
<h3>Finding the right css file in your theme</h3>
-<p>As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. Please note: Consider creating a new css file with all your custom styles instead of directly editing the default ones. To learn more about your templates directory structure have a look at {doc: directory-structure-explained text: this tutorial}.
-</p>
-
-<p>
-If you want to explore Firebugs possibilities some more just try playing around a little or have a look at the tutorial links at the end of this article
+<p>As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your templates directory structure have a look at {doc: directory-structure-explained text: this tutorial}.
</p>
-<h3>Where to put the CSS to style my custom content?</h3>
+<h3>More Resources</h3>
-<p>If you want to style your custom content, please use the <em>custom.css</em> file, located in your templates <em>css</em> directory. Use this file to style custom content only. For a more general approach of styling, we recommend you create your own theme style.</p>
+<p>Here are some useful resources to get you more started with the web developer tools:</p>
-<h2>Create your own theme style</h2>
+<ul class="bullet">
+ <li><a href="https://addons.mozilla.org/firefox/addon/firebug/">Firebug for Firefox</a></li>
+ <li><a href="http://sixrevisions.com/tools/firebug-guide-web-designers/">Firebug Guide for Web Designers</a></li>
+ <li><a href="http://code.google.com/chrome/devtools/">Chrome Developer Tools</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/part1/">HTML5 Rocks - Introduction to Chrome Developer Tools</a></li>
+ <li><a href="http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/">Paul Irish - A Re-introduction to the Chrome Developer Tools</a></li>
+ <li><a href="http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html">Safari Developer Tools</a></li>
+ <li><a href="http://www.opera.com/developer/tools/">Opera Developer Tools</a></li>
+</ul>
-<p>
- Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal.
- A style defines a layer after the default theme and can inherit or override resources from the parent default theme.
- Warp looks first in the specific style folder and loads the file if it's found. Otherwise it looks for the default template files.
- This gives you full flexibility to override any file of the default theme. Each style is placed in its own directory in the themes <em>/styles</em> folder and can provide its own custom HTML layouts, CSS, JavaScript and images.
-</p>
+<h2>Where to put the CSS to style my custom content?</h2>
-<p>The styles feature introduces a new way of customizing a theme and makes it easy to create theme variations. All styles benefit from inheriting layouts and assets from the main theme, which allows to create minor customizations really fast.</p>
+<p>If you want to style your content, for example some custom markup inside your Joomla or WordPress articles, please use the <em>custom.css</em> file, located in your templates <em>css</em> directory.</p>
-<p>This is the new recommended way to customize themes. You can create your own style or just start off by copying an existing one. The style variations are modular and separated from the main theme so it's the perfect place for your theme customizations. This way a theme can be updated without merging all your customization to the updated template.</p>
+<h2>Create your own theme style</h2>
-<p>{doc: create-a-new-style text: Read on how to create a new style}</p>
+<p>The recommended way to customize themes is to create your own custom style. Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. All styles benefit from inheriting layouts and assets from the main theme, which allows to create minor customizations really fast. The main benefit from using a custom style is that it allows you to updated a theme without merging all your customization later. {doc: create-a-new-style text: Read on how to create a new style}
<h2>Learn the basics</h2>
@@ -51,13 +54,6 @@ <h1 class="title">How to customize a theme</h1>
<li><a href="http://www.w3.org/Style/CSS/">W3C - Cascading Style Sheets</a></li>
<li><a href="https://developer.mozilla.org/en/JavaScript">Mozilla's JavaScript Documentation</a></li>
<li><a href="http://eloquentjavascript.net">Eloquent JavaScript - A Modern Introduction to Programming</a></li>
- <li><a href="https://addons.mozilla.org/firefox/addon/firebug/">Firebug for Firefox</a></li>
- <li><a href="http://sixrevisions.com/tools/firebug-guide-web-designers/">Firebug Guide for Web Designers</a></li>
- <li><a href="http://code.google.com/chrome/devtools/">Chrome Developer Tools</a></li>
- <li><a href="http://www.html5rocks.com/en/tutorials/developertools/part1/">HTML5 Rocks - Introduction to Chrome Developer Tools</a></li>
- <li><a href="http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/">Paul Irish - A Re-introduction to the Chrome Developer Tools</a></li>
- <li><a href="http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html">Safari Developer Tools</a></li>
- <li><a href="http://www.opera.com/developer/tools/">Opera Developer Tools</a></li>
</ul>
<p>Make sure to ready through the tutorials of the customizing section which explain you how Warp themes work and also provide guidelines how to modify them.</p>
@@ -51,7 +51,7 @@ <h1 class="title">Create a new module position</h1>
&lt;?php endif; ?&gt;
</code></pre>
-<p><strong>Remember:</strong> You can override the <em>template.php</em> in your own style. Just copy <em>/layouts/template.php</em> to <em>/styles/YOUR_STYLE/layouts/template.php</em>.</p>
+<p><strong>Note:</strong> You can override the <em>template.php</em> in your own style. Just copy <em>/layouts/template.php</em> to <em>/styles/YOUR_STYLE/layouts/template.php</em>.</p>
<h2>Define a default module style for the new position</h2>
@@ -66,7 +66,7 @@ <h1 class="title">Create a new module position</h1>
}
</code></pre>
-<p><strong>Remember:</strong> If you create a theme style and want to add some new module styles you can override the default module.php file. Just copy <em>/layouts/module.php</em> to <em>/styles/YOUR_STYLE/layouts/module.php</em>.</p>
+<p><strong>Note:</strong> If you create a theme style and want to add some new module styles you can override the default module.php file. Just copy <em>/layouts/module.php</em> to <em>/styles/YOUR_STYLE/layouts/module.php</em>.</p>
<h2>Update your CSS</h2>
@@ -44,7 +44,7 @@ <h1 class="title">Create a new module style</h1>
<p>This is the name of the module style. In Joomla you can load a module using the module class suffix. For example: <code>style-line</code></p>
<h3>$template = 'default-1';</h3>
-<p>The templates defines the HTML markup you need to create your module style. The templates are located in <em>YOUR_THEME/warp/layouts/modules/templates</em>.</p>
+<p>The templates defines the HTML markup you need to create your module style. The templates are located in <em>/warp/layouts/modules/templates</em>.</p>
<h3>$style = 'mod-'.$style;</h3>
<p>Here we set the CSS class to style the module. For example <code>.mod-line</code></p>
@@ -99,4 +99,4 @@ <h1 class="title">Create a new module style</h1>
<h2>How to add another module template?</h2>
-<p>If you want to add your own module template, you can add a template file to <em>layouts/modules/templates</em>. Or if you are using your own style copy the file to <em>/styles/YOUR_STYLE/layouts/modules/templates</em>. You may want to use the default templates located at <em>YOUR_THEME/warp/layouts/modules/templates</em> as a blueprint.</p>
+<p>If you want to add your own module template, you can add a template file to <em>/layouts/modules/templates</em>. Or if you are using your own style copy the file to <em>/styles/YOUR_STYLE/layouts/modules/templates</em>. You may want to use the default templates located at <em>/warp/layouts/modules/templates</em> as a blueprint.</p>
@@ -1,17 +1,14 @@
<h1 class="title">Add new assets</h1>
-<p>
- In this tutorial we show you how you can add custom fonts, CSS and JavaScript files to your theme based on the Warp Framework.
-</p>
+<p>In this tutorial we show you how you can add custom fonts, CSS and JavaScript files to your theme based on the Warp Framework.</p>
-<p>
- The single configuration file <em>/layouts/template.config.php</em> improves setting up the template environment by doing all initialization in one location. It initializes all PHP classes, loads all necessary CSS and JavaScript and also all IE specific files. If you need to load custom CSS and JavaScript files, this is where you do it.
-</p>
+<p>The single configuration file <em>/layouts/template.config.php</em> improves setting up the template environment by doing all initialization in one location. It initializes all PHP classes, loads all necessary CSS and JavaScript and also all IE specific files. If you need to load custom CSS and JavaScript files, this is where you do it.</p>
+
+<div class="box-info">If you create a theme style and want to add some new assets you can override the default template.config.php file. Just copy <em>/layouts/template.config.php</em> to <em>/styles/YOUR_STYLE/layouts/template.config.php</em>.</div>
<h2>Add a CSS file</h2>
-<p>The <em>template.config.php</em> configuration file loads all the themes CSS files. If you want to add your own custom CSS file <em>/css/my.css</em> you can do so by using the following syntax:
-</p>
+<p>The <em>template.config.php</em> configuration file loads all the themes CSS files. If you want to add your own custom CSS file <em>/css/my.css</em> you can do so by using the following syntax:</p>
<pre><code>// load css
$this['asset']->addFile('css', 'css:my.css');
@@ -27,13 +24,7 @@ <h1 class="title">Add new assets</h1>
<h2>Add a font</h2>
-<p>Sometimes you need to add a custom font to your Warp theme, this only takes a few steps.</p>
-
-<h3>Pick a font</h3>
-
-<p><a href="http://www.fontsquirrel.com">FontSquirrel</a> has a nice service where you can choose between many nice web fonts and you can even upload a custom font from your pc and transform it to a webfont.</p>
-
-<div class="box-warning">Respect the font copyrights, not every font is technically build and/or legally licensed for web usage.</div>
+<p>Sometimes you need to add a custom font to your Warp theme, this only takes a few steps. <a href="http://www.fontsquirrel.com">FontSquirrel</a> has a nice service where you can choose between many nice web fonts and you can even upload a custom font from your pc and transform it to a webfont. Respect the font copyrights, not every font is technically build and/or legally licensed for web usage.</p>
<div class="box-info">Choose a font which supports Mac Roman subsetting/character encoding, if you want to use french, spanish or other latin languages.</div>
@@ -4,24 +4,13 @@ <h1 class="title">Override system files</h1>
<h2>Override Joomla system files</h2>
-<p>
- Lets say you want to customize the layout of the content Joomla component. To do that, just copy the <em>com_content</em> directory from <em>/warp/systems/joomla.1.x/layouts</em>
- to the theme <em>/layouts</em> directory or even better {doc: create-a-new-style text: create your own style} and change the files to your needs.
- If you are using your own style copy the directory to <em>/styles/YOUR_STYLE/layouts</em>. Further this way you won't lose any of your changes after an update of your theme. Make sure to only copy the files you want to change, all other layout files will be automatically loaded from the system defaults.
-</p>
+<p>Lets say you want to customize the layout of the content Joomla component. To do that, just copy the <em>com_content</em> directory from <em>/warp/systems/joomla.1.x/layouts</em> to the theme <em>/layouts</em> directory or even better {doc: create-a-new-style text: create your own style} and change the files to your needs. If you are using your own style copy the directory to <em>/styles/YOUR_STYLE/layouts</em>. Further this way you won't lose any of your changes after an update of your theme. Make sure to only copy the files you want to change, all other layout files will be automatically loaded from the system defaults.</p>
+<h2>Override Wordpress system files</h2>
-<h2>Wordpress</h2>
+<p>All warp system layout files for Wordpress are located in <em>/warp/systems/wordpress.3.0/layouts</em>. So if you want to add some modification to let's say the comments markup, just copy <em>/warp/systems/wordpress.3.0/layouts/comments.php</em> to the theme <em>/layouts</em> directory or create your own style and copy comments.php to <em>/styles/YOUR_STYLE/layouts</em>. This is the most warp proof and recommended method.</p>
-<p>
-
- All warp system layout files for Wordpress are located in <em>/warp/systems/wordpress.3.0/layouts</em>.
- So if you want to add some modification to let's say the comments markup, just copy <em>/warp/systems/wordpress.3.0/layouts/comments.php</em> to the theme <em>/layouts</em>
- directory or just like already described for Joomla, create your own style and copy comments.php to <em>/styles/YOUR_STYLE/layouts</em>. This is the most warp proof and recommended method.
-</p>
-
-
-<h2>WordPress custom pages</h2>
+<h3>Custom pages</h3>
<p>You can use different layouts for pages by creating files in your theme folder with a "page-" as prefix in the name followed by the ID or page-slug.</p>
@@ -11,6 +11,4 @@ <h1 class="title">Install The ZOO With Democontent</h1>
<p>On the last installation step don't forget to press the <em>Install Sample Data</em> button.</p>
-<p>
- <img src="../../../assets/images/zoo/install_democontent_joomla.png" alt="" width="882" height="246" />
-</p>
+<img src="../../../assets/images/zoo/install_democontent_joomla.png" alt="" width="882" height="246" />

0 comments on commit 0f074bf

Please sign in to comment.