Styleswitcher Guide | Eevee's HQ

Ooooh new stuff coming soon (we also have a new cron thingamabobber :D)

Melon's StructureSwitcher Guide

Apparently there's been a request from certain members for a styleswitcher guide. This is NOT a conventional styleswitcher, you may not want to use it if you don't want the ability to change your whole header and footer HTML code depending on the style. If you're looking for a more basic kind of style switcher which does exactly what it says on the tin, try PokeNova's.

Firstly, a styleswitcher can work in a variety of ways. For the rest of this tutorial, I will assume that you want to include a different html file for the header and footer of a web page depending on the selected style, because that is the way most Pokemon websites work from my experience, and if you're using something more complicated you probably know how to code one yourself without a guide (or you can ask for assistance on our community forums if you do need some specific help). This guide will also contain a twist, because apart from just showing you how to do it with PHP, it will also show you how to do it in Python, in hopes of introducing you to this neat language if you are a more experienced webmaster who pays for good hosting, and isn't scared of trying a better technology. This part isn't completed yet, but you can expect me to add it in soon.

Okay, so let's get styleswitching! The styleswitcher will be composed of two parts: one script that sets a cookie that will store what style the user wants to use, and a script that will select the correct style and let you use it on your page.

<?php   
// STYLEGLOBAL.PHP  
  
$path_to_styles = "/styles/";  
  
// list your styles' headers and footers here!  
// Happy Pikachu style  
$styles_headers[1] = 'hpikachu_header.html';  
$styles_footers[1] = 'hpikachu_footer.html';  
  
// Tasty Tentacool style  
$styles_headers[2] = 'tentacool_header.html';  
$styles_footers[2] = 'tentacool_footer.html';  
  
// Silph Co. 7th floor teleporter pad style  
$styles_headers[3] = 'silphco_header.html';  
$styles_footers[3] = 'silphco_footer.html';  
  
  
// this style will be used by default!  
$default_style_id = 1;  
  
// just enter the URL of your home page here!  
define('SITE_HOME', 'http://yourfansite.com');  
  
// -------------------------------------------------  
// You don't need to touch anything below this point  
define('DIR', (($cwd=getcwd()) ? $cwd : '.'));  
  
if (!empty($_COOKIE['styleid']) && is_numeric($_COOKIE['styleid'])) 
{ 
    define('STYLEID', intval($_COOKIE['styleid']));  
}  
else  
{  
    define('STYLEID', $default_style_id);  
}  
function page_header()  
{  
    global $styles_headers, $path_to_styles;  
    include(DIR . $path_to_styles . $style_headers[STYLE_ID])  
}  
function page_footer()  
{  
    global $styles_footers, $path_to_styles;  
    include(DIR . $path_to_styles . $style_footers[STYLE_ID])  
}  
?>

Ouch! So what does this heap of code do??? Well don't worry, you don't need to understand it just yet. It's a script that will make your life a lot simpler later, but for now all you need to do is edit the parts ABOVE the dotted line. Basically, put the code in a file called styleglobal.php, and then start at the top and edit the following things:

$path_to_styles: Edit the part under the quotes. Change it to the folder where you keep your styles - for example, if you keep you header and footer files in http://mypokemonwebsite.com/my-styles/, set this to "/my-styles/". If you keep them in the same folder as your whole site (for example, site.com/header-pikachu.html), just set it to a forward slash "/".
Style headers/footers: Here all you have to do is for each style you add, add a new pair of $style_headers[ number of style ] and $style_footers. Make sure that you don't use the same number twice. In our example, if you wanted to add a "Shiny Feraligatr" style, you could write:

$styles_headers[4] = 'shiny_feraligatr_header.html';
$styles_footers[4] = 'shiny_feraligatr_footer.html';
Default style ID: This is the last thing you have to edit, and it's the easiest. See that number between the brackets, like [4]? That's the ID of the style - if you want all visitors to see the Shiny Feraligatr style before they change it, you would set this variable to 4. Simple, aint it? After this just enter the URL of your home page into the SITE_HOME definition below. And there's nothing else to edit!

Now, did you like that? You've just customised the first script! Yay! You will be glad to learn, then, that you don't have to customise the other two at all!

Let's take a lookie at the next script. This one will be the script that sets the style cookie that your site will use. It's just copy-pasting here: just stick this whole script into a styleswitcher.php file and away you go!

<?php    
// STYLESWITCHER.PHP    
require("styleglobal.php");    
    
if (isset($_GET['style']))    
{    
    $styleid = intval($_GET['style']);    
        
    if ($styleid && !empty($styles_headers["$styleid"]))    
    {    
        // this sets a styleid cookie that expires in 2 years    
        setcookie("styleid", $styleid, time() + 3600*24*365*2); 
    } 
     
    if (!empty($_SERVER['HTTP_REFERER'])  
    {  
        header("Location: " . $_SERVER['HTTP_REFERER']);  
    }  
    else  
    {  
        header("Location: " . SITE_HOME);  
    } 
}    
?>  
[/php]

There you go. Now you've got a basic and easy to use dynamic templating system that you can use. The final code is this:

<?php 
// ANY SITE PAGE (PHP) 
require("styleglobal.php"); 
 
page_header(); ?> 
 
Hello! This is my new page!! :DDD 
 
<?php page_footer(); ?>

You'll want to structure every page like this - all you have to do is two things: first include the styleglobal.php file with the require() statement (it works excactly like include), and then when you want to print a header, run the function page_header(), just embed it into any HTML with the <?php tags!

That's it! So what can you do now? Well you can change any style you want, whenever you want, and you never have to change your files again. You can add new styles, or rename them, and all you need to do is update the styleglobal.php file, and edit the style header and footer filenames! But the last thing is important: what is the link to change the style to a different one? It's just styleswitcher.php?style=number, where number is the ID number of the style you want to set. Happy styleswitching! (if you have any questions, or if I wasn't clear enough somewhere, please don't hesitate to send me a PM - I will be happy to help you solve any problems you may have using it)

The Python chronicles

Coming soon