Advertisement:

Author Topic: [How to] Get your theme ready for approval  (Read 2674 times)

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 1,992
  • Gender: Male
  • We know, we'll be coming
    • Smfhispano on Facebook
    • @ComeLadrillos on Twitter
    • MundoNet
[How to] Get your theme ready for approval
« on: December 15, 2013, 05:37:40 PM »
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: [Select]
$txt['theme_description'] = 'The default theme from Simple Machines.<br /><br />Author: The Simple Machines Team';And here we will change that line to something like:
Code: [Select]
$txt['theme_description'] = 'New Theme.<br /><br />Author: <a href="http://somebacklink.com" target="_blank">Someone</a>';


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: [Select]
<?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.6</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>

Above you can see the example, now let's edit the file for our new theme.
Code: [Select]
<?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.6</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.smfhispano.net/</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>

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: [Select]
<?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;

?>
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.

Any questions or concerns? Post here
« Last Edit: December 15, 2013, 08:41:56 PM by Diego Andrés »

SMF Hispano - Free & Premium Themes for SMF.