How to design a theme?

CallumCharlton · #1 03-22-2015, 08:05 AM

So I have created a layout I'd like to use for the site in a normal way I would for any website, but how on earth would I apply it to everything? Code is below - no sticky fingers please :3 (Also ignore my awful indention - it's only a WIP)

Spoiler: CODE

***Kyttias*** · #2 03-22-2015, 03:11 PM

Inside the templates folder, create a folder with a name of your choosing - it is the name of your theme. Inside this folder, we'll split your code above into three parts.

style.css -

Spoiler: style.css

header.tpl -

Spoiler: header.tpl

template.tpl -

Spoiler: template.tpl

Also try rendering {$site_name} and use the built in {$menu} if you can (you can use the default css by adding {$header->loadStyle("{$home}{$css}/menu.css")} to your header - or just examine that code and build from there, of course). (Otherwise be sure to direct links back two directories if you're going to use your own - that way they work across all pages. "../../myadopts.php" instead of just "/myadopts.php", for example.) Be sure to figure out how you'll manage tabs on the profile page, too. Don't forget to swap out a favicon in your root directory (not in the templates folder).

Once you have the files ready to go, go into Admin CP and down to Themes and install the theme there: Enter the theme name and folder (these should be identical and match the case of the folder you created). Leave the header, body and style textboxes all blank. (In Mysidia v1.3.4 you must click on the checkbox beside 'The style has been uploaded to the site, and is pending for installation' at the very bottom of the theme creation form. Not doing so will wipe the template files you just put in place.) Submit!

If you would like to set it as your main theme later, in the Admin CP go down to Settings > Basic Settings and this will open up a page for Global Site Settings. Write the name of your theme in the Default Theme input box and hit 'Change Global Settings' to save it. If you'd like to remove people's ability to select other themes, in the Admin CP go to Links > Edit Links and it will open up the Site Links Manager. All you have to do is remove the link that would take visitors to changestyle.

As for constructing your Top Bar how you like it, please check out this thread I made, as it'll require some custom effort on your part.

CallumCharlton · #3 04-02-2015, 02:57 PM

I'm not exactly half decent with PHP in any way. Would you be up for explaining that to me? I understand if I'm asking too much haha xD

***Kyttias*** · #4 04-02-2015, 03:15 PM

Explaining what, exactly? I knew nothing about PHP before I began working with this framework last spring. If there's something I'm not clear about, just let me know, and I'll try to reword.

CallumCharlton · #5 04-02-2015, 05:04 PM

Okay I have a few questions haha,
How exactly do I add PHP to a normal layout? I know the tags etc. and it works similarly to say CSS but where do I put things - is it applied to each page? Also, what command is used to show the total user currency haha? Been searching through the script to see an example but can't. I wish there was a directory with all the commands used in for reference haha xD Awfully sorry!

***Kyttias*** · #6 04-03-2015, 10:42 AM

In normal PHP and HTML, yes. However...

In this case, the normal layout is not HTML, so you cannot add PHP directly to it. The 'layout' in a graphical sense, is a template file made with Smarty variables. Smarty is a commonly used PHP templating engine, and the files have the .tpl extension - they're a mix of HTML and Smarty variables. Above, I converted your files over. Very simple, all I had to do was paste the HTML in and replace a few key aspects with variables. So, the answer? You don't add it to the normal layout, you add it as a Smarty variable and then use it like as a variable inside curly braces inside the template file.

In the thread I linked in my original reply, I explain how to construct a Smarty variable inside classes/class_template.php to use inside your theme's template files.

And, yes, as you can imagine, a template means it is used on every single page. Perfect for a bar of user information at the top of the page.

For the sake of not leaving this thread, I'll tone down the tutorial in the thread I linked to use just one example - displaying the total user currency as a Smarty variable inside your theme's Smarty template.

Let me first take a moment to recommend a text editor meant for code -- Notepad++ is free, but I personally recommend Sublime Text, an even more powerful text editor, which comes with a free trial. These sorts of text editors come with syntax highlighting and the ability to create 'project' folders that can be searched through. Mass searching through hundreds of files without having to open them all one at a time? Win.

Ok, so, as I said, let's open up classes/class_template.php. Find where private function assignTemplateVars(){ is. You'll see this inside of it:

PHP Code:


			
$this->assign("version", Mysidia::version);
$this->assign("root", $this->scriptRoot);
$this->assign("home", $this->tempRoot);
$this->assign("temp", $this->temp);
$this->assign("css", $this->css);
$this->assign("js", $this->js);

Cool. Leave those there. These are defining variables that help you in the template file to link places easily. (Take a peek in your header.tpl, you'll see a couple of them being used -- {$home}{$temp} -- see?)

Alright, beneath this small tower of $this->assign();s, we're going to assign some variables of our own. Because you asked, the user's current currency.

First, we will need the line $mysidia = Registry::get("mysidia");. We need this so we can have the variable '$mysidia' contain a dynamic, yet static, link to the parent class called "mysidia", so we can invoke methods and properties from it. Bellow you'll see that 'user' and 'settings' are child classes of '$mysidia' and the functions and variables that come after them are literally found inside classes/class_user.php and classes/class_settings.php. You only need to define $mysidia once inside of a function, so best to do it very early on.

The next line we'll need is $this->assign("cash",$mysidia->user->getcash());. We're calling the template class, '$this' since its the one we're currently in, to use the function 'assign()' to assign a Smarty variable to the word "cash", and the variable we're assigning is the result of the 'getcash()' function found inside the 'user' class, a child class of the '$mysidia' class.

And finally, this is optional -- if you want the name of your currency as defined in your settings (hint: inside the 'settings' class this variable is known as 'cost' and is being pulled from the database table adopts_settings) you can obtain it using the line $this->assign("currency",$mysidia->settings->cost);, which will assign the variable 'cost' inside the 'settings' class, a child class $mysidia, to the word "currency".

So, here we go:

PHP Code:


			
$mysidia = Registry::get("mysidia");
$this->assign("cash",$mysidia->user->getcash());
$this->assign("currency",$mysidia->settings->cost);

Ok, our variables are now ready to use. But what happens if the user is not logged in? Good question. The {$cash} variable will remain empty, but the {$currency} variable still holds the name of the site's currency. If you want this information to only display while the user is logged in, you'll also want this line:

PHP Code:


			
$this->assign("logged_in",$mysidia->user->isloggedin);

{$logged_in} is now also a variable, and I'll show you how to use it in a sec.

Now that these are in place, save the template class file and be sure to reupload it to your server. You can now head over to your template file, template.tpl -- the one I had you create for your theme in the original post. We assigned data to the variables {$cash} and {$currency}. Place these wherever you like, save, upload the updated file, and go view your site!

Great. Now to only make them display if the user is logged in. Smarty can handle some basic if-statements inside curly braces, like this:

PHP Code:


			
{if $logged_in}
        {$cash} {$currency}
{else}
        You are not logged in! <a href="{$home}register">Make an account?</a>
{/if}

You'll probably want a few other things in there, so please review the thread I originally linked explaining all this for more help.

That should be all, as far as assigning variables that can be used to display data in the template goes.

If you have questions about making custom pages that can use PHP, rather than making new pages through the rather restrictive text-only WYSIWYG page maker in the AdminCP, go ahead and make a new thread and I'll help out there? ^^

CallumCharlton · #7 04-03-2015, 11:44 AM

Thanks very much - major help! <3

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Name for my web design service?	tahbikat	Webmasters Area	7	04-05-2014 02:08 AM
Need Opinions Please (card design)	Tequila	Other Chat	6	05-02-2013 07:14 PM
Custom design pets	Chibi_Chicken	Mys v1.2.x Mods	34	03-11-2013 09:58 AM
Responsive design	Kesstryl	Suggestions and Feature Requests	5	03-06-2013 02:34 PM
Ugliest Design Ever??	Tequila	Other Chat	9	10-28-2011 04:37 AM

What's New?

What's Hot?

What's Popular?