Simple Machines Community Forum

This guide is intended for people who have no knowledge in CSS/HTML or PHP whatsoever. However in this guide we are assuming that you know how to use an FTP client, a text editor or some image manipulation software such as Adobe Photoshop if you want to modify the images that come with SMF. In this guide we will be demonstrating how to create a theme based on Curve step by step and in the end creating a theme with the information provided in this guide.

Table of Contents:

   
• Creating the actual theme based on Curve (#post_one)
• Customizing the design (#post_two)
  
  
        
  • Replacing the body background (#post_twoone)
  • Changing the overall look and feel of your forum (#post_twotwo)
  • Changing the font size (#post_twothree)
  • Changing the font colour (#post_twofour)
  • Getting your logo in the header part of the forum (#post_twofive)
• Customizing the templates (#post_three)
• Let's create our own theme! (#post_four)

I. Creating the actual theme based on Curve

Instead of modifying the current default theme its always better to create a theme based on it. SMF by nature is built in a way so when a template file isn't included in a theme, it falls back to the default template files thus making the upgrade process much easier and painless. If you modify the default theme instead of creating one that is based on it, in upgrades you would lose all the changes you have made. Also keep in mind that its always better to do this operation on a clean install of smf or an smf installation where no mods have been installed. Because the files are copied from the curve theme, in the event of a mod, the copied theme has some mod code in it which would give errors if installed on a forum without that mod.

The process is a really easy and straight forward one. Here are the steps to create a theme based on Curve:

• Go to your "Administration Center"
• Click "Configuration --> Themes and Layout --> Manage and Install"
• Under the "Install A New Theme" section type of the name of the theme in "Create a copy of Default named" field and click "Install!" As you can see below in this case we are creating a theme called "Clarity"

Now that we have our theme we have to activate in order to be able to use it. Doing it is really easy:

• Go to the previous screen where you've created the theme
• Under the  "Themes and Layout Settings" section make sure the theme you've created is chosen in the select boxes
• Click "Save" to activate the new theme for all the users in the forum

We have a theme we can work on now without breaking down our forum. In the next part of the guide we will be telling you the basics on modifying the look and feel of your forum.


II. Customizing the design

Well by customizing design I mean changing the looks, not adding or subtracting content to the theme which means that we will only be modifying the CSS files at the moment. First of all lets start by describing what each CSS file does and where they are located:

Location: All your css files are located in "Themes/{your-theme}/css" folder. Note that there are probably only two files there at the moment, index.css which is our main stylesheet and rtl.css.


A. Stylesheets

1.  index.css

This is our main stylesheet which we can use to create a completely new look for our forum. To get what I mean, just rename the file and ctrl+f5 to see that all design markup is removed and our forum has become plaintext.

2.  rtl.css

Used for customizing how the forum looks if the user is using a right-to-left language. As far as I know there are two widely used such languages which are Arabic and Hebrew. Unless we add our own classes or id's to the stylesheets we won't be needing to customize them.


B. Common Tasks

Here we will be explaining how to change the looks of your forum by customizing the index.css file:

1.  Replacing the body background

Navigate to:

/* Set a fontsize that will look the same in all browsers. */
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}

Here the background property is used to modify the background image. The first code #E9EEF2 is the background colour that is used after the background image has been repeated horizontally. Repeat-x means the image should be repeated horizontally, repeat-y would repeat it vertically, no-repeat would only show one big image and deletion of that text would make the image repeat both horizontally and vertically. Here is more info on the subject: http://www.w3schools.com/css/css_background.asp (http://www.w3schools.com/css/css_background.asp)

2.  Changing the overall look and feel of your forum

In SMF 2.0 Curve one image is used to control the way your forum looks and it's called "main_block.png" which can be found at "Themes/{your-theme}/cssimages/theme/" folder. You can modify it to change the overall backgrounds and images of your forum. You'll see what I mean when you open the image with an image ediyor such as Adobe Photoshop (http://www.adobe.com/products/photoshop/family/) or the open-source alternative Gimp (http://www.gimp.org/). Experiment with the image to get used how the image controls the looks of SMF.

3.  Changing the font size

Navigate to:

/* Set a fontsize that will look the same in all browsers. */
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}

Here the font property modifies the overall text size of the forum. The first percentage is the font-size whereas the second one is the the line spacing, the line-spacing determines the space between each line. Play around with it to get a font-size of your liking. Here is more info on the subject: http://www.w3schools.com/css/css_font.asp (http://www.w3schools.com/css/css_font.asp)

4.  Changing the font colour

Navigate to:

/* use dark grey for the text, leaving black for headers etc */
body, td, th, tr
{
   color: #444444;
}

Here by changing the color parameter you can replace the main text colour. Though to change other text colour you can search the index.css file for "colour" and replace the colour codes to your liking.

5.  Getting your logo in the header part of the forum

Let's be honest, the SMF logo change function in the administration center only removes the forum name and replaces it with your own. It gives no real control over the header. Here I'll explain how to change the theme and insert your own image into the header:

First way edit the "main_block.png" file that has been explained in the second point in this section. The big block on the bottom can be modified to give it the header look you want. And then you would have to make sure that you aren't displaying the smf logo, the forum name text and also make sure there is more padding:

Navigate to:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
   line-height: 45px;
   font-size: 1.8em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
   margin: 0;
   padding: 0;
   float: right;
   line-height: 3em;
}

And replace it like this adding "display: none;" properties to the id and classes so they aren't shown anymore:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
   line-height: 45px;
   font-size: 1.8em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
   display: none;
}
/* float these items to the right */
#siteslogan, img#smflogo
{
   margin: 0;
   padding: 0;
   float: right;
   line-height: 3em;
   display: none;
}

Now we would have to increase the top gap to according to how big is your header image:

Navigate to:

#top_section
{
   min-height: 65px;
   overflow: hidden;
   margin-bottom: 3px;
}

Change the min-height property according to how big your header is.


III. Customizing the templates

The difference between customizing the design and customizing the templates may look minor but by customizing the design you cannot change the markup but only the looks. Let's say you wanted to add a flash banner to every page on your forum, you could only do that by editing the SMF templates. Here we will be describing what templates control the most used parts of the forums.

There are four main templates in SMF where the users mostly browse. There is "index.templates.php" which is loaded in every click and basically is what wraps your forum. The second one is the "BoardIndex.template.php" file which is the board index view, the frontpage of your forum. The third one is "MessageIndex.template.php" which contains the sub-boards and the messages inside a board. The fourth and last one is the "Display.template.php" file which contains the HTML for the topic view.

You can add HTML code to these templates really easily. If you want to customize one of them (except index.template.php file which is already in your themes folder by default), navigate to your default theme folder and copy the file to your theme directory and start editing it right away.

The most common mistake people make when editing these files is that they enter HTML code directly into the PHP file. Because PHP is a programming language you should tell it to print the HTML code therefore you should use the "echo" command. Here is an example:

Navigate to index.template.php file and find:

   echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
   <div id="header"><div class="frame">
      <div id="top_section">
         <h1 class="forumtitle">

There are two ways where we can put our custom HTML here, either we can use the underlying echo to print our code like this:

   echo !empty($settings['forum_width']) ? '
My name is Eren and Im uber cool!
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
   <div id="header"><div class="frame">
      <div id="top_section">
         <h1 class="forumtitle">

Or we can create our own echo to print out the html:

   echo 'My name is Eren and Im uber cool! ';
   echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
   <div id="header"><div class="frame">
      <div id="top_section">
         <h1 class="forumtitle">

As you can see the content inside the echo function should be enclosed with apostrophes (') and should end with a semicolon. This need produces a common problem where any newbie starts getting parse errors. When there is content inside the echo function which contains ', this can be a javascript using ' or basically text like "I'm the roxorz!". Don't worry there is a workaround to that, you basically have to escape the charachter with a \. Here is how its done:

   echo 'My name is Eren and I\'m uber cool! ';
   echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
   <div id="header"><div class="frame">
      <div id="top_section">
         <h1 class="forumtitle">

Notice the \ sign before the ' in the uber cool statement :) Anyway if you've understood this guide correctly, we now have enough information to create our own theme. In the following section, we will create a theme step by step. Don't forget to read it as it may contain some tips and tricks which aren't in the more descrptive parts of this guide.


IV. Let's create our own theme!

As you know previously I've named my theme "Clarity" so in this section of the guide please consider all references to Clarity as references to your own theme. I strongly recommend you follow this section of the guide carefully and recreate the theme yourself. I'll provide the images I've used to create the theme.

First of all I'm going to change to background to something more lively and to add a bit of touch to it I'm going to make it fixed. Check the related section in the "Common Tasks" section of the guide.

Logically we will first need the image file, I'll use this image I've created in Photoshop, because I'll be making it fixed and one big image (no-repeating) I've made the image so it supports Full High Definition resolutions. Here is the image:

http://www.moobi.com.tr/smf/themeguide/clarity_bg.jpg (http://www.moobi.com.tr/smf/themeguide/clarity_bg.jpg)

Make sure you place this image in your theme directory in the images folder of the Clarity folder. Now we will display this background image like this. Open up index.css and navigate to:

/* Set a fontsize that will look the same in all browsers. */
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}

And replace it like this:


/* Set a fontsize that will look the same in all browsers. */
body
{
   background: url(../images/theme/clarity_bg.jpg) no-repeat fixed;
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}

As you can see we have a new background now:

There are a lot of glitches, we will fix them later on the guide. Though if you scroll to the end of the forum, you'll see that the copyright is unreadable. That is against the SMF License so we will make it stand out more. Navigate to:

#footer_section
{
   text-align: center;
   background: url(../images/theme/main_block.png) no-repeat 0 -820px;
   padding-left: 20px;
}

And replace it like this:

#footer_section
{
   text-align: center;
   background: url(../images/theme/main_block.png) no-repeat 0 -820px;
   padding-left: 20px;
}
#footer_section a
{
   color: #fff;
}

This added property tells to make all the links in the footer section white. A is the short for link and is represented as a in HTML as well.

Now that we have the background. Its time to edit the main_block.png file which we discussed earlies in the guide to change the overall look of the forum. Here is what I've done with Photoshop, you'll also notice that I've modified the background image I've used before to go with the new main_block.png file.

You can download these images from here:

New Background Image: http://www.moobi.com.tr/smf/themeguide/clarity_bg_new.jpg (http://www.moobi.com.tr/smf/themeguide/clarity_bg_new.jpg)
Main Block Image: http://www.moobi.com.tr/smf/themeguide/main_block.png (http://www.moobi.com.tr/smf/themeguide/main_block.png)

I kind of dislike the smf logo over there, so lets remove it by navigating to:

/* float these items to the right */
#siteslogan, img#smflogo
{
   margin: 0;
   padding: 0;
   float: right;
   line-height: 3em;
}

And replacing it like this, adding the display: none; property previously described in the guide:

/* float these items to the right */
#siteslogan, img#smflogo
{
   display: none;
}

Also the forum name looks really bad lets change the font-size and the color so it looks neater, navigate to:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
   line-height: 45px;
   font-size: 1.8em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}

And replace it like this:

/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
   line-height: 45px;
   font-size: 2.2em;
   font-family: Tahoma, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
   font-weight: 100;
}
h1.forumtitle a
{
   color: #fff;
}

Here is how our great theme looks, also note that it only took half an hour to create it:

As you can see our theme is finished. You can modify the images in the images folder with your favourite photo editing software and customize your theme even more. The theme we've just created is attached for any of you who want to test it.

Great tutorial!

This tutorial sure is going to help people out :) And I like the idea for the test theme. Definitely something you should work more on IMO. :)

Good stuff. Might be worth linking up the main_block.psd in step 2. I'll try and get an xcf version together as well.

Can't Gimp reads PSDs? Or perhaps not fully...

Not fully. It misses quite a bit.

That's one great tutorial! Love it  ;D

Nice tutorial! :D

I'm interested in just what exactly the rules are on Curve variants? It almost feels like I'm ripping off the theme considering I didn't make it but I've done 4 different complete variants now and I figure if anyone wants em I'd put them up for distribution.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.hitpoints.org%2Fmisc%2Fcurves%2FTellius-thumb.jpg&hash=01bf03c1d752b7b7bd3dc16ec980c906956a6dc0) (http://www.hitpoints.org/misc/curves/Tellius-big.png)
Tellius, I made this for my girlfriends Fire Emblem RP board. Fixed size, centered.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.hitpoints.org%2Fmisc%2Fcurves%2Fgameriot-thumb.jpg&hash=b8eea2fbefda8b6f93a205b3d54f06170f5906f5) (http://www.hitpoints.org/misc/curves/gameriot-big.png)
Designed directly based on Gameriot.com because I liked their design.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.hitpoints.org%2Fmisc%2Fcurves%2Firtblack-bthumb.jpg&hash=79e727400932adca8b312cedbfe0d0c83f84d950) (http://www.hitpoints.org/misc/curves/irtblack-big.png)
Designed for my schools science site inspired by an earlier NASA layout.

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.hitpoints.org%2Fmisc%2Fcurves%2Flight-thumb.jpg&hash=099a094077a65081745be0460a4e8ebb9d50e426) (http://www.hitpoints.org/misc/curves/light-big.png)
Same as the above but modified because some people dislike dark themes.

It's no problem if you modify the curve theme and distribute it freely trough themes category in here.

I like your second theme! Looking forward to download it after publishing (or can you give me a pm with it? thanks)

And thanks forsakenland for the tutorial! It is very usefull in modifying the themes we install!

Cool soon as I read up on the proper packing / posting procedures I'll put them up. And I'll shoot you a quick copy of that theme Schumilica.

zushiba, some excellent themes there! Really nice work :D

Great tutorial, alot of detail and the outcome is quite good, even though its simple. Then again, this is the basics tutorial. Can't wait for more!

Nice info.  I wish it was around when I made my theme.

I was able to go around the "footer_section a" issue.  It looks like a div close was missing in "BoardIndex.Template.php".


I changed it from:
<div id="posting_icons" class="align_left">';

// Mark read button.
$mark_read_button = array(
'markread' => array('text' => 'mark_as_read', 'image' => 'markread.gif', 'lang' => true, 'url' => $scripturl . '?action=markasread;sa=all;' . $context['session_var'] . '=' . $context['session_id']),
);

echo '
<ul class="reset">
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_some.png" alt="" /> ', $txt['new_posts'], '</li>
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_none.png" alt="" /> ', $txt['old_posts'], '</li>
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
</ul>
</div>';

to:
</div><div id="posting_icons" class="align_left">';

// Mark read button.
$mark_read_button = array(
'markread' => array('text' => 'mark_as_read', 'image' => 'markread.gif', 'lang' => true, 'url' => $scripturl . '?action=markasread;sa=all;' . $context['session_var'] . '=' . $context['session_id']),
);

echo '
<ul class="reset">
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_some.png" alt="" /> ', $txt['new_posts'], '</li>
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_none.png" alt="" /> ', $txt['old_posts'], '</li>
<li class="align_left"><img src="', $settings['images_url'], '/', $context['theme_variant'], '/new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
</ul>
</div>';

So far no errors with the web inspector...  :-X

Thank you so much for your straight forward step by step explanation!

If you wouldn't mind continuing it with a section that shows how to add a logo and center it...I think many would find it helpful.

Thanks Again,

Jim

This is very helpful , many thanks.  :)

I like this tutorial very much. It helps me to understand 'the system'. What I'm missing here is how about to change the width of the different parts of the forum.

Those will be explained in the next tutorial that I'm writing. But generally you can search the css file for "width:" and play around with the numbers to get what you want and learn what changes where.

Great work Eren!

Quote from: forsakenlad on January 03, 2010, 09:38:36 AM
Those will be explained in the next tutorial that I'm writing. But generally you can search the css file for "width:" and play around with the numbers to get what you want and learn what changes where.

Thank you!

Great guide.

So throwing my site's logo on the main_block.png file has me confused. I have it on there, and it's fine were it's at if the user has the browser maximized, but it's location depends on the width of the current window. It "floats" with the size of the browser window. You can see what I'm talking about at www.806minis.com. Is there anyway to avoid this?

Eren, you is great! :P

Quote from: kaoss on January 04, 2010, 12:15:30 PM
Great guide.

So throwing my site's logo on the main_block.png file has me confused. I have it on there, and it's fine were it's at if the user has the browser maximized, but it's location depends on the width of the current window. It "floats" with the size of the browser window. You can see what I'm talking about at www.806minis.com. Is there anyway to avoid this?

You should put it at the left of the png file then

Is there any way to create SMF themes if your not an administrator or site owner?

 This guide has been very helpful! Thank you!!! The one thing I can not find though is this Main_block.png you mention. I have looked both in my themes image directory, as well as the default image directory and can't find it. Any ideas on where it might be or has this changed with RC3?

Quote from: Ebel.Munkey007 on April 05, 2010, 08:34:54 PM
This guide has been very helpful! Thank you!!! The one thing I can not find though is this Main_block.png you mention. I have looked both in my themes image directory, as well as the default image directory and can't find it. Any ideas on where it might be or has this changed with RC3?

The image is still used in RC3.

Themes/{theme_name}/images/theme/main_block.png

Quote from: Shadow82x on April 05, 2010, 09:04:27 PM

Quote from: Ebel.Munkey007 on April 05, 2010, 08:34:54 PM
This guide has been very helpful! Thank you!!! The one thing I can not find though is this Main_block.png you mention. I have looked both in my themes image directory, as well as the default image directory and can't find it. Any ideas on where it might be or has this changed with RC3?

The image is still used in RC3.

Themes/{theme_name}/images/theme/main_block.png

Very odd - I did not have it. I dont know if its because of how it was installed (by my host) or because I upgraded it aftyer that, maybe both.... but I didn't have it. I downloaded the one in the Clarity zip and loaded that one to my images directory and have been playing with it ever since. Thanks again for this guide!

Hi,

Great Tutorial  :)
Can you tell me is this applies to version SMF 1.1.11 ?
if there are differences can you tell me ?

Thank you

Hi, this is a great tutorial, definately helped me understand a few things...
I have a question though, 
If I wanted to put my own image on there (image of my logo),  you had said we could put it right onto the main_block.png...  which worked except that it wont show the framost LEFT side of the image because it seems as though the right side of teh png is what is used...

Of course I could put my logo on the right side of my png file, but then my logo would be on the right side of my site.. I'm trying to get it on the left side. 

using firebug, i found the padding in which if i change it from 20 to 300 (for an example) I will now see my image logo.. however that padding also controls the navi padding and now that has moved over to mid page.

is there aanother way to do this?  has anyone been able to insert their logo onto the main_block png file and have it shown on the site? if so, coudl you share how you did this?
thanks.  :)

Actually you could do it by reversing the div order, but that is more trouble than it is worth. Better to use a separate logo.

you can place the logo in the header by moving the smflogo code but ya can also add an image as a background to the upper_section code in index.css like on this theme im making

http://www.eotsdzine.com/test/index.php

which has both a header background and a logo displayed in the same place

Thanks for this thread  8)

Great guide .
Here after i can also create themes
thanks u so much 

Any news on the next parts coming out?

Quote from: Antechinus on December 07, 2009, 03:18:10 PM
I'll try and get an xcf version together as well.

Has the xcf version been posted somewhere and I missed it? I have looked and looked and can't find it. I use GIMP and I don't think the main_block.psd is showing up right....or I am just not getting how to make the changes. Is there a free program that would do this right if the xcf version isn't available?

No I haven't made an xcf yet. Good point. There's a project for me. :)

That would be awesome. I'm too poor to afford Photoshop, so GIMP is a great substitute, but like I said (and you already know) the psd doesn't work right in GIMP.

It seems to work fine in gimp for me, but then again I might not know what I'm missing because I'm poor like you.  ;)

Anyway, why isn't this topic stickied? It's a great tutorial for getting started in theme-ing 2.0 and the responses here reflect that.

Good point. It's stickied now. :)

GIMP gets most of the psd but misses out on things like layer styles (gradients, opacity, etc). Unfortunately GIMP is a bit retarded so doing an xcf version of the main_block is a bit of a pain. I haven't had time to devote to it yet as I've been busy with other things.

Is there any way to open PSD files on GimPhoto?

Anyone?

Quote from: www.ainotenshi.org/stop-pirating-adobe-software-use-free-software-instead.... The main and fatal issue with GIMP that it DOES NOT handle PSD  format ...

I guess, it's not.

You can open PSD extension files with GIMP, not perfectly but you still can import the majority of it.

Quote from: Masterd on June 08, 2010, 02:35:16 PM
Is there any way to open PSD files on GimPhoto?

I explained the situation in the post above yours.  :P

Yes, I know that, but I use GimPhoto and it can't open PSD- s. Do I need any plugin or patch?

How can one alter the "info center" layout at the bottom? So changing the colour, and removing the pseudo-rounded corners?

Exelent tutorial, I'm waiting for ur others manual, like professional..  :D

I love this tutorial. Thanks for sharing this valuable information.

I'm in the process of completely overhauling a theme but I'm confused about one thing...
I changed my gradient images but there is like a border under them and I'm not sure where to find that so I can either change or delete that border. It just looks like a bar, a thick underline, under the gradients.

I'm on my way to actually creating a very unique looking theme and when I'm done, I may take up theme creations.

How do you change the color of these(circled in red)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi47.tinypic.com%2F15xu3vr.jpg&hash=fdd92b2bd38dad23fd4c41de13c9f1c6e6d15afd)

any one no?

Quote from: kiroBot on July 06, 2010, 07:32:33 AM
any one no?

I believe they are in the images folder called gradient1 and gradient2 ... ?

Quote from: Snowy on July 08, 2010, 03:23:38 PM

Quote from: kiroBot on July 06, 2010, 07:32:33 AM
any one no?

I believe they are in the images folder called gradient1 and gradient2 ... ?

in my cpanel?

no, in your theme folder

Sorry it took me so long to see this, kiro. Was on 6 days, 12 hours a day at work.
Flapjack is correct. In the folder of the theme you are working with there is an images folder. Check there.

Quote from: Snowy on July 10, 2010, 09:15:12 PM
Sorry it took me so long to see this, kiro. Was on 6 days, 12 hours a day at work.
Flapjack is correct. In the folder of the theme you are working with there is an images folder. Check there.

when I go there it doest give me a link to click on to edit it

This guide is intended for people who have no knowledge in CSS/HTML or PHP whatsoever..

Quote from: KiroBot on July 10, 2010, 09:44:26 PM
when I go there it doest give me a link to click on to edit it

CHMOD the theme's directory to 777.

Quote from: KiroBot on July 10, 2010, 09:44:26 PM

Quote from: Snowy on July 10, 2010, 09:15:12 PM
Sorry it took me so long to see this, kiro. Was on 6 days, 12 hours a day at work.
Flapjack is correct. In the folder of the theme you are working with there is an images folder. Check there.

when I go there it doest give me a link to click on to edit it

I just download them, edit them with a photo editing program and upload them with the same name and file extension. Always save the originals elsewhere in case of a problem.

Thanks for this,it will help me later on.


One question though,can I place my themes under the MIT/X11 license like I do with my mybb themes?

Section 5 of the guide didn't work for me. It shrunk the height of the header, which is what I wanted, as there was too much blank space between my custom banner and the menu buttons below it, but the banner wouldn't display. Obviously, the "display none" code had something to do with that. Is there a way to compress the header without losing the banner image? I use 2.0 R3.

I'm having problems with this right off at the start.  Firstly I recoloured all the images that needed coloured and applied them.  I've done this before with my 1.1 site, it's not as easy with 2.0rc3.  I have tried recolouring the background and all I'll get is a block at the top of the forum and the rest remains grey, I hate that grey, I'm tying to go for naturals.  I've tried the repeat-y and repeat-x and also have tried no-repeat and still all I get is the top block sorted and the rest is grey.  I tried to use a background image and still the same thing.

Now for me, I'm thinking it's one of the blocks I've recolired that is sitting there in the background.  To test this I made them transparent one by one and lost the background of the drop down at one point.  I still can't work out which is which on that main_block.  I'm sure it's one of those that could be causing this but have no clue which one.

I also want to change font, etc.  Did you ever update this tutorial somewhere else that might provide the answers to this?

I'm new to 2.0 RC4, (wanting to migrate from 1.1.11) and trying my best through trial & error  :(

I can't get the font color changes, and seen it in this guide, but the css code looks like this ...

/* use dark grey for the text, leaving #000 for headers etc */
body, td, th, tr
{
   color: #FFF;
}

It's only 3 digits ... I've tried random combinations, but just want my overall themes font color to be white.

#FFF = #FFFFFF

#333 = #333333

etc.

I hve tried, http://www.simplemachines.org/community/index.php?topic=409716.msg2855040#msg2855040 , for some reason no matter what i changed those 3 digits to, i still get black as my text color :( 

And i know this is simple, it's simple on smf1 , but it won't work for me on smf2

Depending on what you're trying to edit, the body class wont change it. Some classes have their own colours which overrides it.

I saw your post here: http://www.simplemachines.org/community/index.php?topic=409440.0 and replied to it. My offer to offer you guidance does still stand. Send me a PM if you're interested.

thanks for the great information.
logoian.com

why i can not find in acp member options for my theme?
there is member options for curve, core, and one other but one missing.

Quote from: KiroBot on July 03, 2010, 08:26:05 PM
How do you change the color of these(circled in red)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi47.tinypic.com%2F15xu3vr.jpg&hash=fdd92b2bd38dad23fd4c41de13c9f1c6e6d15afd)

I am not sure this was answered.  This is my problem as well.  My site is www.walktothelight.com.  I am trying to change those bars from a BLUE-GRAY to a GRAY.  I have the color but can't find the file.  I think I have changed every color twice.

Please be very specific if you can as to the "location".  I have learned a lot with SMF and everyone's help.  The only place I feel ignorant still is the colors & themes.

Thanks in advance!

Cowdude in Dallas!

background: url("../images/theme/main_block.png")  it does not look like css colors set the color for that part. you may want to look into the developers tools for your browser like firebug and dragonfly

So, all my changes were useless because it's a picture, correct?  I think I lost a lot of sleep last night for no reason!

Kurt

yes it is a picture not a css color change

Quote from: cowdude on April 05, 2011, 12:03:43 PM
So, all my changes were useless because it's a picture, correct?  I think I lost a lot of sleep last night for no reason!

Kurt

I did that sometimes before. Now, I never forget.

Can someone make a Video tutorial

Some people like me are more visual learners

There are a couple on youtube already

http://www.youtube.com/watch?v=869rhy0CVMs

http://www.youtube.com/watch?v=wvCydDASD88

They are a little old and some things may have changed a bit but you should get the gist.

Quote from: Garou on June 22, 2011, 08:39:39 PM
There are a couple on youtube already

http://www.youtube.com/watch?v=869rhy0CVMs

http://www.youtube.com/watch?v=wvCydDASD88

They are a little old and some things may have changed a bit but you should get the gist.

Thanks!

Thanks for your awesome tutorial about theme developing, I will use Smf in my site in a short time, I will request help in the near future more, but noticed that this forum will help me alot.

I want to remove the avatar in header user area.  How do I modify the PHP file?

Got it. Your tutorial is good.  display: none;  did it.  Thanks

I am not seeing how to create a picture background.  I would like to have like a Flag instead of a solid color

Quote from: Don Houston on October 26, 2011, 02:37:20 AM
I am not seeing how to create a picture background.  I would like to have like a Flag instead of a solid color

Over the content area, or the header part?  They're handled separately.

I seem to be having problems following this guide....NO...im not dumb...i do have an idea what needs to be done but im having problems replacing files such as the part about editing the "backdrop.png" file...my damn ftp client or even if i use my cpanel wont upload the new file so that the forum looks different...tried to change permissions from my ftp and cpanel and wont let me do it. Is there a way in the forum admin area to change the file permissions...well i know there is but cant remember where it was LOL

Also I keep getting permission denied errors on my index.php file in the theme folder...whys that?

GRRR damn things doing my nut in just cos i wanna make a game/clan based theme!!

Quote from: hcfwesker on November 18, 2010, 10:50:23 PM
I'm new to 2.0 RC4, (wanting to migrate from 1.1.11) and trying my best through trial & error  :(

I can't get the font color changes, and seen it in this guide, but the css code looks like this ...

/* use dark grey for the text, leaving #000 for headers etc */
body, td, th, tr
{
   color: #FFF;
}

It's only 3 digits ... I've tried random combinations, but just want my overall themes font color to be white.

In that case, each digit is double. For example: #17A is equal to #1177AA.

:) :) :) :) :) :)

To make your background image always fill the browser window and resize appropriately, use this code:
body{
                        background:  #E9EEF2  url(../images/theme/backdrop.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Set a fontsize that will look the same in all browsers. */
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}
                 }

That is changed from this in the tutorial:
/* Set a fontsize that will look the same in all browsers. */
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% verdana, Helvetica, sans-serif;
   margin: 0 auto;
   padding: 15px 5%;
}

Eren Yaşarkurt  thanks for nice tutorial

Hi there.  I sue Tinypoortal around my SMF.  Is there anything else I need to do in order for these edits to work with my SMF/TP site?  Thanks H

A picture is worth a thousand words, and you have deleted them ... not all users are required to know English perfectly. If you want to bump this SMF forum should allow images, otherwise you lose.

Eren Yaşarkurt
Dear Eren! Could you please update your beautiful Clarity template for the SMF 2.0.11?