Tag it:

I will attempt to provide a very first tutorial to show you how to use YouCMSAndBlog IDE editor to build a Joomla template with True View mode.

For Quick View mode, I think it should be very easy for you to understand by downloading the IDE and try to open Blogger templates from sample directory as shipped. And for sure in a future I will try to come up with a tutorial once have more time to spend for writing.

Please note this tutorial is not only applying to Joomla template, but any other template / theme  (Drupal, php-Nuke, Mambo) and Blog template (Blogger, Wordpress, etc) as long as they uses tags  based.

Also in this tutorial it may not be really suitable for people who is the first timer trying to understand creating and designing a Joomla template and I am not really going to explain in such detail (but sure..please feel free to give me feedback how should this tutorial be improved). 

In this part, we will cover:

• What is Joomla Template
• YouCMSAndBlog Background Design
• Setting up Joomla environment for YouCMSAndBlog with TrueView
• Relation between YouCMSAndBlog True View Mode and Joomla Default Template

What is Joomla Template

When you create a Joomla template, you will always need to create 2 main files:

• index.php (template), to control the contents that is going to be displayed, i.e. modules & components
• template_css.css, to control the presentation of the contents.

YouCMSAndBlog Background Design

YouCMSAndBlog first design is with Joomla on my mind. Basically I would like to have an  editor which allow me to inserting all Joomla supported tags easily with offline and online documentation for each tag while I am editing plus just in time rendering view on the same editing window. It is then suddenly..hey...why not I build it to be extendable for any other CMS or Blog template with tags list based  as well ? That was when I decided to build the editor / IDE just like that.

In fact YouCMSAndBlog IDE does not do much thing but it is just a simple container for you to load your  predefined tags list into listbox for you to easily double click and inserting into editor, coordinating editor to do text editing and synchronise it with simple renderer to give you an instant view of your template (whether rendered through TrueView, directly accessing your localhost http or Quick View, a dummy data which you have built on and stored in *.quickv.xml) 

As briefly mentioned above, YouCMSAndBlog supports three editing mode but implementation will be depent on how do you modify or add in main configuration, taglist template and quick view template. Following I need to explain few terms wich is used for this IDE:

1. Editor (Builder) definition: It is used for main configuration and will be displayed on the left side of IDE as dropdown list named "Template Name". So you can say Editor / Builder is equal to CMS/Blog Template that you want to support in the IDE, i.e. Joomla Editor/Builder (Template), Wordpress Editor/Builder (Template), Blogger Editor/Builder (Template) and so on. You can create your own Editor/Builder definition, i.e. Joomla 1.5, Mambo, Drupal, others easily by copying one of existing Editor/Builder taglist template with ext: *.taglist.xml, renamed it and start to modifying it.
   
   
2. View Mode: Currently support 3 view mode but still depent on whether your builder is configured to support all of them or does not, which are: Quick View (configured through *.quickv.xml), TrueView (need to specify on configuration.xml) and OFF view (basically OFF view means IDE works just like a normal text editor):

• Quick View: With assumption that you have created a Quick View template for particular Builder (Template), during editing you can switch to this mode via Edit menu. It provides you to see how your template design will look like with model data (dummy data) which you have define in [template-name].quickv.xml. I will say you can think off to use this view if only you do not have installed any CMS server or blog server on your localhost. For real example will be: people who download Blogger template and want to try it out on their local machine without having to go back & forth updating it on online Blogger website itself (yeah...friends, some part of the world which Internet connection is still expensive thus they could not afford to keep online).
  
  Note: If your template supports True View and Quick View, both view will be displayed on the menu.

• True View: What happens here it when you are editing the template, this IDE will really update your modification to your localhost's template directory (off course, there is a very comfortable  automatic back-up performed by the IDE which you can turn off at anytime). For heavy user / designer, I will suggest you to use this view, i.e. Joomla, Drupal, Wordpress. You can install easily all-in-one package for Apache, PHP and MySQL with a free tool such as: WAMP. After that, you can install your CMS or Blog engine.  If you use this view, you need to let YouCMSAndBlog IDE know where to load your default page, i.e. http://localhost/joomla, http://localhost/wordpress in configuration.xml.
  
  Note: If your template supports True View and Quick View, both view will be displayed on the menu.
  
  
• OFF View: Basically it means no interactive mode at all. It will work like a normal text editor, i.e. Notepad, UltraEdit, EditPad. If you have a slow computer, it is advisable to switch to this view when you just started to scratch out your new template. Anytime, you can switch back to True View or Quick View.

Setting up Joomla environment for YouCMSAndBlog with TrueView

<trueview-http>http://localhost/joomla</trueview-http>

For example, my local Joomla is running on http://localhost/joomla.

Let's start to create a new template directory:

1. Under [Joomla Root Folder\templates, create a new directory and name it: trueview
2. Under .\trueview directory, you create a new directory and name it: css
3. Launch YouCMSAndBlog IDE
   
4. Create a new blank file by clicking on "New" button on Toolbar or selecting from File -> New
5. Select HTML Template name and double click on HTML Template to insert a html template
   
6. So far, your screen will be look like following:
   
7. Position your cursor to after <body>, select Joomla from Template Name dropdown and double click "Main Body". Your current code should look like this:
   

   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Untitled Document</title>
   </head>
   
   <body>
     <?php mosMainbody(); ?>
   </body>
   </html>
   

8. Click on "Save" button and save it as index.php under :[Joomla Root]/templates/trueview/
9. Click on "New" button again to create a new CSS document
10. Copy and paste following CSS style, I m not going to explain how it works here:
    

    
    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }
    
    #top
    {
    padding: .5em;
    background-color: #ddd;
    border-bottom: 1px solid gray;
    }
    
    #top h1
    {
    padding: 0;
    margin: 0;
    }
    
    #leftnav
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 1em;
    }
    
    #rightnav
    {
    float: right;
    width: 160px;
    margin: 0;
    padding: 1em;
    }
    
    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    margin-right: 200px;
    border-right: 1px solid gray;
    padding: 1em;
    max-width: 36em;
    }
    
    #footer
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;
    }
    
    #leftnav p, #rightnav p { margin: 0 0 1em 0; }
    #content h2 { margin: 0 0 .5em 0; }
    

11. Click on "Save" button and save it as template_css.css under [Joomla Root]\templates\trueview\css folder.
12. So far we have created Joomla base template (index.php) and css template to control its presentation. We will need another file named "templateDetails.xml". Copy and paste following code into templateDetails.xml:
    

    
    <?xml version="1.0" encoding="iso-8859-1"?>
    <mosinstall type="template">
      <name>trueview</name>
      <creationDate>1.0</creationDate>
        <author>your name</author>
      <authorEmail>your email</authorEmail>
        <authorUrl>your url</authorUrl>
      <version>1.0</version>
      <description>Build simple template with YouCMSAndBlog IDE</description>
      <files>
        <filename>index.php</filename>
        <filename>template_thumbnail.png</filename>
      </files> 
        <css>
            <filename>css/template_css.css</filename>
        </css>
    </mosinstall>
    

    
    I assume you can create it by yourself using the same steps above and save it under : [Joomla Root]\templates\trueview\ folder
13. So far, your IDE screen will be look like this:
    
    
14. Let's close all the document by right clicking on each tab now and launch your Internet browser (Internet Explorer, Firefox) to access Joomla admin page.

Relation between YouCMSAndBlog True View Mode and Joomla Default Template

As I have mentioned before that in order to use YouCMSAndBlog True View:

1. You must have installed  Joomla on your local machine (localhost). The same case apply to other CMS or Blog template that you are working on, i.e. Wordpress, Mambo, Drupal, etc.
2. Modify  configuration.xml to point respective editor <true-view/> to point to proper http:// address on your localhost
3. Set the template that you are going to modify as Default template.
   Right now, I believe you have a clearer picture why I explained this steps just after we finished  all neccessaries creation of new template & css as aforementioned section.

1. Login to Joomla admin page, select "Site Templates" as following screen:
   
2. Select on "trueview" and click on "Default" button
3. Now you can logout and launch YouCMSAndBlog IDE again
4. Open index.php which you have created before ([Joomla Root]/templates/trueview/index.php) and inserting one new line above <?php mosMainbody(); ?>
    and you will see immediate rendering page below Editor window something like below:
   
   
   
5. Now on the left side (ensure you are selecting Joomla Template), double click on "Site Config" -> Enter, double click on "Pathway" -> Enter, double click on "Top Raw Style" -> Enter, double click on "Left Raw Style" -> Enter and do the same below <?php mosMainbody(); ?> for "Right Raw Style" and "Footer". You can observe your bottom window, as you inserting new tag, your screen will be refreshed with the changes.
6. Now your overall code should be look like this:
   

   

7. You may notice some of Joomla tag is highlighted (modLoadModules but not mosPathway). That is the feature you can modify or add new tag keyword in configuration.xml in order to let IDE highlighted it for you.
8. Another good feature you may try it out with the IDE is go to Edit menu and select "Highlight Word", type in keyword you want to highlight, choose Highlighting Color and click on "Highlight" button.
   For example: following screen I tried to highlight all "mosLoadModules" keyword with "Yellow" highlighting color:
   
9. Ok, I have not finished my tutorial yet at this moment and I will resume once I have more spare time to write on. Especially to insert Joomla Head, config, inserting CSS and applying CSS to the template and so on.
   But I believe most of you know how to continue from here :)

Some notes to be taken:

• If you are planning to use this small software to design CMS & Blog Template, such as: Joomla, Wordpress, Drupal, etc which heavily depends on PHP script engine embeded inside your template file, I would strongly recommend to keep using True View because it is very hard to use Quick View (concept by creating a dummy data in HTML form to replace all the tags in the template) compared to old Blogger Template  which is not an issue.
• My intention to come up with Quick View concept is to enable user who do not have CMS or Blog engine running on their local machine but yet still be able to test out their own template or template downloaded from somewhere on Internet. I m thinking one way to solve about first point issue will be to run real PHP engine inside YouCMSAndBlog IDE  itself.
  
• If you have some feedback or something to share please let me know how can I improve this small software. We can discuss it here .