PHP: Theme Choosing
1 post
Page 1 of 1
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
Hello everyone,
I haven't seen many good tutorials on this so I thought I'd try and cover it. There are a few aspects to this, setting and retrieving cookies, this will be what tells us what theme to display to the user. By theme I mean what colour our website will be. We are using different style sheets for this.
I am using bootstrap so the navbar's styling will come from a custom stylesheet. I'll provide everything in this tutorial as a download.
We need to set the cookie when the user goes on the website, and then load our stylesheet. We need a way to change our stylesheet also.
Our first stylesheet will be default, we don't need a stylesheet for this, we just won't use a custom stylesheet for the website.
I used this website to set the styles for the navbar
We have two stylesheets, red.css and blue.css
We are also using two files.
index.php:
In our index.php file we also have an html form to choose what theme we want to use. Our form posts the theme to change_theme.php.
Change_theme.php:
Default theme:
Red theme:
Everything is included in the zip file I've attached to this thread. I hope you liked my tutorial.
Thanks
I haven't seen many good tutorials on this so I thought I'd try and cover it. There are a few aspects to this, setting and retrieving cookies, this will be what tells us what theme to display to the user. By theme I mean what colour our website will be. We are using different style sheets for this.
I am using bootstrap so the navbar's styling will come from a custom stylesheet. I'll provide everything in this tutorial as a download.
We need to set the cookie when the user goes on the website, and then load our stylesheet. We need a way to change our stylesheet also.
Our first stylesheet will be default, we don't need a stylesheet for this, we just won't use a custom stylesheet for the website.
I used this website to set the styles for the navbar
We have two stylesheets, red.css and blue.css
We are also using two files.
index.php:
Code: Select all
Before any of our html code we are checking if our theme cookie is set, if it is then we store it in a variable, if its not then we set a new cookie called default. In our <head> section we them the value of our variable theme, if it is "default" we don't do anything, if it has a different value (red or blue) then we use a stylesheet. <?php
if (isset($_COOKIE["theme"])) {
//Our cookie is set already
$theme = $_COOKIE["theme"];
}else{
setcookie("theme", "default", time()+2419200);
$theme = "default";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Theme Chooser</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/bootswatch.min.css">
<?php
if($theme=="default")
{
//theme is default, do nothing
} else {
echo "<link rel=\"stylesheet\" href=\"css/" . $theme . ".css\">";
}
?>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../bower_components/html5shiv/dist/html5shiv.js"></script>
<script src="../bower_components/respond/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Theme Chooser</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li><a href="#">Something</a></li>
<li><a href="#">Something Else</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<form class="form-horizontal" method="post" action="change_theme.php">
<fieldset>
<legend>Choose your theme</legend>
<div class="form-group">
<label for="inputTheme" class="col-lg-2 control-label">Theme</label>
<div class="col-lg-10">
<select name="inputTheme">
<option value="default">Default</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootswatch.js"></script>
</body>
</html>
In our index.php file we also have an html form to choose what theme we want to use. Our form posts the theme to change_theme.php.
Change_theme.php:
Code: Select all
Here we just update our cookie. Going back to index.php should display the new menu. <?php
$selectedTheme = $_POST['inputTheme']; //Grab our chosen theme
setcookie("theme", $selectedTheme, time()+2419200); //Store our chosen theme
echo "<a href=\"index.php\">Go back</a>";
echo "</br>Chosen theme was: $selectedTheme";
?>
Default theme:
Red theme:
Everything is included in the zip file I've attached to this thread. I hope you liked my tutorial.
Thanks
You do not have the required permissions to view the files attached to this post.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023