Scribd Logo
Upload

Welcome to Scribd!

  • Designing A Basic Joomla Template

    Uploaded by

    NeogainSEO
    31 views5 pages
    Joomla template design can seem overwhelming as can Joomla in general. However there is a strong community, good documentation and businesses such as ours you can hire to lend a helping hand.

    Original Title

    Designing a Basic Joomla Template

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Joomla template design can seem overwhelming as can Joomla in general. However there is a strong community, good documentation and businesses such as ours you can hire to lend a helping hand.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    31 views5 pages

    Designing A Basic Joomla Template

    Uploaded by

    NeogainSEO
    Joomla template design can seem overwhelming as can Joomla in general. However there is a strong community, good documentation and businesses such as ours you can hire to lend a helping hand.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Designing a basic Joomla template

    Joomla template design can seem overwhelming as can Joomla in general. However there is a strong community,
    good documentation and businesses such as ours you can hire to lend a helping hand.

    Many Joomla users don’t design a template, instead they either choose a stock template or modify the template that
    accompanies Joomla. There are many templates which are flexible and with some clever tweaking, plus good
    administration can be tailored to fit a company branding or the requirements of other types of users.

    However there are times when having a template designed for you is the best decision and it provides an even great
    degree of flexibility. If you have absolutely no experience of designing a template for Joomla it is a daunting task that
    many fail to successfully tackle.

    This article gives you a nudge in the right direction to help overcome some of those initial hurdles.

    Note: This article presumes you have basic template design knowledge and understand the basics of Joomla
    already. Else if you are a complete novice, bookmark this post and visit after spending time installing and configuring
    Joomla. We won’t be answering tech questions in the comments.
    The Tools

    The development server


    It could be tempting to design a template and test directly on a live server hosted elsewhere, but the best route
    forward is to have your own development environment. For windows users this can easily be achieved by using
    Xampp, which will provide a localhost environment comprising of Apache, MySQL and PHP. Essentially you turn your
    own computer into a dev server and you can enable and disable Apache, MySQL and PHP anytime you wish through
    Xampp’s control panel.

    Xampp is free to download and you can download it from: http://www.apachefriends.org/en/xampp.html


    The coding
    Many people think that only hard core web designers code in text editors, but actually it isn’t too tough if your using a
    text editor such as Notepad++ . Notepad++ is a feature rich Windows application and the software is free. The
    website is: http://notepad-plus-plus.org

    Designing
    Once you’ve got your development environment setup you can setup a localhost Joomla website. The benefit being
    when you are designing you can see your template design evolve in real-time.

    Joomla doesn’t modify the root index file, instead it uses a selected template stored in sub-folders in the /template
    folder. For novices it is best you work with an existing structure and once you are on your feet, then you can create
    your own sub-folders and files.

    Step 1 - Make a backup of the default template already in use and then using notepad++ wipe the contents of its
    index file (not the root index file, but the file in the template sub folder i.e. /template/name/) and template.css files.
    Why? For now just concentrate on creating the index.php and template.css files. Then if you are happy with the work,
    recreate the rest of the accompanying template files with its own unique template name and folder. Remember don’t
    bite off more than you can chew, just concentrate on the design.
    Step 2 – Using notepad++ you can copy the example index.php file below into your blank index.php file. It is only an
    example, but will give you much needed pointers to get going. Then create the css code as required.
    Each time you save your work it will be live on your localhost Joomla website and will only take a browser refresh to
    assess your latest work.

    The example below is a very basic template and literally only meant to help you get going. It addresses many
    questions novice template designers have such as:

    - How do I link to an image in my template folder using a relative path and not an absolute?

    - What are the exact jdoc details I require for main content?

    - Plus many more useful details are below.

    Basic index.php code:

    <?php

    defined( '_JEXEC' ) or die( 'Restricted access' );

    JPlugin::loadLanguage( 'tpl_SG1' );

    ?>

    <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this-


    >language; ?>" >
    <head>

    <jdoc:include type="head" />

    <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />

    <link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />

    <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

    </head>

    <body>

    <div id="wrapper">

    <div id="header">

    <img src="templates/<?php echo $this->template ?>/logo.png" alt="Logo">

    </div>

    <div id="topnav">

    <jdoc:include type="modules" name="user3"/>

    </div>

    <div id="main">

    <div id="right"></div>

    <div id="left">

    <jdoc:include type="module" name="breadcrumbs" />

    <jdoc:include type="component" />

    </div>

    </div>

    <div id="footer" align="left">© 2011 Your Details</div>

    </div>
    </body>

    </html>

    Hire Neogain!
    Remember Neogain are Joomla experts and we can be hired to help with administration, design, content creation and
    marketing. Just send us a message with what you require and we will respond quickly.

    You might also like