How to: Create a Theme!

bisexuowl · #1 12-23-2016, 01:17 AM

Hello! So a few days ago I was looking around for any guides for various things for Mysidia and realized there doesn't appear to be a guide for skinning a theme on a Mysidia site. Firstly, I want to comment that this is all just a guideline. Feel free to make any changes you want, or add anything you want! In fact, I highly encourage you try to understand what's going on rather than mindlessly copy & pasting. :D Also, this makes use of the Smarty template system, so be prepared for that. Before you get scared, please remember though that it isn't actually that hard/scary, it's just something you'll take time to learn if you want to get advanced with it. However, the stuff in this guide is really basic. :)

Resources:
paletton.com/ - a site for making a color palette
w3schools.com/css/ - this site lists a bunch of stuff about CSS, and is a guide place to check what various things do!
transparent textures to use as a background. Make sure to download the image and put it in your theme's folder to host it yourself!
Google Fonts

Note: All images in this guide are thumbnails that you can click! :)

What we're going to make

The above is what I'll show you how to make. At the end, I'll also show you how to create an additional sidebar as well.
This includes...
...a navigation menu at the top of the site
...a header image for the site with a link to the homepage (which eliminates the need for a link in the top nav menu to the index page!)
...a side bar which has the user's avatar, link to profile, money, messages/message notifications, friend request notifications, what theme the user is using, their favpet, links to the adoptables the user owns, managing their account, inventory, and if the user is has access to it, the admin cp.
...a footer that includes the credit to Mysidia and your staff and how many people are browsing the site
...styled site content.

Aight, let's jump in!

Getting Started
First, go to your Templates folder. Create a new folder within it with the name of your theme. Next, we'll create and add the necessary files, as well as adding it to the theme list in the Admin CP.

1) Create a new file called "header.tpl" and put the following in it:

Code:

<html>
<head>
<title>{$browser_title}</title>
{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/style.css")}
{$header->loadAdditionalStyle()}
</head>

2) Before we forget to, create a copy or move the file "csshover.htc" from the main theme folder to your theme's folder.

3) Create another file called "template.tpl"
Put the following in it:

Code:

{include file="{$root}{$temp}{$theme}/header.tpl"}
<body>
	<div id="sidebar">
	</div>
<div id="wrapper">
	<div id="navigation">
		{$menu}
	</div><br>
	<div style="clear: both"></div>
	<div id="titleimage">
		<a href="{$path}index">{$site_name}</a>
	</div>
	<br>
	<div id="content">
		<h1>{$document_title}</h1>
		<p>{$document_content}</p>
	</div>
	<center>
	<div id="footer">
	</div>
	</center>
</div>
</body>
</html>

We'll customize it more later on.

4) Go to the AdminCP and create a new theme for your site. Put in your theme name, your theme folder, and then check the little box that says "the style has been uploaded to the site, and is pending installation"

5) Create a test account on your site and then have it change it's theme to the new theme so you can test it as you go.

6) Create one last file labeled "style.css".

Now, your site will look something like this:

Adding the Basic CSS & Content
First, we need to make it so the site begins to display a background, a header image, and styles the page content.

0) This step is optional, but you'll be seeing me use some fonts that usually you couldn't use. This is because I've imported them with Google Fonts, which is free! :) Just put it at the top of your style sheet using the @import version.

1) Let's start with the background as it is the easiest. I'm using a transparent texture from the site I listed earlier-they're really nice backgrounds that you can customize by setting a background color! I'm using "asfalt light". Whatever background you choose, download it to your template's folder.

Then, add the following code to your style.css

Code:

body {
	background-color:#D49D6A;
	background-image:url('asfalt-light.png');
}

Next, we'll add some basic styles.

Code:

br {
   display: block;
   margin: 3px 0;
}

table {
	width: 100%;
	margin: 0 auto;
	background-color:transparent;
}

th {
	padding: 5px;
}

td {
	padding: 5px;
}

tr {
	padding: 5px;
}

2) Now, we need to make a wrapper for the main content of the site. We're going to add a few things. The border and padding is entirely optional. Also, the margins will make the content itself be off center. This is because we're adding a sidebar later!

Code:

#wrapper {
    	width: 800px;
	background-color:#7ac068;
	color:#0b0118;
    	margin:10px 10px 10px 25%;
    	padding:20px;
    	border-radius: 30px;
  	border: 3px dashed #fff;
}

3) Next, let's set up the title image. Note that I currently am still working on the image for my site, so just replace the placeholdit image with something that fits yours. Again, the border stuff is completely optional.

Code:

#titleimage {
	padding:20px;
	background-image:url('https://placeholdit.imgix.net/~text?txtsize=30&txt=800%C3%97150&w=800&h=150');
	height:150px;
	font-family:'Kurale';
	font-size:30px;
	color:#69969C;
	text-align: left;
	vertical-align:bottom;
  	border-bottom-left-radius: 30px;
  	border-bottom-right-radius: 30px;
}

#titleimage a {
	font-family:'Kurale';
	font-style: italic;
	font-weight:bold;
	font-size:40px;
	text-decoration:none;
	color:#69969C;
	text-align:left;
	vertical-align:middle;
}

#titleimage a:hover {
	color:#fff;
	text-decoration:none;
}

By the way, the "a" means the link, which is what the title is so we need to style it.

4) The content itself! This is pretty straight forward, this is just the styling for what's actually in each page. Note that some pages have their own styling (profiles, for instance) that you'll need to add later on.

Code:

#content {
    background-color:#FFD3AA;
    padding:20px;
    vertical-align:middle;
    font-family: 'Raleway', 'Roboto', sans-serif;
    font-size: 12px;
    border-radius: 30px;`
    border: 3px dashed #fff;
}

#content p {
    background-color:#FFD3AA;
    font-family: 'Raleway', 'Roboto', sans-serif;
    font-size: 12px;
	margin: 10px;
    vertical-align:top;
}

#content h1 {
	font-size: 20px;
	border-bottom: 1px solid #fff;
	font-family: 'Chewy', 'Raleway', sans-serif;
	margin: 10px;
	color: #0b0118;
	font-weight: bold;
}

#content h2 {
	font-size: 15px;
	border-bottom: 1px solid #fff;
	font-family: 'Chewy', 'Raleway', sans-serif;
	margin: 10px;
	color: #0b0118;
	font-weight: bold;
}

#content img {
      border: 0;
      max-width: 100%;
}

#content a {
	text-transform: lowercase;
	color: #000;
}

#content a:hover {
	color:#fff;
}

The "p" stands for paragraph, which is usually the bulk of the content. H1 means "header 1", so you can guess what h2 means.

5) Before we tackle the sidebar, let's style the footer real fast. Feel free to change or add a font-color option (color:#xxxxxx)

Note: We have yet to add text to the footer, so feel free to add some sort of test text or even just what you want in there now in the template.tpl file (I said it was powered by Mysidia and then added my own copyright mention).

Code:

/**********************
		FOOTER			
***********************/
#footer {
	clear:both;
	margin-top: 50px;
	font-size:10px;
	text-align:center;
}

#footer a {
	color: #000;
}

6) Almost lastly, for the basic styling we're going to finally add the sidebar! :D Let's break this into pieces. Firstly, let's style the main part of the sidebar.

Code:

#sidebar {
	padding: 20px;
	background-color:#FFD3AA;
    	width:250px;
    	position: fixed;
   	left:5%;
  	margin-right: 5%;
  	font-family: 'Raleway', 'Roboto', sans-serif;
  	border-radius: 30px;
  	border: 6px dashed #fff;
}

You can reduce the padding (I gave mine a lot), and get rid of the borders if you want. The position is fixed so that it scrolls with the page.

Now, let's add some links to the sidebar so that we can see what we're adding next.

I added the following:

Code:

	<div id="sidebar">
	<center>
    			<ul>
    			<li><a href="/myadopts">Companions</a></li>
    			<li><a href="/account">Manage Account</a></li>
    			<li><a href="/inventory">Inventory</a></li>
       			</ul>
    	</center>
	</div>

Now we'll style the links as well as any content in the sidebar. The "ul" is a list, and this will make them look like buttons! The border radius is, as usual, totally optional.

Code:

#sidebar p {
	margin: auto 10px;
	color: #0b0118;
}

#sidebar h1 {
	font-family: 'Chewy';
	font-size: 20px;
	border-bottom: 3px solid #fff;
	text-transform: uppercase;
	color: #000;
}

#sidebar a {
	text-transform: lowercase;
	color: #000;
	text-decoration: none;
}

#sidebar a:hover {
	color:#fff;
	background-color:#9e88ba;
}

#sidebar img {
	max-size: 300px;	
	background-color:#7ac068;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #804815;
    border-radius: 30px;
}

#sidebar li a {
    display: block;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
}

#sidebar li a:hover {
    background-color: #3E1255;
    color: white;
}

7) Ok, we're finally at the end of the basic styling!! Then we'll get into the smarty template stuff. We're going to fix up the top navigation. This code is not mine, and works really well. It is included with Mysidia. 10/10 would recommend.

Code:

/**********************
		NAVIGATION			
================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#navigation {
	width: 800px;
}

#navigation .ddmenu { 
	position:relative; 
	z-index:100;
	width: 800px;
}

#navigation .ddmenu ul li a, .ddmenu ul li a:visited {
	display:block; 
	text-decoration:none;
	font-size:12px; 
	color:#000;
	width:198px; 
	height:20px; 
	text-align:center; 
	color:#fff; 
	border:1px solid #fff; 
	background-color:#AADD9C; 
	line-height:20px; 
	overflow:hidden;
}

#navigation .ddmenu ul {
	padding:0; 
	margin:0; 
	list-style: none;
}
#navigation .ddmenu ul li {
	float:left; 
	position:relative;
}
#navigation .ddmenu ul li ul {
	display: none;
}

/* specific to non IE browsers */
#navigation .ddmenu ul li:hover a {
	color:#fff; 
	background-color:#9e88ba;
}
#navigation .ddmenu ul li:hover ul {
	display:block; 
	position:absolute; 
	top:21px; left:0; 
	width:198px;
}
#navigation .ddmenu ul li:hover ul li a.hides {
	background-color:#AADD9C; 
	color:#fff;
}
#navigation .ddmenu ul li:hover ul li:hover a.hides {
	background-color:#AADD9C; 
	color:#000;
}
#navigation .ddmenu ul li:hover ul li ul {
	display: none;
}
#navigation .ddmenu ul li:hover ul li a {
	display:block; 
	background-color:#AADD9C; 
	color:#000;
}
#navigation .ddmenu ul li:hover ul li a:hover {
	background-color:#9e88ba; 
	color:#fff;
}
#navigation .ddmenu ul li:hover ul li:hover ul {
	display:block; 
	position:absolute; 
	left:198px; 
	top:0;
}
#navigation .ddmenu ul li:hover ul li:hover ul.left {
	left:-198px;
}

Smarty Template Sidebar & Footer :3
Ok, this part is probably the most difficult, but I promise it's really not that hard! If you don't want to use this, you can replace everything we've put in the "<div id="sidebar">" with just "{$sidebar}" and ignore the smarty template stuff. If you do want it, however, please read on!

1) First, we gotta edit the class_template.php. In the private "function assignTemplateVars", you'll see that it's already assigning some variables. We're going to add more, too. First add the following:

Code:

$mysidia = Registry::get("mysidia");

2) Now we get to add a bunch of variables to use! Here are all the variables I've added:

Code:

$this->assign("logged_in",$mysidia->user->isloggedin);
        $this->assign("username",$mysidia->user->username); 
        $this->assign("cash",$mysidia->user->getcash());
        $messages = $mysidia->db->select("messages", array(), "touser='{$mysidia->user->username}' and status='unread'")->rowCount(); 
        $this->assign("messages",$messages); 
        $online = $mysidia->db->select("online", array(), "username != 'Visitor'")->rowCount();
        $offline = $mysidia->db->select("online", array(), "username = 'Visitor'")->rowCount();
        $this->assign("population","{$online} Members and {$offline} Guests");
        $now = new DateTime();      
        $display = $now->format('h:i A');       
        $this->assign("time",$display);
        $this->assign("favpet",$mysidia->user->getFavpetID());
	$favpet = $mysidia->user->getFavpetID();
        $this->assign("favpet",$favpet);
        $this->assign("theme",$mysidia->user->gettheme());
        $profile = $mysidia->db->select("users_profile", array("uid", "avatar"), "username = '{$mysidia->user->username}'")->fetchObject();
        $img = "<img src='../../".$profile->avatar."' class='avatar'>";
        $this->assign("avatar",$img);  
        $this->assign("group",$mysidia->user->getgroupid()); 
        $req = $mysidia->db->select("friend_requests", array(), "touser='{$mysidia->user->username}' and status='pending'")->rowCount(); 
        $this->assign("req",$req);

I think most are pretty self-explanatory if you read them carefully, but if you have a question let me know :)

Now we'll add them to the sidebar. You can adjust the layout of the sidebar with where you put the links, but this is my sidebar:

Code:

{if $logged_in} 
			<h1>{$avatar}:.<a href="{$home}profile/view/{$username}">{$username}</a></h1><br>	
			${$cash} {$mysidia->settings->cost}<br>
			<a href="{$home}messages">{$messages} Messages</a><br>
			{if $req = 0}
			<a href="/account/friends">0 requests</a><br>
			{else}
			<a href="/account/friends">{$req} requests</a><br>
			{/if}
			<a href="/changestyle/"><b>Theme:</b> {$theme}<br></a>
			<br>
    			<center>
    			<ul>
    			<li><a href="/myadopts">Companions</a></li>
    			<li><a href="/account">Manage Account</a></li>
    			<li><a href="/inventory">Inventory</a></li>
    			{if $group != 1}
    			{else}
    			<li><a href="/admincp">Admin CP</a></li>
    			{/if}
    			</ul>
    			</center>
    			<br>
		{if $favpet != 0}
			<center><a href="/myadopts/manage/{$favpet}"><img src="/levelup/siggy/{$favpet}"></a></center><br>
		{else}
			<center><b>You have no favorite pet!</b><br></center>
		{/if}
		{else}
			<center>Please <a href="{$home}login">Log In</a> or <a href="{$home}register">Sign Up</a>!</center>
		{/if}	
		{if $logged_in} 
			<center><a href="{$home}login/logout">Log Out</a></center>
		{/if}

The "if"s are to change how the sidebar appears depending on what certain variables are. For instance, if someone doesn't have a favpet it'll display text explaining that rather than just displaying a weird image.

Lastly, we'll add one last thing to the footer.

Code:

<a href="{$path}online">{$population} are adventuring right now!</a><br>

So, that's the smarty template stuff! There is probably more you could add, but I haven't experimented with anything else.

Within the next few days I'll create another post in this thread about how to add a second sidebar and style the profile page & online page :D

Abronsyth · #2 12-23-2016, 01:58 PM

Awesome tutorial! I bet it will help a bunch of folks out!

LUC1G07CH1 · #3 07-16-2017, 03:35 PM

I'll use this if i finish all the NPC's :>

LUC1G07CH1 · #4 07-16-2017, 04:16 PM

I tried it and...
"Fatal error: Uncaught exception 'SmartyException' with message 'Unable to load template file 'template.tpl'' in /home/enchante/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php:127 Stack trace: #0 /home/enchante/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php(374): Smarty_Internal_TemplateBase->fetch('template.tpl', NULL, NULL, NULL, true) #1 /home/enchante/public_html/classes/class_template.php(136): Smarty_Internal_TemplateBase->display('template.tpl') #2 /home/enchante/public_html/classes/class_view.php(280): Template->output() #3 /home/enchante/public_html/classes/class_frontcontroller.php(102): View->render() #4 /home/enchante/public_html/index.php(74): FrontController->render() #5 /home/enchante/public_html/index.php(78): IndexController::main() #6 {main} thrown in /home/enchante/public_html/inc/smarty/sysplugins/smarty_internal_templatebase.php on line 127"

What's New?

What's Hot?

What's Popular?