How would I change template.tpl to index.html?

[LucasA33]

Hi, I'm trying to incorporate a new theme into the directory of elements, but it isn't working seeing as the file is called template.tpl.

It's a long story but in short terms, I need to change template.tpl to index.html.

Any help would be appreciated!

[Hall of Famer]

Well why do you want to change template.tpl to index.html? Are you using Mys v1.3.2 or earlier versions? Since Mys v1.3.3 template.tpl is your theme template file, renaming it will not work.

[LucasA33]

I can't get this to work as it is supposed to. It's just running off javascript and support
http://project.pherasyn.co/

I can send you the files to play around with I guess.

[Kyttias]

A template file is an html file, but it also contains knowledge of dynamic data that PHP passes through it - the contents of the menu and sidebar from the admin panel, as well as the footer and login status. You basically have to work with it. The end product of template files inevitably does create an "index.html" as far as the client-end is concerned, and as far as Javascript would be. The files get glued together on the server end and no one is the wiser.

Copy stuff the head of the html document on up to the header.tpl (if it's necessary and doesn't already exist in some form, be wise), and stuff from the body of the html document into the template.tpl. Javascript belongs just before the closing body tag of template.tpl inside <script> tags, or otherwise linked to. If it's jQuery and not Javascript, remember to include the jQuery library before the script.

But what is it that you're trying to do? Creating a button to dynamically swap out the css file to give people a dark colored version of the same exact site? Yes, that could indeed be done with a bit of Javascript.

Here, I've made up a bit of a demo, I hope it helps: http://jsbin.com/bifuzuya/1/edit?html,output

[LucasA33]

Here is what I am trying to create.
Maybe I can show you the theme template.tpl and you can help me.
(Check your PM)
http://codecanyon.net/item/css3-awes...review/5727329

[LucasA33]

Okay, so I have finally been able to make it functional using an iframe.

pherasyn.co/menu takes you to the complete page as of now
pherasyn.co/game is the page the iframe loads.
I have it set up so whenever you load a page that is not the iframe version, it transfers you to it, the only issue is that it transfers you to the homepage, so if you click an adopt in a signature, it takes you to the iframe, homepage contrarily to iframe, click page.

Anyways I am so close to getting this working, just need a way I can get the non-iframe version to transfer you to the iframe version loading the page you were just on into the iframe.

Might need to post this on stacktrace if no one knows here.

Any help is appreciated! :)

[Kyttias]

Since you've mailed me the files, I'll try to make a template/theme you can install directly into Mysidia.

After closer inspection, again, if you want the theme to change color, you will have to swap out the css file with javascript. Their method links you to an entirely different html page, and no, you can't just swap out a .tpl the same way, without creating an entirely separate theme for each one. So I will use the code I gave you above to hack that feature back in. (Would you be interested in me making a button for it next to the menu, so it doesn't take up so much of the page and users can change it on a whim? Or is this a feature you're not even interested in keeping?)

Otherwise I'm done:


-

I also noticed the IcoMoon icons weren't working at first, so I headed to the official site to download the newest version of the icons from their official site. (I had to do a bit of looking around to find why they weren't working, and a fix suggested that I redownload the package in a specific way - so if you go back to use the IcoMoon app, when you're downloading them, you need to make sure this box is checked:)


Also? The file structure changed a little bit because of this, with the Fonts folder now inside the CSS folder. IcoMoon allows you create your own icon fonts with a little bit effort, which is cool: Just remember to make sure that box is checked when you're downloading your font package.

(As an alternative to IcoMoon fonts, I can recommend Font Awesome - which is helpful in that the list of icons and instructions on using them is very beginner-friendly.)

-

I should be ready to hand this to you tomorrow, hopefully! Just let me know if you still want to be able to change from a light to dark theme still, and I can patch that in so it works (and optionally make it a button next to the menu).

(*psst* If you've got some spare change floating around in a PayPal account, a tip's always nice. *wink* Not necessary, though. This hasn't been too hard. I'm just trying to save up to buy this really cool book: jQuery Game Development Essentials.)

[LucasA33]

I've credited 1,000 credits for your help, along with repurchasing the menu so you could use it in your projects, if you so desired.

Thanks for the help!

[Kyttias]

I've got a couple of questions (and comments):

1) I've tried asking twice about the light/dark changer, I'm going to assume a non-answer means you're not interested in letting the users change this. (Which is easier on me, and I'll remove it from the top of the page.)

2) When using the admin control panel to modify the contents of pages, the text editor provided there adds a div with a name of 'document' but this is somehow interfering with the existing code. I've fixed this anomaly with a bit of jQuery.

3) The modifications you've made to the menu haven't stuck to the original code enough for certain aspects to work - due to missing elements and accidentally deleted closing tags (so I'll be commenting the code to the menu to mark begin and end points, for readability's sake - since you'll be manually editing this menu). Currently, I'm particularly worried about the submenus that open up and make the menu taller than the page itself. In the demo, a scrollbar appears. In your version, this doesn't happen. I will attempt to fix this before handing it over. (This right here is what is causing the longest delay right now.) Please note, I actually don't recommend having such long content as part of your menu, as users probably won't want to scroll. The paragraph under Events, being so close to the bottom, is especially troublesome. I'll let you decide what you're going to do about this.

4) In the first set of files you handed me, you were using the light colored bar at the top (and this is what is also present in the attempt you linked). Do you want it to look like the demo with the dark colored bar? Changing from a light bar to a dark bar is just as easy as swapping out the class found right under the body, in the header. ( <header class="css3aw-theme-dark"> or <header class="css3aw-theme-light"> ) -- I'm just not sure if this was an intentional design choice or not. Can I get a confirmation of what the default set up is that I should be handing you?

5) Even on the demo site, the page contents are off center (by about 30px). Rather than fix this in a complicated way, I went the easy route and just shifted the site title over 30px, and it's not so noticeable now.

6) Looking at the demo - when the screen width is smaller, the header gets shorter, yes, but the page content is still at a fixed size of 800px, making the page contents cut off. This will effect tablets and smart phones, so I'm going to patch in a quick fix, so that under a certain screen width, the text-container has a width of 100%. You're welcome. ^^

7) I've also added in a link to a favicon (that icon next to a browser tab's page title). It is stored with the other images in the theme, just gotta edit it~

8) Sadly, buying a second copy of the license was unnecessary. I'm not interested in using this... it's nice looking, but the amount of effort taken to fix it hasn't been worthwhile. (...I really could have made myself something better and faster than it took to fix it.) And you still have a long way to go: You'll have to include the sidebar or hack in stuff to the menu so users can log in and view their currency amount at a glance, etc.

9) In addition to everything else, the file you purchased only contained styles for the menu and nothing more. In the root of the template theme I'm giving you there is now a style.css where I've written in some basic properties - the body text color, link color, and link hover color. It's a start. (The demo itself only styled the font color and link color within lists, which is all their demo used for actual page content.) In the end, I recommend supplementing your purchase with a full css framework or getting your hands dirty and writing in your own styles. -o-;;

10) In your menu I've changed your direct links to relative links. So what this is, rather than a full URL, there is a variable instead. That is, you're now using something like <a href="{$path}search"> instead of <a href="http://pherasyn.co/game/search">. This is the joy of using a template (.tpl) instead of html! The {$path} variable knows exactly what your install directory looks like. Also note that URLs cannot contain spaces, so any instance I saw a space, I replaced it with an underscore: <a href="{$path}shop/browse/Item_Shop"> instead of <a href="{$path}shop/browse/Item Shop">. Please verify that these new locations work?

Still, I enjoy being helpful so I will get this done for you. ^^

-

Other than the scrolling on the menu, which still does not work, I have sent the updated files to your inbox.

[LucasA33]

1] nah I just wanted the light theme
3] I can work with this myself
4] yup, states in documentation
5] thanks!
6] thank you so much :)
8] the code I bought was 3 dollars and was just a menu so I could incorporate my own css for the page. I realize repurchasing it wasn't nessacary, but it was because I distributed it to you. Just my weird way to say thank you.