Cryonie theme : Using and customising

How do I change the theme for it to suit myr needs...

How can I get more categories displayed?

The size of the navigation bar limits the number of category. There are two solutions ...

  1. Move the page links in the side panel and increase the number of categories. For example for 12 categories, change the value of the parameter number:
    <?php wp_list_categories('title_li=&sort_column=name&hierarchical=0&number=12') ?>
  2. Position the categories in the side panel:
    <li class="widget">Categories
  <ul>
      <?php wp_list_categories('title_li=&sort_column=name&hierarchical=1')?>
  </ul>
</li>
    The limit is removed and the hierarchical view is restored.

How to have a fixed width

If you prefer a fixed width to a flexible width, it is easy to configure. Assign the same value to min-width and max-width in the body rule, or replace them by a width property. Replace for example:

min-width:480px;
max-width:1280px;

by:

width: 1200px;

Adding or removing comment feed in metas

The functions.php file holds a command to control the generation of comments and post comments feeds. 

automatic_feed_links(false);

The argument true adds them and false removes them.

What elements should be retained to optimize the site

There is a choice between access and SEO, between visitors and search engines. It is a dilemma. For visitors, we must maintain a maximum of components to facilitate access to content. But to better convey the PageRank between pages, we have to reduce the number of links.

It is recommended to remove:

From SEO, you could also remove the tag cloud, links on the preceding and following pages, all the links on pages where the topic is different.

How to translate the theme

You can directly translate the terms in the source code. On this occasion, you should delete functions of the form: 

__e("term")

et replace them directly by the word or sentence. You can also use the translation mecanisms of Wordpress.

How to change the banner

The banner at the top of the page relies on two CSS selectors:

The header background:

#header 
{
    background-image:url(sea1pix.jpg);
}

A picture behind the name of the site: 

#logoback
{
    background-image: url(sea.jpg);
    background-repeat:no-repeat;
}

This picture could also include the logo or name of the site.

If you want to use the shaded image rather than the expanded image, use topback.gif to the background of the header and wisland.jpg for the image.

Making an expanded banner is very simple, it consists of an 76 pixels high image, and we cut a 1 pixel wide image at the right that is used as the header background.

Changing graphics

How to use his own pictures, and how were created the default images provided with the theme for Wordpress.
All graphical elements can be made with The GIMP.

The header

Besides the logo, it has three elements: the background for the header, the background for the navigation bar, and the background image for the logo.

The navigation bar

A simple gradient is used to obtain the background. The height is 20 pixels and the width is 1 pixel.
With the colors of foreground and background black and white, use the gradient tool.

The background of the header.

The height is 76 pixels and the width is 1 pixel. We proceed as for the background of the navigation bar.

The background image.

We will implement the tutorial to merge images with fade effect.

I used an image of 482 pixels wide and 76 pixels high like this one:

To integrate it into the background, we will create a fade effect...

  1. Load the background image of the header, of 76x1 pixels.
  2. Select all. Copy to have it in the clipboard.
    It will become available as a pattern.
  3. Creates a new image of 482x76 pixels. Activates the "advanced" option to select the type of filling.
  4. Fill it with a pattern. Uses the first one, that is the image in the clipboard.
    You now has an image that is similar to the background of the header:
  5. On the landscape image, produces a gradient tranparent at right as shown in the tutorial mentioned above.
  6. Now do a cut and past of this shaded image on the background above. We obtain the following picture:
  7. Save as wisland.jpg or choose another name and change the #logoback rule in the style.php file.

The logo

Open File->Create->Logo to access a selection of scripts for making logos.

Choose a format and size fitted to be inserted in the header: 450x64 pixels or less.

Save as PNG or GIF with transparent background option, under the name losgo.gif or logo.png and if required change the #logo rule in style.php.

Put it online

Graphic files are at the root of the theme.

The theme