Zomplog Themes in V3.8.2
Zomplog had a major rework of the themes in V3.8.2.
The default theme of V3.8.2 is the new standard for themes. If you want to create your own theme, or update an existing theme, then use the files in themes/default as the standard to start with.
Even when you know nothing about CSS, HTML and PHP you can adjust the default theme to your taste, by using the theme options. Those have also been revised for default theme.
Since V3.8.2 Zomplog comes with one theme and one theme only: default.
Other themes, like Kubrick, Modern and Nucleus may be downloaded from the extensions page http://www.zomp.nl/extensions/category/themes. They have been adjusted to fit in the new structure of themes, but they are not completely revised according to the new standard. You can still use them however. The original designers of those themes (or anyone else!) are invited to rewrite their themes according to the new default theme.
In earlier versions of Zomplog those themes were included in the download package. If you're using an earlier version of Zomplog, you should use the themes that came with your download.
You can now create an individual lay out for almost any element of Zomplog (e.g. in the menu you may want to highlight the title of teasers, without changing any of the other titles). The files that you need to adjust when creating your own theme have a lot of comment lines to make it easier to see what exactly happens.
ZOMPLOG'S LAYOUT
Zomplog's layout is defined in two folders.
First of all there's a folder called layout. This folder contains the logic that builds up the main content of your blog (content.php), the sidemenu (menu.php) and the navigationbar at the bottom of your blog (navbar.php).
To create yor own theme, most of the time there is no need to change anything in those files.
The second folder of interest is themes and in it the folder default. When you want to create your own theme, just copy the default folder, give it an appropriate name and place that new themefolder at the same level as default.
HOW TO CREATE YOUR OWN THEME
It is strongly advised that for any change in the theme, however small, you create your own theme. In that way you can upgrade to a new version of Zomplog, without losing your changes.
Make a copy of folder themes/default and put it in the themes folder.
Give it your new theme name, e.g. my_theme.
You now should have a folder themes/my_theme which is an exact copy of themes/default.
Modify file themes/my_theme/styles.css the way you like.
Don't forget to replace preview.jpg by a miniature image of your new site!
For your theme you may not only want to change the css file, but also the order of items in the menu, or the navigationbar, or even the content area. That is now easier than ever.
Simply copy menu.php, navbar.php and/or content.php from the layout folder into your theme folder (so that would result in the files themes/my_theme/menu.php, themes/my_theme/navbar.php and/or themes/my_theme/content.php).
Now change anything you want in these files.
Zomplog detects those files automatically and uses them instead of the default files.
HOW TO CONVERT A THEME WRITTEN FOR AN EARLIER VERSION OF ZOMPLOG
Did you make your own theme for an earlier version of Zomplog? Then you will have to convert it to the new standard. Sorry for this inconvenience.
Basically you do the same as when you want to create a new theme: copy default theme into a new folder and adjust the appropriate files. Most of the time that will only be the styles.css file and some images in the my_theme/images folder.
Since the new standard uses different ids and classes than the older versions of Zomplog, you can not just copy and paste them. You'll have to figure out what corresponds with what: e.g. the old class .contenttitle corresponds with the new #maincontent h2.
THEMES OPTIONS
The themes options are extended and improved for default theme. Using the themes options it is possible to change the background image of your header, the menu's font and many other aspects of your Zomplog without knowing anything about HTML. Just log in, click the themes tab and choose theme options from the submenu. Don't hesitate, just play around with it, you can't ruin anything!
Files options.php and options_config.php take care of this.
When you remove these files from folder themes/my_theme/ the themes options will not be available for that theme. Of course you may also adjust those files to the needs of your own theme.
In Zomplog V3.8.2 4 fonts and 6 colors may be set by using themes options. It is planned to provide for more fonts and colors in a later version of Zomplog.
Themes: Tips And Tricks
TIP 1:
In many tags you see the HTML-tag for a line break: '<br />'. This line break makes sure every result starts on a new line. This is fine if you would like a vertical list of let's say categories or authors. But what if a horizontal list would fit into your design much better?
All you have to do is change the line-break-tag to a space. So change '<br />' to ' ' and your results will line up horizontally! Didn't quite get it? Here's an example of how to display your category list horizontally:
change <? displayCategories('<br />'); ?> to <? displayCategories(' '); ?>
TIP 2:
You might wonder what these tags mean that start with "$lang"... These tags refer to words in your language file. So if you've chosen english as the main language for your weblog, <? echo "$lang_categories"; ?> would be replaced by the word categories, or in Dutch (which is my main language) it would be replaced by categorieën.
TIP 3:
Once you've created a Zomplog theme that you like very much, you could share it with other Zomplog-users! Wouldn't it be great if one day just surfing on the web, you bump onto a website which has your skin? Anyway sharing good ideas is nice, and Zomplog is my idea I want to share. So if you think others could benefit from your ideas, just upload the skin to the zomplog forum http://www.zomp.nl/forum/, and I'll make sure it gets featured on the Zomplog site!
TIP 4:
If you want to display the menu-content in list-style (e.g. <ul><li>bla bla</li></ul>), just add "List" behind the function name. Fot example to display the categories in list-style, just do this: <ul><? displayCategoriesList(); ?></ul>. Examples of this can be found in the themes-folder.
You'll find the available functions in admin/functions_menu.php.
TIP 5:
Users can manually select which menu-items they want to display from the built-in menu settings panel. If you want users to be able to decide which menu items they want to display, just add <? if($settings[menuitem_title]){ ?> before your menu item code, and <? } ?> after the code for one menu item. For example, the code for displaying the latest entries would be like this:
<? if($settings[menuitem_title]){ ?>
...optional, some formatting or title
<? displayLatestEntries('<br />'); ?>
...optional, some closing tag
<? } ?>
Again, just look at a file in the themes folder, and you'll see how it is done.
Tip 6:
By default the categories and pages are displayed as tags in the header of your site. If for any reason you want them (or either of them) to be displayed in the menu,you just have to change two files:
* in menu.php activate the appropriate lines by removing
<!-- START PAGES - if you want the pages to be displayed in the menu in stead of the header, then activate this part and remove the appropriate lines from function showMenuTabs() in file admin/functions.php
and
END PAGES -->
and/or
<!-- START CATEGORIES - if you want the categories to be displayed in the menu in stead of the header, then activate this part and remove the appropriate lines from function showMenuTabs() in file admin/functions.php
and
END CATEGORIES -->
* in admin/functions.php adjust function showMenuTabs() as described in that function.
below you find the old documentation for earlier versions than V3.8.2
Zomplog Themes before V3.8.2
IT IS STRONGLY RECOMMENDED THAT YOU UPGRADE TO THE NEWEST VERSION OF ZOMPLOG
NOTE: In version 3.8.1 the first step to the new standard was set.
The menu was then defined in a seperate file, outside of the themes folder: menu.php.
Where below here this document refers to the menu, look in menu.php
There's also a forum post that explains a bit more how to create a theme in 3.8.1: http://www.zomp.nl/forum/discussion/366/eigen-thema-maken/#Comment_2364
Since version 2.3 Zomplog has support for themeing! How does it work? Just edit the default theme which can be found in the themes folder, or create a new folder within the themes-folder, give it an appropriate name, and create your own theme! To activate your theme, just select it from the theme chooser.
Feel free to create your own themes! You could even mail them to me, so I can add them to the downloads-section of the site! A standard theme consists of the following: index.php (which holds the main layout) and content.php (which contains the content like blog posts, pages, archives, etc.). If you use images in your theme, be sure to use the following path: themes/name_of_your_theme_directory/images/imagename.jpg
The themes that come with Zomplog, also have a third file: options.php, which allows user to edit the theme through the built-in "theme options" panel. This file is not necessary for your theme.
Themes Howto
Editing the themes in your favorite editor gives you all controll about how your weblog looks. I tried to make the templating-system as flexible as possible. To do so, I decided to seperate code from design, so you don't have to wade through hundreds of hardly understandable lines of php-code, just to change the background-color of your site.
...Well, this is not completely true: I did use some php-code in the templates. Just because it is so much more flexible than using template-tags like "{title}".
Ok, so you've never edited a line of php in your life, and you downloaded Zomplog so you can leave the dirty work over to others... Well, be assured: you won't have edit a single line of php-code while editing the templates! As long as you remember that everything between "<?" and "?>"-tags stands for a dynamic part of your site. I named every tag appropriately, so there's a good chance you can figure out what every tag does.
For example <? displayAuthors('<br />'); ?> gives you a list of all authors that contribute to your weblog. Similarly, <? displayCategories('<br />'); ?> provides you with a list of all categories you've created. And really, this is all there's to it!
So you can create your own lay-out exactly as you have in mind, and then place the tags anywhere you want them to be, to add the functionality. You can even leave out all tags you're not gonna need!
Ok, let's get started! A theme basically consists of 2 parts: * index.php --> This is the main layout of your weblog, so header, footer, menu, etc. * content.php --> This file contains the formatting for the content in your blog (blog posts, pages, archives). All types of content are in this one file. I've added a comment-line everytime a new type of content starts, so you can easily recognize the content type.
Themes: Tips And Tricks
Most of the Tips and Tricks as described for V3.8.2 also apply to earlier versions of Zomplog.
