Customizing SMF > Graphics and Templates

[How to] Get your theme ready for approval

(1/4) > >>

Diego Andrés:
Hello everyone, today I'm going to help you with preparing a theme for approval.
Well, firstly our theme requires 4 standard folders and 4 files.

What folders and files are required?
The folders necessary are: css, images, scripts, languages
The files necessary are: index.template.php, index.php, theme_info.xml, license.txt


Themes/{theme}/css/
Here we should find two files:

* index.css
In this file we'll have all the styling (CSS) of our theme.
* rtl.css
This file must be included in the theme. (You can copy it from the default theme.) This file is used for users who use have selected a 'right to left' language.

Themes/{theme}/images/
In this folder we'll find all the images that are required and used in the theme/forum. Usually this folder will have an approximately of 281 files and 8 folders including the folder called english which includes an image named new.gif and the index.php file.
What should we find in this folder?
Everything that is required in your theme, you can remove images that are not required in your theme, e.g. the main_block.png in case that you're only using CSS.
However, there's one image that is required to be edited or replaced.

* Themes/{theme}/images/thumbnail.gif
This image has to be replaced with another, but from our new theme and must be exactly the same size preferably. You can use a preview thumbnail of your theme, or just and image with the name of your theme.

Themes/{theme}/scripts/
In this folder, only one file is necessary/required

* theme.js
In this file we'll find some functions that are required for the theme, and we can add any javascript code, e.g. a toggle effect, or something similar.We can add any file to this folder, and then call it from our index.template.php. Note that the only acceptable external sources are Google CDN and Jquery, per the customization guidelines.


Themes/{theme}/languages/
This folder will only usually contain one file: Settings.english.php (you can copy it from default theme)

* Settings.english.php
We need to find two text strings. (We are not going to edit the first one.) The second one,($txt['theme_description']), should be modified.
* ThemeStrings.english.php
This file will be included in your index.template.php. This file allow us to add additional text strings that will be available on all pages.What should I edit in Settings.english.php?
Search this line:

--- Code: ---$txt['theme_description'] = 'The default theme from Simple Machines.<br /><br />Author: The Simple Machines Team';
--- End code ---
And here we will change that line to something like:

--- Code: ---$txt['theme_description'] = 'New Theme.<br /><br />Author: <a href="http://somebacklink.com" target="_blank">Someone</a>';
--- End code ---


Themes/{theme}/license.txt
The theme needs a license for be published on SimpleMachines Theme Site.
You can use any license you want to use in your work, or write your own license.
More info can be found here: http://www.simplemachines.org/community/index.php?topic=461016
Also you may want to check this: http://wiki.simplemachines.org/smf/Customization_approval_guidelines#Copyright_and_Credit


Themes/{theme}/theme_info.xml
This is the most important file to get our theme installed in any forum once you set it up for download.
Here we are going to have something like this:

--- Code: ---<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>yourname:name_of_our_theme</id>
<version>2.0.8</version>
<!-- Theme name, used purely for aesthetics. -->
<name>The name of our theme, here you can use spaces.</name>
<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="your name">the email</author>
<!-- Website... where to get updates and more information. -->
<website>Some link</website>
<!-- Template layers to use, defaults to "html,body". -->
<layers>html,body</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>
</theme-info>
--- End code ---

Above you can see the example, now let's edit the file for our new theme.

--- Code: ---<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
<id>diego:our_new_theme</id>
<version>2.0.8</version>
<!-- Theme name, used purely for aesthetics. -->
<name>Our New Theme</name>
<!-- Author: your email address or contact information. The name attribute is optional. -->
<author name="Diego Andrés">diegoandres_cortes@outlook.com</author>
<!-- Website... where to get updates and more information. -->
<website>http://www.smftricks.com/</website>
<!-- Template layers to use, defaults to "html,body". -->
<layers>html,body</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on></based-on>
</theme-info>
--- End code ---

More useful information about this can be found here.


Themes/{theme}/index.template.php
This fine contains the basic structure and backbone of the theme.

Themes/{theme}/index.php
Basically this file only contains this:

--- Code: ---<?php

// Try to handle it with the upper level index.php. (it should know what to do.)
if (file_exists(dirname(dirname(__FILE__)) . '/index.php'))
include (dirname(dirname(__FILE__)) . '/index.php');
else
exit;

?>
--- End code ---
You can copy this file from default theme..


And we are almost done!, we only have one more thing to do.. Package it

How should it be packaged?
We can use any tool like Winrar. Select all the folders mentioned (css,images,languages,scripts) and the files that our theme contains, and then we zip the content. Also, we suggest not using spaces in the archive name.

Ensure that the theme is not double folder-ed.

Congratulations your new theme is ready for approval. Submit it at http://custom.simplemachines.org/themes/index.php?action=posttheme;sa=new

Important links and information.

* Customization approval guidelines
* How to create a basic SMF theme
* Creating multi-style/color theme
* Templates List
Any questions or concerns? Post here

Antechinus:
Got a question about theme packaging. Normally you don't include extraneous files in a theme zip. However, it would be best to serve the CSS minified, for obvious reasons. The drawback with doing this in a custom theme is that obviously minified files are a PITA to work on, if you wish to make any changes.

The amount of commenting required to make the thing really easy to navigate for anyone unfamiliar with the file, or with CSS files in general, is quite substantial. That means I'm seriously considering packing up my next theme with minified CSS linked up by default, but with a subsidiary folder (../css/expanded) that contains fully formatted and commented files for anyone who wants to work on them.

If anyone just wants to download the theme and use it, it can run straight off the minified CSS and the expanded files would be surplus to requirements. OTOH, it doesn't seem sensible to make people download a separate package of expanded files. The amount of storage space they'll take on the server is negligible, so throwing them into a folder of their own inside the theme zip seems like the obvious option to me. They can include commented links to a few good online minification tools, so that even teh dreaded n00bz can hopefully minify their stuff once they have finished playing with it.

So question is: would the Customise Team be cool with this plan? :)

margarett:
It seems a very good idea ;)

Antechinus:
Yeah I thought so, but technically it is against current guidelines so I figured time to thrash it out.

I'm also playing with minifying the js. I already have hoverIntent and Superfish and minified into one file (keeping the file headers from each for licence requirements) and that works fine. I ran theme.js through a scruncher too and that is still fine, so it seems reasonable to bung that in with the other two. Hardly anyone ever edits theme.js, and it has to load at the top of index.template.php anyway.

I did try minifying script.js and that broke stuff, so I'll probably leave that one alone due to the complexity of testing it thoroughly.

Colin:
Sounds good to me!

Navigation

[0] Message Index

[#] Next page

Go to full version