Print

I'd rather stick with the current theme

3 (11.5%)

I want something else

2 (7.7%)

Green Leaf

12 (46.2%)

Pagan v2

2 (7.7%)

Bright Forest

4 (15.4%)

Arcane Magic

3 (11.5%)

Total Members Voted: 26

[Kazekane]

lol i suppose thats only fair XD and i guess the forest is a great place for a dragon to live! at least this dragon anyway :)

That is very true *nod**nod*
However, this Dragon here belongs to the shore

[Selroth]

Still up for it Aure?  :)

Alright, it looks like Green theme is the primary pick of the votes!  I'll keep notes of my actions to help out.

-Downloading Green Leaf from the SMF Themes site.
http://custom.simplemachines.org/themes/index.php?lemma=718

-Saving the zip file into this folder.
F:\Projects\Active\Draconity\Green Leaf Theme install 1.1.6\

-Extracting zip contents for quick inspection

-Going to Servage control panel to change the /draconity folder chmod to 777, to ensure security doesn't interfere with installation.
   -Click the "edit" button.
   -Change Dir permissions New setting to 777, make it recursive.
   I do this from the Servage control panel because using an FTP client, recursive chmod takes a long time as it has to inspect and change each file one by one.  The Servage filemanager is direct, so is much faster.

-Going to Draconity.org admin panel.  Configuration>Themes and Layout. 
   -Install a new theme from a file.  Browse to the .zip on your machine and click "Install"
   -You may wonder why the option to create a copy of the default theme.  Every new theme is created by modifying the default theme, so help against bugs and take advantage of Cascading Style Sheets.

*Hopefully the next page will have a small box saying "Installed Successfully".  We're far from done, however.

Sweet, it worked...

-Click on the link to the new theme.  You will see the settings.  Just scan over them to get a little bit familiar with them.  No need to change anything yet.

-Preview the theme.  Go into your profile, Look and Layout Preference, "Current Theme *** (change)", and click the preview link for green leaf.

-I notice several menu items are missing, as well as the shoutbox.  But it seems to kinda work, so I'll use it so I can see the effects as I update the .php files.
   Careful that the theme is at least working!  If you start using it before you know you can change it back, then you gotta either fix the theme or go into the database to change your theme setting manually.

-Back to admin panel.  Configuration>Current Theme
   -Need to get the URL for the logo to put that in the settings.
   -20 is a good number of recent posts for our site. 
   -All other settings make sense to me.

-I'm finding out the address of the logo by previewing the default theme, and viewing the page source.
http://www.draconity.org/Themes/common/logoLacke.png

-Updated theme settings.

Ugh, that didn't work well.  Doesn't exactly fit in the box.

-Time to get dirty in code.  I recommend you use an FTP client and work on the files from your computer and make backups.  But, since I can't run an FTP client I'm going to use Servage's filemanager.

-In a new window/tab, get back to Servage's file manager. 

-Browse to /draconity/Themes/   you will see green_leaf and dilbermc.  Both of these folders have an index.template.php.  Download/make copies of both - we will be updating/replacing these files.

-If using the filemanager, you gotta open the file by clicking the "edit" link, then copy and pasting into notepad or something.

-Saved the original files to my computer.  I'll be using filemanager from now on.  Opening the dilbermc index.template.php in one window as refrence, green leaf's for editing.
   *This file is pretty much responsible for everything that's not a forum listing or message or something.  Header and footer stuff, including the member bar and main menu.

-We gotta fix the menu, shoutbox, and logo.  Let's do the menu first - that's usually pretty simple.

   -They menu is coded near the bottom of the file usually.  Read the comments after the //'s to see what each code segment is doing.  You should start seeing things similar to this:

Code: [Select]

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo ($current_action == 'register' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '"> </td>' : '' , '
<td align="center" valign="top" class="maintab_' , $current_action == 'register' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>' , $current_action == 'register' ? '<td class="maintab_active_' . $last . '"> </td>' : '';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '"> </td>' : '' , '
<td align="center" valign="top" class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>' , $current_action == 'logout' ? '<td class="maintab_active_' . $last . '"> </td>' : '';   -Each one of these segments is a button.  We need to find the buttons in dilbermc and add them to green leaf.
      *dilbermc's menu buttons are a lot simpler:

Code: [Select]

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo'
<td align="center" class="menubg' , $current_action == 'register' ? '2' : '' , '">
<a href="', $scripturl, '?action=register">' , $txt[97] , '</a>
</td>';
// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo'
<td align="center" class="menubg' , $current_action == 'logout' ? '2' : '' , '">
<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
</td>';   -Lets review the order of the buttons of the buttons.  As the code goes down, the buttons go right.  In green leaf, I notice that the PM button isn't next to the home button as it is in dilbermc.
      -So, I just cut and paste. 
      -I notice green leaf has a help and search button.  I find these useless, so I just delete them.

   -Now, I find the buttons we have in dilbermc and add them into green_leaf.  Try not to modify dilbermc's file.
      -Blogs, 3guk (our Java chat client for IRC), gallery, and staff list are new buttons.


   -Minimize dilbermc's file.  We're done with it for now, no need to risk modifying it.

   -Now, take a look at the new buttons.  They don't look the same as the existing buttons.  So, we need to make them look the same.
      -comparing the differences should make them obvious.  Though, studying them and a knowledge of programming will certainly help.
         -adding the class to the first <td>
         -next <td> needs valign="top"
         - ? '2' : ''   becomes  ? 'active_back' : 'back'
         -? '<td>&nbsp;</td>' : '';     becomes     ? '<td class="maintab_active_' . $last . '"> </td>' : '';

      -So, the blogs button:

Code: [Select]

// Show the [Blogs] button.
echo ($current_action=='blog' || $context['browser']['is_ie4']) ? '<td>&nbsp;</td>' : '' , '
<td align="center" class="menubg' , $current_action == 'blog' ? '2' : '' , '">
<a href="', $scripturl, '?action=blogs">' , $txt['b1a'] , '</a>
</td>' , $current_action == 'blog' ? '<td>&nbsp;</td>' : '';
      Becomes:

Code: [Select]

// Show the [Blogs] button.
echo ($current_action=='blog' || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '"> </td>' : '' , '
<td align="center" valign="top" class="menubg' , $current_action == 'blog' ? 'active_back' : 'back' , '">
<a href="', $scripturl, '?action=blogs">' , $txt['b1a'] , '</a>
</td>' , $current_action == 'blog' ? '<td class="maintab_active_' . $last . '"> </td>' : '';      -Now, it looks like it fits.  We may have made some typos, which will be obvious when we refresh the page on Draconity.

      -So, save changes (and upload/replace the file) and refresh the page!

      -OK, in my case, I notice that the new buttons don't have any background or formatting applied to them.  This tells me that the Cascading Style Sheet class didn't load for these.  They're different than the buttons that came with the theme, so there's still something different in the file.
         -Compare the buttons that don't work with the ones that do work.
         -Since no one else is using this theme yet, feel free to experiment!  An error here wont affect any users but you.

         -Ah-ha!  class "menubg" need to be class "maintab_"

      -Clicking the new buttons loads the page fine, but the "pressed" format is stuck on the home button.  This tells me that the new button actions aren't in the $current_action variable (if you look at the beginning of the function, $current_action defaults to home.
         

Code: [Select]

if (in_array($context['current_action'], array('search', 'admin', 'calendar', 'profile', 'mlist', 'register', 'login', 'help', 'pm')))
$current_action = $context['current_action'];
      -We gotta add the new button actions in. 

      -Going through each of the buttons make sure the menu is good to go.
         -Ooops.  currentAction is "blogs", not "blog"
         -gallery button is kinda wierd...  Ah, I had $current_actions == 'mgallery' in the calendar button.  Copy and paste msitake.

-OK, now, let's take a look at the logo.  This, we can expect to be near the top of the file since it's one of the first things to load in html.
-Once we find the logo, we can find what's containing the logo, and make it bigger.
   
   -Here we go:

Code: [Select]

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="catbg" height="32">';

if (empty($settings['header_logo_url']))
echo '
<span style="font-family: Verdana, sans-serif; font-size: 140%; ">', $context['forum_name'], '</span>';
else
echo '
<img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';

echo '
</td>
<td align="right" class="catbg">
<img src="', $settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
</td>
</tr>
</table>';   It's in the collumn of a table.  So, what hapens if we remove the height?  Hmm, nothing.
   OK, let's take a look at this "catbg" class. /draconity/Themes/green_leaf/style.css

Code: [Select]

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: url(images/log.png) repeat-x;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
   -That images/log.png file is only 50px high.  I wonder how bad it looks if we take out repeat-x.  Again, no difference.  Oh wait, yeah there is.  Wow, that sucks...
      -Changed from log.png to win.png.  Looks better. 

-Where the heck is our member bar?  This, we go back to index.template.php for both files, dilbermc's as a reference. 
Crap...  This is gonna be a bitch.



   


-while I was fixing the logo problem, I noticed that the metadata patch isn't in place in the new theme.  We'll do that too.
-Custom greeting too

[Aurelia]

Yep!  Code doesn't scare me! :)

[Selroth]

Cool!  Maybe you can finish installing it for me then :)

[Aurelia]

Lol if I'd done it before then I'd have a go, but for the moment I'll wait for more notes and then do Bright Forest and then I'll be pro! ...or something hehe.

[Tysha]

I'm loving the forest, even without the shoutbox.

[Aurelia]

I'm loving the forest, even without the shoutbox.

Hehe me too :D and thanks!

The shoutbox will be coming in that one as soon as Sel and I can get time together for him to help me understand the code more.  I'll have another play with it this week now he's finished Green Leaf and will see if things are any clearer for what I should be doing.