Creating and understanding themes.

[[Unknown]]

What is a theme?

»	A theme is the look and feel of the forum.  Themes can be switched between by users, and usually have their own html, css, javascript, and images.  Themes control virtually every visual aspect of SMF, allowing for easier customization.

What is the default theme?  What is it there for?

»

The "Default" theme is, actually, not the "default theme."  while SMF starts out with it as the theme, the "Default" theme is only a collection of the default templates.  That is, these templates are "fallbacks" incase the current theme does not have the template. This is similar to URLs - if you don't specify a domain name, (ie. /style.css) it uses the default. (making it www.simplemachines.org/style.css)  In this case, it's a bit different, but the concept is the same.

I don't like or want the default theme - can't I just change it?

»	Well, you can do whatever you want but this isn't recommended for two reasons.  First off, some other theme might expect the old default template - and second, leaving the default templates alone makes upgrading easier. Don't worry - you *can* make the default theme unselectable.

What's with all this template business?

»	A template is a collection of related sub templates.  Templates can be left out of a theme, as they will come from the default theme - but sub templates cannot.  The real question is, what is a sub template?

Okay, I'll bite.... what's a sub template?

»

I'm glad you asked.  A sub template is what actually has the html in it.  You can change, for example, the admin_login sub template to make the administrative password prompt look different.  You could change the error sub template to change what is displayed upon an error. It's important to note that sub templates are grouped within templates.  The error sub template can be found in the Errors template, just as another example.

So where do I get to these templates and sub templates? *might change*

»

All the themes, by default, are stored in the Themes folder inside your forum installation directory.  Inside this should be a few directories, each corresponding to a different theme.  Inside one of these folders is a list of templates - for example, Errors.php.  If you open this file up, you should see that it has the sub templates inside it.

How can I change how things look? Which sub templates are which?

»	There should be a list below, but for most things you'll want to change the main layer.  Layers are groups of two sub templates that go above and below the next layer or the content. By default, there's only one layer - the main layer.  It's two sub templates are main_above and main_below.

-[Unknown]

[[Unknown]]

This is confusing.... I just want to change something simple!

»

Most of the sub templates are just HTML.  The only notable thing is that if you want to use an apostrophe, you must put a \ before it.  So, instead of putting "it's" in there, but "it\'s". It's really not that hard, though.  Great pain has been taken to make the sub templates simple - and they just use PHP code.  You only need a basic understanding of PHP to understand them. For a good tutorial on PHP, please see Parham's PHP Tutorials.

Well, I might be able to do some... but there's just so many files!! *might change*

»

You only need to modify the index.template.php template to affect most of the layout of your forum.  You can do this by going into the administration center and selecting "Theme and Layout Settings".  In there, click "Create New" in the upper right corner - then, click the "New Theme" you just created.  You should now see options to rename it, and the like - next, you'll want to click "Modify the index.php template".

Is there a list of templates? *has changed, needs rewriting*

• BoardIndex - this is the board index.  That's the main page of the forum.
     Sub templates: main
• Calendar - the calendar, and related sub templates.
     Sub templates: main, post, edit, link
• Display - topic display - the posts themselves.
     Sub templates: main
• Errors - error messages..
     Sub templates: error
• Help - the help screen. (you know, the help button.)
     Sub templates: help_above, help_below, main
• index - this is the stuff around the main content that goes on every page.
     Sub templates: main_above, main_below, menu, init
• InstantMessage - instant message display, sending, etc.
     Sub templates: folder, send, ask_delete
• Login - basic login, as well as maintenance login and admin verification.
     Sub templates: login, kick_guest, maintenance, admin_login
• Memberlist - the memberlist, which can be viewed and searched.
     Sub templates: main, search
• MessageIndex - the message index, or in other words boards.
     Sub templates: main
• MoveTopic - moving a topic?
     Sub templates: main
• Notify - confirmations for turning on/off notifications.  Seldom seen except via email.
     Sub templates: main, notify_board
• Poll - poll editing...
     Sub templates: main
• Post - posting a new topic, a reply, or something?
     Sub templates: main, spellcheck
• Printpage - printing a topic.
     Sub templates: print_above, print_below, main
• Profile - the profile, editing and viewing alike.
     Sub templates: profile_above, profile_below, summary, showPosts, trackUser, trackIP, account, personal, forumProfile, theme, notification, imprefs, deleteAccount, profile_save
• Recent - recent posts, unread topics, and unread replies.
     Sub templates: main, unread, replies
• Register - registration... before and after.
     Sub templates: before, after
• Reminder - forgot your password?
     Sub templates: main, sent, set_password, ask
• ReportToModerator - someone abusing the forum?
     Sub templates: main
• Search - this is the main search screen and results.
     Sub templates: main, results
• SendTopic - who're you going to send it to?
     Sub templates: main
• Settings - theme settings and options.
     Sub templates: settings, options
• SplitTopics - splitting and merging topics.
     Sub templates: ask, main, select, merge, merge_done, merge_extra_options
• Stats - statistics about your forum.
     Sub templates: main
• Who - who is online, and what're they doing?
     Sub templates: main
• Wireless - wireless access via WAP, WAP 2, or i-mode.
     Sub templates: wml_above, wml_below, wml_boardindex, wml_messageindex, wml_display, wml_error, imode_above, imode_below, imode_boardindex, imode_messageindex, imode_display, imode_error, imode_post, imode_login, wap2_above, wap2_below, wap2_boardindex, wap2_messageindex, wap2_display, wap2_error, wap2_post, wap2_login

What is context?

»

Context is basically, well, the context of this page view.  In other words, it's what makes one view different from the next or last.  Maybe there are more or less boards... maybe someone posted a new topic... these are all things the template context can tell you. The same context information isn't available everywhere.  For example, the list of boards you can move a topic to isn't there when you are editing your profile because that's illogical.

What is the difference between settings and options?

»	Settings are global for all users, while options are only for the current member. These settings and options are also affected by the "default affect" - if there is a setting in the "default theme," it is used as the "fallback" for all other themes.

*more to come, please don't reply but instead start a new topic if you want to comment.*

-[Unknown]

[thekiller]

how can i upload style from my pc to my smf

[[Unknown]]

There's a box to install from a file... but that's not really anything to do with this topic.

-[Unknown]

[CapriSkye]

i have a question about BoardIndex and index templates
is stuff in index will show on every page the only difference? and BoardIndex is really the forum main page? thanks

[[Unknown]]

Yes.

-[Unknown]

[smack]

I have a question about

Code Select Expand

<div id="myid">HTML Here.</div>

Can the forum be created with only style sheet and no tables?...

[[Unknown]]

It could.  You can use whatever HTML you like.

Clearly, some things ARE tabular data, and SHOULD be in tables.

-[Unknown]

[Logue]

I'd like to specify an separate stylesheet with a displayd language.
like "style.english.css"

For example, Ariel set to the default is satisfactory when writing the alphabet etc., but since fonts, such as Japanese and Chinese etc, are not included, appearance will worsen.

[[Unknown]]

Then just do it based on $txt['lang_locale']...?

-[Unknown]

[Logue]

Then just do it based on $txt['lang_locale']...?

-[Unknown]

Yes,
In Macintosh version IE, priority was given to the font setting of the style sheet and Japanese was garbled.

[spirulez]

Is there a list of templates? *has changed, needs rewriting*

Hi

Will this list be rewritten for the new branch 1.1?

[[Unknown]]

It may be, when that version is closer to final.  That or another list will be made.

-[Unknown]

[Rennyn]

I've downloaded and installed the Dark Red theme.. but now, my News Fader on the index page is wrong.. it fades in on the first news item... then switches to the next item to fade out on.. where can I fix this at, because it works fine in the 'default' template?

[xenovanis]

I've downloaded and installed the Dark Red theme.. but now, my News Fader on the index page is wrong.. it fades in on the first news item... then switches to the next item to fade out on.. where can I fix this at, because it works fine in the 'default' template?

http://www.simplemachines.org/community/index.php?topic=43611.0

Please ask your questions in that thread.

[Ivan Milanez Castellanos]

So OK now I know what a template is so how can I add a sidebar menu to my theme I'm personalizing classic theme.

Classic Theme has side bar menu but only for administration and I want it to be there for every user although not with the same options.

Any help is much appreciated.

[Comm]

I wanted to install a Teamspeak Display page on my forum (hxxp:sourceforge.net/projects/tsdisplay/ [nonactive]) I wanted to make it look similar to looking at a calendar or the google member map page where the header and footer are still visible.

It, however, does not come with an installation guide for SMF. It comes with two PHP files, a .css file, and some images. I know that I will need to make my own source and template files but I'm not sure what to put where. I don't know if anyone else could help me integrate the display to make it look like a normal php page in the forum.

Thanks

[Sheepy]

Perhaps this topic is better moved to the new shiny Theme board.  Coders in general are not famous for their template designing skills.

[jsea1680]

GUYS, I am such a NOOB! I don't have a clue how to do this stuff! I created a website hxxp:www.unknownsoldierswow.com [nonactive] and don't know how to change themes, fonts, really anything. Is there a company or people I could pay to help me maintain website? Any help would be great. Can also be reached at [email protected]

Thanks!

[GhostWalker]

Did we ever get a break down on the CSS code??

I had a website before, and the help area showed step by step pictures of each area of the css file. is that available?

[Yellowrose]

OK I have a question that I think the answer should be added here for budding theme creators.

It may have been silly to do but what I did was use the default theme folder to do my theme. Just changing what was needed in the css file and changing the images needed in the themes/images folder as well as any changes to other images for post, topic etc.

What I would like to do is package it all together so it is a selectable theme for my members.

How do I go about doing this and what files should I include ? as in the needed template files.

I have a few mods installed and if I should ever release these themes I am creating would like to include the edited template files so others won't have to make the needed edits.

I really haven't seen or it's just to old a topic to go through so many pages.

Is there a topic that lists everything that should be included in a new theme? and what is needed to make it an installable packaged theme that can be easily installed by others.

[青山 素子]

If your theme is based on the default theme, you should only include those files you changed or added. Any templates your theme does not include will be pulled from the default theme directory. You do need to keep all the images for your theme, even if you did not change these.

You will also need the theme_info.xml file, customized with your theme information.

The only thing that should be in the languages folder is Settings.english.php, and the strings should be customized for your theme.

[SMdot™]

GUYS, I am such a NOOB! I don't have a clue how to do this stuff! I created a website www.unknownsoldierswow.com and don't know how to change themes, fonts, really anything. Is there a company or people I could pay to help me maintain website? Any help would be great. Can also be reached at [email protected]

Thanks!

me me. pic me =)

[BonzaiRob]

I've been having some trouble adding mods, and I was wondering about whena  mod is applied. Does it just apply itself to the forum's default skin? I've been trying to apply it to a self-made skin with only basic files (index, index.template, style and images), could this be what's wrong?

[GhostWalker]

Does anyone know where in the "CSS code" you change the font color and size for the page numbers?

[rootlinuxusr]

When viewing the profile.template.php page, I'm trying to add a section to the left-side menu. For example:
[Modify Profile] <<-- This is the header.
Account Related Settings <<-- Setting1
Forum Profile Information <<-- Setting2
Look and Layout Preferences <<-- Setting3
Notifications and Email <<-- Setting4
Personal Message Options <<--Setting5
Edit Buddies <<--Setting6

I'm trying to add another section to either this page or the Forum Profile Information to create a selectable database similar to the avatars, but for userbars. >_> Is this even possible?

[SMdot™]

if you mean userbars as in signature bars you could simply create a droptext field in the bbc section after installing this : Signature BBC

so you'd simply alter the code in your profile.template.php file and add the after => array( etc etc codes for a drop down so that the user can select one of those and it'll automatically input the code in the signature box.

[GhostWalker]

Does anyone know where in the "CSS code" you change the font color and size for the page numbers?

Can anyone help me on this?

[Kays]

Does anyone know where in the "CSS code" you change the font color and size for the page numbers?

Can anyone help me on this?

If you want to know what css class  is used for a section, Look for some text in that area, in your case "Pages:". Do a View Source on that page and then Ctrl-F for find and search the page for that word. Then you can see how that section of the page is put together and what classes are used where.

[ITFS]

This is a problem me and the admins on my forum have been trying to figure out; we're all noobs when it comes to SMF, as for the majority of our online-lives we've been trained for IF forums and all that watered down stuff.  The question is very simple:

How do we change the theme's picture at the top?  We want to replace what usually displays the theme's name with our forum's banner.  I don't see any code for the CSS that corresponds with it.  Is what we're trying to do even possible?

[青山 素子]

It depends on the theme. For the default theme, just put in a URL in the theme settings area of the admin. The image linked there will replace the text at the top-left.

For other themes, check index.template.php (where the header and footer code are kept) or ask the author.

[filament]

what i am asking is how to split the messages in a theme like hxxp:sm.org [nonactive](like here-connected)
i want to make it like this

hxxp:img241.imageshack.us/img241/2733/boluk1iv5.jpg [nonactive]

[Shawn Gotti]

greetings all. i am a newbie, and will TRY to keep the dumb inquiries to a miniumum.

that said, i do have a question...

when i switch themes, certain buttons are missing on my site, including the "Email" button when i search the member list, and when creating a message, the icons for the other mods installed. how do i rectify this?

[IchBin™]

You need to remember that mods only install to the default theme. If you do not manually install them to the custom theme your buttons etc will not show.

Manual Installation of Mods

As for the email button, that may be a theme specific problem. If you could post a link or Screen shot we could probably determine that. What theme is it?

[tarrou]

is there an easy way to just make my theme look like my website.  color wise and put my banner up on the theme?

Thanks in advance

Tarrou

[IchBin™]

There is no easy way. It requires work to convert a site template into an SMF theme. If you can't do it yourself by following all the information on this site, then you should probably post in the help wanted board.

Also, could you please make a new topic if you have your own question that is not related to the original topic next time? This topic was meant to be an informative post, and not a support topic. Thanks!

[Gary]

The simplest way is to copy and paste the design for your site into index.template.php in appropriate head and body tags, and add any CSS classes to style.css (or call a new stylesheet)

Check out the guide Daniel15 for more information.

[audioedge]

this guide is confusing as hell, no idea why its a sticky

[Deaks]

There is also

http://docs.simplemachines.org/index.php?board=94.0

[Lady Kiara]

http://docs.simplemachines.org/index.php?topic=233

I only have the inspiration cuz I dunno squat else...I just click on a lot of things and try to get it.

I wanted to get better smilies than the default. Also...


How do I get my forum from looking like this: hxxp:kupax.com/view/full/1865_q7jvq [nonactive]

To look like this: hxxp:kupax.com/view/full/1866_tslr8 [nonactive]

[Rjay]

Where do I go to create a theme for 1.X? Do we have files or something?

[Deaks]

http://docs.simplemachines.org/index.php?board=94.0;sort=subject

should help,

most common files modified are

style.css
index.template.php
images folder

[alnmedia]

I have a theme design with the HTML code for he design however, how do i get it to work in SMF?

[青山 素子]

It all depends on how much you will be changing things. Most of the work will probably be with index.template.php and the header and footer sections. Take a copy of the file from the default theme and edit it to match the code you wish to use.

[alnmedia]

attached is what i am talking about...i want to use that for my background, etc.
i had a designer design it for me and then a coder code the PSD to HTML

[gracie20]

can anyone tell me..  how can i upload style from my pc to my smf?
Thanks in advance

Gracie Sh
hxxp:hdtvlcdplasma.com [nonactive]

[Gary]

Go to the Theme and Layout Section of your Admin Center.