How do I make my own templates?

[Ziggy V]

Hello Everyone. It's Ziggy here again. I finally figured out how to get my forum up and going but I don't know how to make my own themes.

Can someone please explain? The docs didn't help me.

Thanks very very much.

[Antechinus]

Yep. Easy. You write a lot of code and throw in a few images.

Seriously there isn't much in the way of tutorials available. It depends how detailed you want to get and what results you are after. Minor changes are fairly easy. Re-writing entire templates will drive you mental if you have no experience. Usually people start with the small stuff to get the hang of things.

[Ziggy V]

Do you have to use HTML or something? Also, is there a program or something I could use to make it easier?

[Antechinus]

The templates themselves are written in php. Some of it is similar to standard html and some of it is different. The stylesheets are done in css, and there are also bits of javascript associated with some theme functions. Don't ask me about javascript because I have NFI on that one. Some of the other members are pretty good at it though.

There are some things you can do to make it easier. These are all free.

1/ Get Firefox. It has an awesome range of add-ons.

2/ Get the Web Developer add-on. It is an extremely useful tool for site and theme work.

3/ Install the ColorZilla colour picker. It'll give you the hex code for any coloured pixel on your screen, as well as having palettes and a few other handy things. Hovering the pointer over any element on your screen will give you the css class for it.

4/ MeasureIt - Allows you to measure stuff on websites to the pixel. Very useful for checking alignment and dimensions.

5/ FireBug - Another good Firefox web developer tool. I don't use this one much myself as I find it rather intractable, but some people swear by it and it is very good.

6/ For file editing Notepad++ is indispensable. It's a far better format than the live editing in your SMF admin centre. The direct link to the download page is here.

5/ Another good file editing tool is WinMerge. Unlike Notepad, Winmerge allows you to display two files side by side. It's useful for comparisons and for editing the same code blocks into different files when installing mods.

6/ Once you've edited your files you'll need to transfer them. My weapon of choice is CoreFTP. It's easy to use and does everything that needs to be done.

7/ If you don't have access to Photoshop try GIMP. Although it isn't perfect it is very capable and you can do a lot with it. It's also less fussy than Photoshop in some ways. It'll happily process some files that Photoshop wont touch. I have both and use one or the other depending one which is more convenient at the time.

8/ For quick and easy testing I would also recommend a local host, which is a server package that runs on your desktop. IMO this one is the best:Vertrigo.
Be aware that there are potential security risks with running a server on your PC. It should never be used for hosting an online site unless you are an experienced sysadmin. Disable registration on local sites and disable the RSS feed. Also make sure you use secure passwords for everything.

Last but not least, collect themes you like so you can pull them apart and see what makes them tick.
There is a video somewhere here which covers some of the basics but I can't remember where it is. KahneFan posted it so if you run a search on his posts you should find it.

[Apllicmz]

Thank you
that is good Tutorial

[Ziggy V]

Thanks very much! I'm going to try it later because it's 4:00 a.m. where I live and I need to go to sleep.

Plus, I have GIMP already. I LOVE it! LOL!!! I edit all my photos on it.

Also, my web host is www.000webhost.com [nofollow]. Can I still use Vetrigo?

[Antechinus]

You don't use Vertrigo online. It is what is known as a local host package. There are several available (XAMPP is another good one) but Vertrigo is the one I prefer.

A local host is a self-installing application that runs on your desktop. It is completely separate to your online hosting and not at all affected by it. The purpose of a local host is so you can run your test forum on your desktop, which makes editing and file replacement (and fixing nuked forums ) much quicker and easier. For instance, instead of having to ftp files into your online server you can just copy them from one folder to another on your desktop. The connection is instantaneous even if you are on dialup. You can even use it when not connected to the internet at all (although Internet Explorer tends to complain about that).

[Ziggy V]

I'm sorry but I don't understand how to use some of these programs.

I'm not stupid and I'm usually a fast learner but this is complicated because I have no idea how to use a couple of these programs.

WinMerge is confusing and I don't know how to use CoreFTP. Also, with the add-ons, they didn't even show up when I installed them. My computer is dumb.

[Antechinus]

Yes they are a bit of a headspin to start with. I can't really explain everything about all of them. I mean you already know GIMP, but if you didn't you can imagine how hard it would be to explain it.

Winmerge basically allows you to open two files side by side for comparison and editing. If you select File >> Open you will have the option to select two files from your desktop for display. If you need to know more I suggest reading their help pages.

CoreFTP (or FileZilla or any of the others) are File Transfer Protocol applications. You have to enter the FTP connection details for your server. Once connected you will see your desktop on the left and your server on the right. Files can be loaded either way. Again, help pages FTW.

The add-ons should show up. It shouldn't matter about your computer as long as you get the right version of the add-ons to match your version of Firefox. All you will see is another toolbar for the Web Developer (if you don't see it look in View >> Toolbars) and for ColorZilla and MeasureIt you will see an icon at the left of your status bar at the bottom of your screen. 

[bullbreedluverz]

google for tutorials for the programs - thats what i had to do when antechinus gave me the same list of programs to install 

[Ziggy V]

Ok, I'll try.

[john pedro]

Hello all, very productive discussion is going on!!

I want to add a bit, you can add templates by dreamweaver. Install the new one or the old macromedia dreamweaver there will be an option where you can create some thing and then you can save it as template. Its not a big deal, if you have any problem go to youtube tutorials. Even still if you problem is not solved come back here I will help you with it, but first do install dream weaver! Hope this helps!

[Antechinus]

I never bother using Dreamweaver, and I've seen a lot of newbies kill a lot of sites editing live with Dreamweaver.

[biofer]

thanks I really want to make a template for simple machinesand wordpress but I can not take action i can not find free time that will be next level for me

[john pedro]

So great of for biofer.... nice thinking!!