Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: [Unknown] on November 27, 2003, 05:20:50 AM

Title: Creating and understanding themes.
Post by: [Unknown] on November 27, 2003, 05:20:50 AM
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 layerLayers 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]
Title: Re: Creating and understanding themes.
Post by: [Unknown] on November 28, 2003, 08:53:09 PM
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 (http://www.simplemachines.org/community/index.php?board=41).

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*

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]
Title: Re: Creating and understanding themes.
Post by: thekiller on April 11, 2005, 07:53:49 AM
how can i upload style from my pc to my smf
Title: Re: Creating and understanding themes.
Post by: [Unknown] on April 11, 2005, 10:29:48 AM
There's a box to install from a file... but that's not really anything to do with this topic.

-[Unknown]
Title: Re: Creating and understanding themes.
Post by: CapriSkye on May 02, 2005, 04:27:03 AM
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
Title: Re: Creating and understanding themes.
Post by: [Unknown] on May 02, 2005, 02:23:42 PM
Yes.

-[Unknown]
Title: Re: Creating and understanding themes.
Post by: smack on May 25, 2005, 09:57:15 PM
I have a question about <div id="myid">HTML Here.</div>

Can the forum be created with only style sheet and no tables?...
Title: Re: Creating and understanding themes.
Post by: [Unknown] on May 25, 2005, 11:18:24 PM
It could.  You can use whatever HTML you like.

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

-[Unknown]
Title: Re: Creating and understanding themes.
Post by: Logue on May 30, 2005, 02:48:39 AM
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.
Title: Re: Creating and understanding themes.
Post by: [Unknown] on June 03, 2005, 02:49:45 AM
Then just do it based on $txt['lang_locale']...?

-[Unknown]
Title: Re: Creating and understanding themes.
Post by: Logue on June 26, 2005, 05:33:07 AM
Quote from: [Unknown] on June 03, 2005, 02:49:45 AM
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.
Title: Re: Creating and understanding themes.
Post by: spirulez on July 11, 2005, 11:46:48 AM
Quote from: [Unknown] on November 28, 2003, 08:53:09 PM
Is there a list of templates? *has changed, needs rewriting*
Hi

Will this list be rewritten for the new branch 1.1?
Title: Re: Creating and understanding themes.
Post by: [Unknown] on July 13, 2005, 03:51:49 PM
It may be, when that version is closer to final.  That or another list will be made.

-[Unknown]
Title: Re: Creating and understanding themes.
Post by: Rennyn on September 01, 2005, 02:04:22 AM
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?
Title: Re: Creating and understanding themes.
Post by: xenovanis on September 01, 2005, 02:09:56 AM
Quote from: Rennyn on September 01, 2005, 02:04:22 AM
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.
Title: Re: Creating and understanding themes.
Post by: Ivan Milanez Castellanos on November 21, 2005, 03:20:59 PM
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.
Title: Re: Creating and understanding themes.
Post by: Comm on December 25, 2005, 12:10:35 AM
I wanted to install a Teamspeak Display page on my forum (Link to SourceForge (http://sourceforge.net/projects/tsdisplay/)) 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
Title: Re: Creating and understanding themes.
Post by: Sheepy on April 01, 2006, 07:42:57 PM
Perhaps this topic is better moved to the new shiny Theme board.  Coders in general are not famous for their template designing skills.
Title: Re: Creating and understanding themes.
Post by: jsea1680 on October 04, 2006, 07:03:06 PM
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!
Title: Re: Creating and understanding themes.
Post by: GhostWalker on February 24, 2007, 12:13:35 AM
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?
Title: Re: Creating and understanding themes.
Post by: Yellowrose on March 04, 2007, 03:27:18 PM
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.
Title: Re: Creating and understanding themes.
Post by: 青山 素子 on March 29, 2007, 07:25:43 PM
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.
Title: Re: Creating and understanding themes.
Post by: SMdot™ on April 08, 2007, 01:13:37 AM
Quote from: jsea1680 on October 04, 2006, 07:03:06 PM
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 =)
Title: Re: Creating and understanding themes.
Post by: BonzaiRob on May 12, 2007, 02:11:14 PM
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?
Title: Re: Creating and understanding themes.
Post by: GhostWalker on May 15, 2007, 11:47:12 AM
Does anyone know where in the "CSS code" you change the font color and size for the page numbers?
Title: Re: Creating and understanding themes.
Post by: rootlinuxusr on May 16, 2007, 07:49:56 AM
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?
Title: Re: Creating and understanding themes.
Post by: SMdot™ on May 17, 2007, 11:10:28 AM
if you mean userbars as in signature bars you could simply create a droptext field in the bbc section after installing this : Signature BBC (http://custom.simplemachines.org/mods/index.php?mod=450)

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.
Title: Re: Creating and understanding themes.
Post by: GhostWalker on May 17, 2007, 10:32:47 PM
Quote from: GhostWalker on May 15, 2007, 11:47:12 AM
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?
Title: Re: Creating and understanding themes.
Post by: Kays on May 17, 2007, 11:10:49 PM
Quote from: GhostWalker on May 17, 2007, 10:32:47 PM
Quote from: GhostWalker on May 15, 2007, 11:47:12 AM
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. ;)
Title: Re: Creating and understanding themes.
Post by: ITFS on June 10, 2007, 10:37:28 PM
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?
Title: Re: Creating and understanding themes.
Post by: 青山 素子 on June 11, 2007, 01:58:06 AM
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.
Title: Re: Creating and understanding themes.
Post by: filament on October 17, 2007, 07:10:57 AM
what i am asking is how to split the messages in a theme like sm.org(like here-connected)
i want to make it like this

http://img241.imageshack.us/img241/2733/boluk1iv5.jpg
Title: Re: Creating and understanding themes.
Post by: Shawn Gotti on November 15, 2007, 11:12:49 AM
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?
Title: Re: Creating and understanding themes.
Post by: IchBin™ on January 05, 2008, 01:15:00 AM
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 (http://docs.simplemachines.org/index.php?topic=402)

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?
Title: Re: Creating and understanding themes.
Post by: tarrou on February 12, 2008, 07:56:48 PM
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
Title: Re: Creating and understanding themes.
Post by: IchBin™ on February 12, 2008, 08:55:33 PM
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!
Title: Re: Creating and understanding themes.
Post by: Gary on February 14, 2008, 04:00:06 PM
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 (http://www.simplemachines.org/community/index.php?topic=145838.0) Daniel15 for more information.
Title: Re: Creating and understanding themes.
Post by: audioedge on May 11, 2008, 02:53:13 PM
this guide is confusing as hell, no idea why its a sticky
Title: Re: Creating and understanding themes.
Post by: Deaks on May 11, 2008, 02:59:52 PM
There is also

http://docs.simplemachines.org/index.php?board=94.0
Title: Re: Creating and understanding themes.
Post by: Lady Kiara on May 12, 2008, 11:50:53 AM
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: (http://kupax.com/view/full/1865_q7jvq)

To look like this: (http://kupax.com/view/full/1866_tslr8)
Title: Re: Creating and understanding themes.
Post by: Rjay on May 16, 2008, 07:12:26 AM
Where do I go to create a theme for 1.X? Do we have files or something?
Title: Re: Creating and understanding themes.
Post by: Deaks on May 16, 2008, 07:30:01 AM
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
Title: Re: Creating and understanding themes.
Post by: alnmedia on June 02, 2008, 03:59:20 PM
I have a theme design with the HTML code for he design however, how do i get it to work in SMF?
Title: Re: Creating and understanding themes.
Post by: 青山 素子 on June 02, 2008, 05:10:48 PM
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.
Title: Re: Creating and understanding themes.
Post by: alnmedia on June 02, 2008, 06:50:52 PM
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
Title: Re: Creating and understanding themes.
Post by: gracie20 on August 22, 2008, 04:19:46 AM
can anyone tell me..  how can i upload style from my pc to my smf?
Thanks in advance

Gracie Sh
http://hdtvlcdplasma.com
Title: Re: Creating and understanding themes.
Post by: Gary on August 22, 2008, 04:27:09 AM
Go to the Theme and Layout Section of your Admin Center.