SimplePortal

Customization => Themes and Graphics => Topic started by: Nathaniel on August 29, 2008, 07:47:59 AM

Title: General Custom Theme Tutorial
Post by: Nathaniel on August 29, 2008, 07:47:59 AM
General Custom Theme Tutorial for SMF 1.1.x
This tutorial covers how to make edits to your SMF 1.1.x custom themes so that they will work perfectly with Simple Portal. Its possible that there may be a Custom Theme Tutorials (http://simpleportal.net/index.php?board=33.0) for the theme that you have, so you should have a look through the list (http://simpleportal.net/index.php?topic=53.0) before using this tutorial.

Please note that this tutorial may not work for your custom theme. If that is the case and you can't find out where to make the edits yourself, then you can ask in the Themes and Graphics Board (http://simpleportal.net/index.php?board=18.0). Never post the contents of your index.template.php file, always attach that file to your post if you want help.

Do not ask for support in this topic! Please make a new topic in the Themes and Graphics Board (http://simpleportal.net/index.php?board=18.0).

All of the edits below are applied to your '/Themes/{themename}/index.template.php' template file. They are within the 'template_menu' function.

Adding the 'Forum' button:
This edit will be required for every custom theme, so that you have the actual forum button. Most themes use their own code for this section, so its most likely that you will have to copy one of the buttons in the 'template_menu' function and alter it so that it has the correct information. The easiest button/tab to copy is the 'Help' button, make a copy of the code for that button above the original code, and perform the changes below for the new code.

Find this code:
Code: [Select]
$txt[119]Replace with this code:
Code: [Select]
$txt['sp-forum']
Find this code:
Code: [Select]
href="', $scripturl, '?action=help"Replace with this code:
Code: [Select]
href="', $scripturl . ($modSettings['sp_portal_mode'] == 1 ? '?action=forum' : ''), '"
Find this code (It may occur more than once, or not at all):
Code: [Select]
$current_action=='help'If you found it then replace it with this code:
Code: [Select]
$current_action=='forum'
You will also have to add this code before your new 'forum' button:
Code: [Select]
if (empty($context['disable_sp']) && in_array($modSettings['sp_portal_mode'], array(1, 3)))
If your help button looked something like this:
Code: [Select]
   // Show the [help] button.
   echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
            <td valign="top" class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
            </td>' , $current_action == 'help' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

Then you final forum button should look something like this:
Code: [Select]
   // Show the [forum] button.
   if (empty($context['disable_sp']) && in_array($modSettings['sp_portal_mode'], array(1, 3)))
      echo ($current_action=='forum' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '
            <td valign="top" class="maintab_' , $current_action == 'forum' ? 'active_back' : 'back' , '">
               <a href="', $scripturl . ($modSettings['sp_portal_mode'] == 1 ? '?action=forum' : ''), '">', empty($txt['sp-forum']) ? 'Forum' : $txt['sp-forum'], '</a>
            </td>' , $current_action=='forum' ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

Adding the 'Forum' action:

Find this code:
Code: [Select]
   $current_action = 'home';
Replace with this code:
Code: [Select]
   global $modSettings;
   $current_action = $modSettings['sp_portal_mode'] == 3 && empty($context['standalone']) && empty($context['disable_sp']) ? 'forum' : 'home';

Find this code:
Code: [Select]
'login', 'help', 'pm'
Replace with this code:
Code: [Select]
'login', 'help', 'pm', 'forum'
Find this code:
Code: [Select]
'smileys', 'viewErrorLog', 'viewmembers'
Replace with this code:
Code: [Select]
'smileys', 'viewErrorLog', 'viewmembers', 'manageportal'
Find this code:
Code: [Select]
      $current_action = 'search';
Replace with this code:
Code: [Select]
      $current_action = 'search';
   if (empty($context['disable_sp']) && (isset($_GET['board']) || isset($_GET['topic']) || in_array($context['current_action'], array('unread', 'unreadreplies'))) && in_array($modSettings['sp_portal_mode'], array(1, 3)))
      $current_action = 'forum';

Editing the 'Home' button:
For standalone mode, you will have to edit the 'Home' button, so that 'Standalone Url' is used, instead of the normal forum url.

Find this code:
Code: [Select]
href="', $scripturl, '"
Replace with this code:
Code: [Select]
href="', ($modSettings['sp_portal_mode'] == 3 && empty($context['disable_sp']) ? $modSettings['sp_standalone_url'] : $scripturl), '"
Adding the SimplePortal images:
Copy the 'sp' images folder from your '/Themes/default/images/' folder into your '/Themes/{custom theme}/images/' folder. Please note that the default images may not look good with your custom theme, you may wish to consider making your own.

Adding the "Add as Article" button:
This edit is only required if your custom theme has its own '/Themes/{custom_theme}/Display.template.php' file.

Find this code ('/Themes/{custom_theme}/Display.template.php'):
Code: [Select]
   // Show the page index... "Pages: [1]".
Replace with this code:
Code: [Select]
   // Make Article Button
   if ($context['can_make_article'])
      $normal_buttons['article'] = array('text' => 'sp-make_article', 'image' => 'addarticle.gif', 'lang' => true, 'url' => $context['portal_url'] . '?sa=addarticle;message=' . $context['topic_first_message'] . ';return=' . $context['current_topic'] . '.' . $context['start'] . ';sesc=' . $context['session_id']);

   // Show the page index... "Pages: [1]".

SMF 2
SMF 2.0 doesn't need you to add any code to your custom themes, so the forum button should automatically work with SMF 2 and SimplePortal. Although if your theme uses images for each tab/button then you may need to make your own images.

Adding the SimplePortal images:
Copy the 'sp' and 'admin' images folders from your '/Themes/default/images/' folder into your '/Themes/{custom theme}/images/' folder. Please note that the default images may not look good with your custom theme, you may wish to consider making your own.

Adding the "Add as Article" button:
This edit is only required if your custom theme has its own '/Themes/{custom_theme}/Display.template.php' file.

Find this code ('/Themes/{custom_theme}/Display.template.php'):
Code: [Select]
   // Show the page index... "Pages: [1]".
Replace with this code:
Code: [Select]
   // Make Article Button
   if ($context['can_make_article'])
      $normal_buttons['article'] = array('text' => 'sp-make_article', 'image' => 'addarticle.gif', 'lang' => true, 'url' => $context['portal_url'] . '?sa=addarticle;message=' . $context['topic_first_message'] . ';return=' . $context['current_topic'] . '.' . $context['start'] . ';sesc=' . $context['session_id']);

   // Show the page index... "Pages: [1]".

Removing list dots that appear for some blocks/themes:
Open up your '/Themes/{custom theme}/style.css' file and add this code to the end:
Code: [Select]
/* Reset sp lists. */
.spblock ul, .spblock ul li
{
   list-style: none;
}

Edit: Updated for SP 2.2 (04 April 2009).
Edit: Updated with Display.template.php edits (12 June 2009).
Edit: Updated for SP 2.3.1 (3 October 2009).
Title: Re: General Custom Theme Tutorial
Post by: probablepossible on October 12, 2008, 08:37:21 PM
I feel kinda dumb but-- I can't see the tutorial at all! :o
Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on October 13, 2008, 04:08:59 AM
No, nobody can. I was forgetful and started this topic, but never finishes it. I will try to complete it as soon as possible. Thanks for reminding me. ;)

Edit: Its updated now. :D
Title: Re: General Custom Theme Tutorial
Post by: MrBI on December 29, 2008, 08:54:13 PM
hi!

I did test this.
but my result is.
the home buttom become Forum but did linke to Portal
the Help buttom stay as Help but did link to Forum.

PS: yep I am a Noob. plz help me  D:

EDIT: I got it to work  :D
it's not
Code: [Select]
$txt[103]it's
Code: [Select]
$txt[119]Replace with this code:
Code: [Select]
$txt['sp-forum']
Title: Re: General Custom Theme Tutorial
Post by: lou-in-usa on January 31, 2009, 01:02:20 AM
$txt[] is an array. I did a print_r($txt) in the function template_button_strip function of the template file and then I copied the output to my text editor where I did a search for forum. I found the single word forum in about 1 minute. The key in my version of SWF1.1.7 is= ezp_forum_tab so in the button generating section I put $txt[ezp_forum_tab] and it worked perfectly.


Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on February 04, 2009, 12:21:54 AM
Updated this tutorial to add some more information and remove an error.

@MrBI,
Thanks for pointing out that issue, I have now updated that post.
Title: Re: General Custom Theme Tutorial
Post by: theki on March 10, 2009, 07:20:57 PM
Hey. I am trying to modify the WoW-DK theme, but I am being unsuccessful.

My index.template.php file is attached.

I receive this error: "Parse error: syntax error, unexpected T_ECHO in .../Themes/WoW-DK/index.template.php on line 669"

Thanks!
Title: Re: General Custom Theme Tutorial
Post by: Smoky Blue on March 11, 2009, 01:53:57 PM
good tut LHVWB   :D

umm theki, what exactly are you trying to have done? :0
Title: Re: General Custom Theme Tutorial
Post by: theki on March 11, 2009, 02:54:07 PM
I am trying to take the "WoW-DK" theme and make it SimplePortal compatible.

Can you help? Thanks!

(I was hoping someone could download my attachment and make it work, because I keep getting that error. :D)
Title: Re: General Custom Theme Tutorial
Post by: Smoky Blue on March 11, 2009, 03:11:17 PM
not sure where you got lost at.. it would help if you had notepad++ and used the control button (cntrl, at the bottom left of your keyboard) and the "f5" button, that will bring up your search bar so you can search and find what codes to edit.. also you might want to google for a good tut on how to read an xml file..

the file you gave me really looks nothing like the "wow-dk" theme, where did you get that one?? try this, and any issues let me know..  :nervous-happy:

edit:


this is where i got mine from: http://custom.simplemachines.org/themes/index.php?lemma=78   in case you need to replace the rest of the files..
Title: Re: General Custom Theme Tutorial
Post by: theki on March 11, 2009, 04:21:50 PM
That post really confused me!  :)

I looked at your index.template.php, but it was not in the right order. You had the help and forum buttons switched around, so I just downloaded the original php file and re-did the tutorial and all is fine :D

Thanks for the help anyway!
Title: Re: General Custom Theme Tutorial
Post by: Smoky Blue on March 12, 2009, 12:04:31 PM
that is all i did, but glad you got yours configured the way you want..

cheers  8)
Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on April 03, 2009, 09:11:25 PM
Sticky has been updated for SimplePortal 2.2.
Title: Re: General Custom Theme Tutorial
Post by: BluRanium on June 16, 2009, 03:37:53 PM
hey im using simpleportal 2.2.2 and SMF 1.1.9 and i cant get the forum button working. it says Forum but takes me to index.php(portal) and i cant do the forum action edit because i dont know where they are.
Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on June 16, 2009, 06:59:20 PM
@BluRanium,
Please make a separate topic in this board, and attach your '/Themes/{themename}/index.template.php' file.
Title: Re: General Custom Theme Tutorial
Post by: ODB1 on August 02, 2009, 07:48:31 PM
Ok, I have followed the above steps and I keep getting a parse error. I have searched the forums, and I see this come up several times but I have not found anything more complete than the above instructions. I am using SMF 1.1.10 and Simple Portal 2.2.2. I am using the theme called Cleanmachine. I want to add the button after the home button. I posted earlier but my post has disappeared. I am including the index.template.php file from the above mentioned theme. Any help would be appreciated.
Title: Re: General Custom Theme Tutorial
Post by: 130860 on August 04, 2009, 11:22:13 AM
@BluRanium,
Please make a separate topic in this board, and attach your '/Themes/{themename}/index.template.php' file.


same for you ODB1 ;)
Title: Re: General Custom Theme Tutorial
Post by: McCain on August 06, 2009, 05:07:56 AM
The forum fix worked perfectly, but I seem to be having a problem still. I've tried to duplicate the forum fix for the other missing buttons from the menu bar for the mods that I'm using, but they don't seem to work.

Any idea what I might be doing wrong?

Here is what I'm using that I can't seem to get added to the bar ...

SMF Media Gallery
E-Arcade
Simple Multiplayer
AjaxChat Integration
zCommunity (Blog)

I've attached a copy of my theme index.template.php as well.

Thanks for the help.  ;D

Title: Re: General Custom Theme Tutorial
Post by: 130860 on August 06, 2009, 10:21:48 AM
@BluRanium,
Please make a separate topic in this board, and attach your '/Themes/{themename}/index.template.php' file.


same for you ODB1 ;)


still the same for you McCain ;)


and this apply as well for all users, please start a separate topic in this board  and attach your '/Themes/{themename}/index.template.php' file.

also smf version.
SP version.
list of mods installed.

greetings!

Title: Re: General Custom Theme Tutorial
Post by: candidosa2 on August 23, 2009, 04:01:37 AM
thank you
Good tutorial

I have problems with this theme  http://custom.simplemachines.org/themes/index.php?lemma=377
 and modified it she work 100%

Title: Re: General Custom Theme Tutorial
Post by: Chas on November 20, 2009, 03:58:00 AM
For anyone who missed it in the beginning of the tutorial (I did and lost my button) I suggest this area of the text is highlighted or embolded.

"...button/tab to copy is the 'Help' button, make a copy of the code for that button above the original code and perform the changes below for the new code."
Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on November 20, 2009, 07:25:03 AM
Sure, bolded the important part so that people don't miss it.
Title: Re: General Custom Theme Tutorial
Post by: kranthicreddy on June 06, 2010, 02:21:33 AM
 :)Thanks a lot for the code. I used it on my forum and works like a charm. !! I was fedup for the last 2 days trying out various faulty patches.

By the way..I used it on SMF 1.1.11 with Saff theme.
Title: Re: General Custom Theme Tutorial
Post by: Nathaniel on July 16, 2010, 04:49:00 AM
Do not ask for support in this topic! Please make a new topic in the Themes and Graphics Board (http://simpleportal.net/index.php?board=18.0).
SimplePortal 2.3.8 © 2008-2024, SimplePortal