====== Blog Themes ======

A "theme", or "aspect", is a set of elements that define the layout of a blog.

You can configure themes by clicking **Blog aspect** from the Dashboard.

===== Choosing a theme =====

The first tab, labeled **Theme** lets you choose a theme from those available in your installation. To select a theme, click on the corresponding radio button then click on **Use selected theme**.





===== Installing a theme =====

Click on the **Install or upgrade a theme** tab to access the theme install page. Copy and paste the link to the zip file of the theme you want to install in the "Theme zip file URL" filed under the **Download a theme** section, or download the zip file to your hard drive and click on the "Browse" button to specify its location under the **Upload a theme section**. Currently available themes can be downloaded from this [[http://themes.dotaddict.org/galerie-dc2/|gallery]]).

The new theme will be added to the **Themes** tab list of the **Blog aspect** screen.

===== Customizing a theme =====

Some themes can be configured by clicking on the **Theme configuration** button located below the theme title when the theme is selected. You can then modify various elements of your theme, such as the main css file.

When themes are not intended to be configurable, you may still modify them to your convenience by clicking on the **Theme editor** button. You may then modify all the files related to your theme, including template files, css files, and custom javascript files when they exist. For more information about the Theme editor, display the Help panel of the Theme editor screen by clicking on the blue Help icon in the top right corner of the page.

<note warning>
You need to select a theme then click on the **Use selected theme** button to display the customization button.
</note>




==== Blowup ====
This is Dotclear 2 default theme. This theme is fully customizable through a configuration interface, so that you don't have to modify the css file.

Select from the list in the **Themes** tab and click on the **Theme configuration** button to access the configuration page. You will then be able to visually configure the colors and fonts of various elements, and to change the header image.

A few predefined "styles" are available and you can use them as bases for your own custom configuration. To select a predefined style, use the provided drop-down menu on top of the page. For more information about the configuration options, display the Help panel by clicking on the blue Help button in the top right corner of the page.

<note tip>
You can save your current configuration by doing the following : click on the {{2.0:controls:plus.png|[+]}} icon next to "Configuration import/export" at the bottom of the page, then copy and paste it into a text file and save it. To restore an older configuration, paste your code in the same box and click on the ""Apply code" link, then on the **Save** button.
</note>


==== Custom CSS theme ====

With this theme, you can customize a style without need to download a file on your hard drive, edit it then uploading it again (which is very useful if you don't have FTP access to the server where your blog is hosted). The **Custom theme** allows you to create a new theme or modify an existing theme.

=== Creating a new theme ===

Select the **Blog aspect** link from the Dashboard then select the **Custom theme** and click on the **Use selected theme** button. The **Theme configuration** button directs you to an blank css edition area. You may now add all the css rules for the theme you want to create.

If you want to use images in your new theme, you can create a directory (e.g. themeimages) in the [[..:usage:media|Media manager]]. Upload the graphic elements of your theme in this new directory, then indicated the path to these images in your css.

=== Building a new theme from an existing theme ===

Find the name of the directory containing the theme you want to use as a base for your new theme (for example, the **Blue Silence** theme is located in the **/themes/blueSilence** directory).

<note tip>
If you don't know the directory of this theme, click on it in the left gallery then click on the **Stylesheet** link. You will then get the full URL of the CSS you want to base your new them on.
</note>

Select **Custom theme** as indicated earlier.

Click on the **Theme configuration** button and type a first line in the blank css edition area:

  @import "../themes/base-theme-directory/style.css";

Your new theme now contains all the base theme style. You simply need to add the modified and/or new rules for your theme. Your browser reads css files from top to bottom, so your rules will override those of the imported css. 


===== Theme editor =====

Dotclear allows you to edit the files of the current theme directly from the administration interface. To access this function, click on the **Theme editor** button after selecting your current theme in the gallery.

The Theme editor page displays a list of the theme files. The files marked with a yellow bullet  are those that actually are in the theme directory, while those marked with a black bullet are located in the default theme directory.

The files are divided in three categories:

    * **Template files**: these ''html'' files contain the content elements of your blog pages. Files starting with an underscore "_" are included in the page type files. You may have to modify these template files to install a plugin. The template files also include the 'xml'' files of syndication feeds.
    * **CSS files**: the stylesheets associated to the theme. The CSS are the files that are most often edited to adjust the blog layout.
    * **Javascript files**: if your theme contains javascript files, they will be listed in this section and you will be able to edit them.

To edit a file, click on its name. If it doesn't already exist in the theme directory, it will be automatically copied into it so you can modify it as you like without damaging the default theme.

Once you have made the necessary changes, click on the **Save** button.