|
 |
Due to the volume of spam happening on our forums, posting is now restricted to verified members only. If you're not verified, drop us a note with your username.
|
|
Home > FlexCMS Support Forum > User Help > FAQ's: Templates > FlexCMS Templates Tutorial and Information
FlexCMS Support Forum
FlexCMS Templates Tutorial and Information
Started April 14, 2005 @ 4:39pm by DCSun
|
(This thread is currently Locked) |
DCSun
Administrator
Posts: 625 |
|
|
| FlexCMS Templates Tutorial and Information | April 14, 2005 @ 4:39pm | General Template Information
Website templates are a merging of graphics and programming, and FlexCMS templates are no different. They do differ in the way they?re put together, though, as FlexCMS uses mostly PHP code to assemble it all together.
We?ve created this small tutorial to help you find your way through the FlexCMS template system, and hopefully create the look and feel you desire for your website. Should you discover this is all too much for you, we also offer template services starting from just $25.00 (USD), so contact us with your project details for more information.
Folders
FlexCMS templates are stored under the ?templates? folder in your main site directory. Under that folder is one for each template, which contains all the code and images required to use it.
If you would like to create your own template, start by making a folder for it. The name should contain only letters, numbers, hyphens, and underscores. Please note that this may cause some errors in your Switch Templates section if you don?t have the necessary files present in the template folder, however the site should not have any problems outside of that area.
Template Information File
Inside each template folder is a file called ?template_info.php?, which contains information about the template. Inside this file is the template code (which should match the name of the folder it resides in), name, FlexCMS version, creation date, and information about its creator and copyright. You can simply borrow a template_info.php file from one of the existing FlexCMS templates and modify it to match yours.
Template Code
All of the code required to use the template is contained in the ?template.php? file.
This file has three main sections:
1. Color and Font information
2. Code required to build the blocks;
3. Code required to build the final template.
If you?re starting work on a new template, just grab the template.php file from an existing one that matches the style of yours as closely as possible.
The first section is fairly straightforward.
About 35 variables here contain everything from the default font face and size for the site, to colors for text, links, calendar, forums, and more. These can all remain the same for now and adjusted later when the rest of the template looks the way you would like.
In the second section is everything required to build the blocks for the template.
There are eight block locations in FlexCMS: Left, Right, Top Center, Bottom Center, Top Full, Bottom Full, Top Banner and Logo.
The code for these can be defined all as one, or separately depending on the style of the template. Sometimes the blocks need only be an invisible table to contain their contents, while other times an elaborate series of tables and images are required to create the look you want.
Each location has six sections: Header, Footer, Spacer, Top, Title, and Bottom.
The Top, Title and Bottom sections are added together for each block with the spacer between each block and the header and footer surrounding them.
Depending on the look you?re after, some or many of these may simply be empty or spacer images, or they may contain extensive code. This may sound confusing, but once you get used to it, it will make a lot of sense.
You can play around with an existing template to see what does what to get an idea how it all works.
Note: At the top of this section there should be a map of the numbers that correspond to the different block locations. If you enter a number in the section, it will apply only to that location, or you can enter a zero and it will apply to all sections. This way you can create the default for all the sections, then alter them down further for any ones that differ.
The final section is the main code for the template.
It will be basic html tables and images, with special tags added where the blocks and page contents will be. There are also tags for the header elements like meta tags, and the footer information like login link and processing time. These should all be present in any template you create.
The CSS style section should also be used, as it will enable you to use different colors for the blocks than the page contents, and is needed for some of the other features like link hover and underline options.
Graphics
Most likely you?ll want to have at least some graphics in the design of your template, and perhaps you?ll even want an elaborate series of images and tables to create the look you desire.
In any case, you first need to create the images before you can create the code to put them together in the template. Adobe Photoshop is the industry standard, but other packages such as Paint Shop Pro or Ulead PhotoImpact will also work, so choose one you can afford and are comfortable working with.
If you?re just starting out making the images for your site, we suggest you start with a 720 by 600 pixel image. This will give you a site that will fit into an 800x600 resolution monitor, which is what you should aim for as the minimum requirement to view your site.
You should also stick to GIF and JPEG images for your template, as PNG support sadly isn't to where it needs to be yet.
Once you have the design looking the way you would like, start thinking about how you?ll slice it up to work with the site it will wrap around. Consider things like how certain areas will stretch when larger content is inserted into it, whether you want the whole template to stretch to fill a larger screen or stay a fixed size, and how the various elements will be programmed with html to display on the site.
Tip: You may find on some more complex designs, that you can help yourself visualize the table better by printing off the design and drawing in where the slices need to be. It's also a good idea to number the various sections to help you name the files and pull it all back together when creating the tables.
Putting It All Together
In most cases you?ll want to simply take an existing template and modify it to suit your design.
The best way to do this is to copy the entire folder and go from there. That way you?ll get all the parts and pieces you need and you can adjust it as you go to get the look you desire.
Don?t forget that as of FlexCMS version 1.3 there is now a Template Preview feature in the Switch Templates section, which will let you see how your template looks on your site without disrupting the live site people will see.
As noted at the top of this page, we also offer a wide range of template services to assist you. Whether it?s a simple question or two on the forums, slicing and creating the code for a template you designed, adapting an existing template to work with FlexCMS, or creating a custom template for you from scratch, we?re here to help. Prices for template work start from just $25.00 (USD), so contact us with your project details for more information.
FlexCMS v3.2 Has Been Released! |
|
|
|
Last Edit: April 14, 2005 @ 5:17pm by otter | |
|
|
|
|
| (This thread is currently Locked) |
|
|
| MEMBERS
|
|
|
