News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Creating Themes for SMF 2.0 - Introduction

Started by forsakenlad, November 21, 2009, 04:29:21 PM

Previous topic - Next topic

forsakenlad

I would like to start this guide by saying that if you ever tried creating a theme for SMF 1.X series and weren't able to or shied out because of the need to modify some PHP files, those days are over now. With the introduction of a CSS based semantic theme that comes as default with SMF 2.0 codenamed "Curve", anyone with basic CSS knowledge is able to modify the looks of the forum to their needs. People with moderate or advanced CSS knowledge will find it that by just modifying the stylesheets that come with SMF, they will be able to create a theme for themselves that looks and feels completely different.

Instead of using one document to include all the information on creating themes, we've decided to write two documents that will address two different types of authors. One is for the person with little or no CSS/HTML knowledge and the other one is for authors who have worked with CSS and HTML before. Note that none of the guides require any PHP or SMF knowledge. Here we go:

Creating Themes for SMF 2.0 - 01 The Basics
Creating Themes for SMF 2.0 - 02 Professional Theme Design (In Progress)
Creating Themes for SMF 2.0 - 03 Packaging Your Theme For Release (In Progress)

Also there are a few terms that would assist you in theme design, some SMF spesific and some more general ones:

CSS: Cascading Style Sheets is a mechanism that allows you to style your HTML webpages that can be called from a file or put into HTML code directly.

Curve: The name of the theme that comes as default with SMF 2.0

HTML: HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items.

Javascript: JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser.

Semantics: The Semantic Web is an evolving development of the World Wide Web in which the meaning (semantics) of information and services on the web is defined, making it possible for the web to "understand" and satisfy the requests of people and machines to use the web content.

Template: Templates in SMF are consecutive files in a theme that hold the HTML for sections in your forum. For example the template for topic view is Display(.template.php) and the one for the search page is Search(.template.php). index.template.php is an exception to this rule as it is the main template file. It contains the general HTML/JS that wraps around the other sections of your forum. So when you put something in your index.template.php file it shows in all the pages of your forum.


Note to theme authors: Please feel free to post any questions you have about the guides in their respective topics. However if you have a *support* question that is irrelevant to the guide or not covered by it please start a new topic in the Graphics and Templates board.
Eren "forsakenlad" Yaşarkurt
SMF Friend & Former Team Member

willowyok

#1
SMF 2.0  is intended for people, who have no knowledge in CSS or PHP. The FTP client  text editor image manipulation software and Photoshop. To create a theme based on Curve step by step and the end creating theme of information.


devons

Thanks Eren, Great tutorial! Love it...  :)

Apllicmz

thanks did have news about
Creating Themes for SMF 2.0 - 02 Professional Theme Design (In Progress)
Creating Themes for SMF 2.0 - 03 Packaging Your Theme For Release (In Progress)
still wait...



COGlory


Shrink


Advertisement: