Advertisement:

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

Offline Diego Andrés

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 3,059
  • Gender: Male
  • We know, we'll be coming
    • DiegoCortes on GitHub
    • @comeladrillos on Twitter
    • SMF Tricks - Free & Premium Themes
[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.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>

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

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: August 02, 2014, 11:10:30 AM by Diego Andrés »

SMF Tricks - Free & Premium Responsive Themes for SMF.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: [How to] Get your theme ready for approval
« Reply #1 on: June 30, 2014, 04:18:10 PM »
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? :)

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,762
  • Gender: Male
Re: [How to] Get your theme ready for approval
« Reply #2 on: June 30, 2014, 04:48:50 PM »
It seems a very good idea ;)
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: [How to] Get your theme ready for approval
« Reply #3 on: June 30, 2014, 08:44:34 PM »
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.

Offline Colin

  • Lead Developer
  • SMF Hero
  • *
  • Posts: 7,704
  • Gender: Male
  • SMF Developer
    • colinschoen on GitHub
Re: [How to] Get your theme ready for approval
« Reply #4 on: June 30, 2014, 11:16:16 PM »
Sounds good to me!
"If everybody is thinking alike, then somebody is not thinking." - Gen. George S. Patton Jr.

Colin

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: [How to] Get your theme ready for approval
« Reply #5 on: July 08, 2014, 09:02:58 PM »
Ok, here's another one for you Purple Peeps. We're supposed to write custom theme markup that validates as XHTML Transitional. I can do that easily enough, but in some instances I specifically want to break validation.

The reason is that I want to include some of the WAI-ARIA stuff for better a11y. This stuff does not validate with an XHTML Transitional doctype. It will validate with an HTML 5 doctype, but frankly rewriting all of 2.0.x to validate as HTML 5 is too much work for one custom theme (even for me).

Even though the WAI-ARIA stuff doesn't validate as XHTML Transitional, it doesn't cause any problems with rendering or functionality, and is supported back to IE8 as well as in real browsers. Apart from the WAI-ARIA stuff, all other markup would validate (already does, of course).

Now obviously I could get fancy with javascript and insert the a11y stuff via js, so it was hidden from markup validation and it would all get a nice green stamp. That seems a bit bonkers to me though. I reckon it makes more sense to just throw it straight in the markup.

Wotcha reckon? :D

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,912
  • Gender: Male
    • Kindred-999 on GitHub
Re: [How to] Get your theme ready for approval
« Reply #6 on: July 09, 2014, 07:35:08 AM »
I reckon that some exceptions to the standard rules can be accepted on a case by case basis. :D
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Online Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,234
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: [How to] Get your theme ready for approval
« Reply #7 on: July 09, 2014, 09:15:13 AM »
Heh, yeah.

I know the guidelines say to validate to XHTML Transitional, but as long as it validates to the doctype it's been given (HTML5 in this case) then that's fine.

Offline gonencemlak.com.tr

  • Newbie
  • *
  • Posts: 3
Re: [How to] Get your theme ready for approval
« Reply #8 on: September 13, 2014, 04:19:03 PM »
I cheked for transitional as you are. It is looking validaded.  gonencemlak.com.tr hasn't any problem. But for html5 trehe are some problem.How we'll do?

Online Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,234
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: [How to] Get your theme ready for approval
« Reply #9 on: September 13, 2014, 04:26:05 PM »
You only need to validate to the Doctype you've given it, and for us, it only matters if you're submitting for the theme site, if your theme is exclusive to your site, we don't really care.

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,077
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [How to] Get your theme ready for approval
« Reply #10 on: March 14, 2015, 07:31:38 PM »
how to  add single new language file

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,008
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: [How to] Get your theme ready for approval
« Reply #11 on: March 17, 2015, 01:16:32 PM »
{dhayzon} just copy ThemeStrings.english.php and change the english to your language, then when opened you make the changes as required ... use other language files to get idea on how to lay it out.  Many themes have non english language files so see how they do it.  But please remember your themes default language must be english for it to be on Theme Site

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,077
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [How to] Get your theme ready for approval
« Reply #12 on: March 17, 2015, 08:09:00 PM »
thx  Ρουνικ