Joomla Template Documentation

This tutorial is dedicated to help users set-up our joomla templates, but in general will work with any other template as well. Screenshots are taken from Joomla 3.3 version, but the setup for 2.5 version is almost identical (only the design and few details may differ.)

Unfortunately we do not provide sample data, so we assume you already have the Joomla system installed to your server or localhost. If need help with joomla installation please check out our other tutorial.

How to install a Joomla Template?

Login to the administration control panel, navigate the menus and follow the steps bellow:

Extensions > Extension Manager > Browse > Upload & Install

joomla template installation

Browse the template file you downloaded and install it to the system. Successful installation will lead you to a success massage otherwise you will have to find the source of the error. Now enable the template by making it the default style for your whole website.

Extensions > Template Manager

activate joomla template after installation

Upload content to your Joomla system

Begin building your website with adding content. You can add articles at

Content > Article Manager

new article to joomla

Add custom titles, text, upload images, categorize your content and publish it. If you make an article featured, it will show up on your homepage if you choose to display only featured articles on the homepage of your site.

article setup with custom title

If you want to add clickable featured image to your article, go to the tab and upload the image.

Images and Links

featured image joomla

Add menus to your Joomla website

Create menus and sub-menus for your page. Firs you will have to create a menu category, let's call it Main Menu.

Menus > Menu Manager > Add New Menu

add new menu to joomla

After this you can set up the menu item, sub-menu items, and assign these to different layout types: blog, featured articles, single article, contact, etc...

sub menu items

Creating modules and custom classes in Joomla template

Now go to the module manager and create the modules you would like to use, and publish them to the appropriate module positions. All our templates comes with couple of module positions that are indicated on the download page.

Menus > Extensions > Module Manager

create module joomla

Here are few examples of modules we created on the template demo page.

custom modules and positions

My favorite core module in Joomla is definitely the custom html module. You can do so many things with this module, but it is mainly used to add custom text, images, maybe embade a video or you name it.

custom html module

Our templates include pre-designed custom module styles. You can activate the custom class for any module you want, by editing it from the module manager. Here is an example on how to add the class suffix to a custom html module:

Menus > Extensions > Module Manager > Your Module > Advanced tab > Module Class Suffix

custom class suffix

And these are the results you will get after adding one of the above classes. Each template has different designs, that fit to the color scheme of that particular template, but you can also add custom module styles by editing the css file that comes with the template.

custom style modules

 

How to upload custom logo image and setup social icons?

I assume, you followed the previous steps and made the template default. Now click on the  template style in the template manager (take as example our first template: BlueLotus).

Extensions > Template Manager > Blue-Lotus


joomla template editing

To set up the logo image or logo text and eventually add custom text under the logo, you will have to go to the advanced tab in the current template style editor.

YourTemplate > Advanced tab

Select a logo type (by default it is image logo) and upload your own logo image or add logo text if you wish so.

custom image and text logo

For the social icons, you will have to go to the social tabs and add the URLs to your social profiles, just copy and paste the links beside the icons and you are done!

YourTemplate > Social Icons tab

social icons joomla template

How to set up in-built slideshow for our joomla templates?

Continuing with the example from the logo and social icon setup, the activation of the slideshow is quite similar. The process begins in the template manager section:

Extensions > Template Manager > Blue-Lotus

joomla template editing

In the template style editor, find the tab that indicate the setup of the slideshow.

YourTemplate > Slideshow Setup tab

By holding down CTRL on your keyboard, you can select on which pages to enable the slideshow. You can choose as many pages you want, or you can select all of them. I prefer to show the slideshow only on homepage.

Here you can also choose the slideshow animation, this is up to your preference.

Now begin uploading the slideshow images, like in the image below, and add links to the particular images and add custom text. In the caption field you can use text only or html as well. Our templates support up to 20 slideshow images, that are more than in enough for more of the websites. If you would like to use more, I suggest using a slideshow module.

slideshow setup

If you still have questions, feel free to ask in the comment section below.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponShare on LinkedIn

This article has 36 comments

  1. eben Reply

    thanks so much… but my slideshow is not showing on the site.
    It came initially but after in used another template, the slideshow didnt show again as i returned to use the template again.
    hope u can help thanx.

    • the grue
      TheGrue Reply

      You also have to enable the template on certain pages. Choose the menus where you want to show the slideshow.

    • the grue
      TheGrue Reply

      Font colors can only be changed by editing the styles.css, if you could be more specific on the template you are using and what fonts you want to change (article heading, article text,etc) we could guide you where to make the changes.

      • jefri Reply

        CSS Folder

        bootstrap.min.css
        flexslider.css
        font-awesome-ie7.min.css
        font-awesome.min.css
        mod-style.css
        styles.css
        which files I edited???
        Thank’s 🙂

        • the grue
          TheGrue Reply

          As I told you before, the stlyes.css have to be edited to change font colors and all other styles.

  2. Enrique Reply

    Hi. I would like to have a two lines items in the horizontal menu in order to meke them narrower, i mean to have a line breaker within a menu item for example to change from:
    “Custom options”
    to:
    Custom
    Options
    The template I’m using is Blue Point.
    Thanks in advance for your help.

    • the grue
      TheGrue Reply

      The most simple way to do that, is to edit the styles.css file. At line 170, you will find the following id: #navigation .menu a {…}
      You will have to edit/add custom code:
      #navigation .menu a {… padding:10px 10px 0 10px; max-width:80px; height:20px; line-height:48px;}
      Probably numbers will differ in your case, so you will have to make some tweaks until it looks good.

      • Enrique Reply

        It didn’t worked out. I changed the style.css file and changed all parameters but none of them seems to have any impact on the main menu,I even changed font size, color, etc and nothing happened.
        Here is how i updated the line 170.
        #navigation .menu a { height: 580px;font-weight: bold; color:#9ed9f4; text-align: left; text-decoration: none; cursor: pointer; line-height: 58px; font-size:14px; text-transform:uppercase; padding:10px 10px 0 10px; max-width:30px; height:20px; line-height:48px;}

        Do you have any other solution? Thanks

        • the grue
          TheGrue Reply

          Unfortunetly this is all I can do on blind. You will have to show us a live site to be able to predict the correct code.
          By the way the code should avoid duplicate parameters and the code should look like this:
          #navigation .menu a {font-weight: bold; color:#9ed9f4; text-align: left; text-decoration: none; cursor: pointer; font-size:14px; text-transform:uppercase; padding:10px 10px 0 10px; max-width:30px; height:20px; line-height:48px;}
          Don’t know if that changes anything. Anyway, if you have the possibility, please show us the demo of your site.

  3. costas papoulidis Reply

    thanks so much…. beautiful tamplate…!!!! 🙂
    can i have 4 columns at position user2
    thanks….
    tamplate blue lotus

    • the grue
      TheGrue Reply

      Yes, you can have up to 4 columns in the user1 and user2 positions. Just create and publish the modules on user2 position and will automatically create four columns for you.

    • the grue
      TheGrue Reply

      You want to change the background for the template or you are referring to the colors of the custom modules?

  4. natesh Reply

    I tried add menu “Blue Point” This template but didn’t add there menu so please tell me how to add menu?

    • the grue
      TheGrue Reply

      After you added the menu items to the main menu, you will also have to create a menu module in Extensions > Module Manager and publish it to module position: “menu”. In this new menu module you will have to choose which menu category you want to display. Probably we will create a tutorial very soon that covers this part as well.

  5. A.I.M. Reply

    Hi there,
    thank you very very much for the “Modern Travel” template. So far, it’s been working out quite well.
    I fiddled around with it a lot, especially with CSS and it fits my needs 🙂

    I do have one question.
    The dropdown menu functionality doesn’t seem to work for me.
    I wanted to include several submenus in the top menu (standard position, standard template which is Modern Travel), the “arrow” is showing, but the submenu items don’t show at all.

    Do you have any hints to where the error might be?
    CSS? PHP? Localization ( 😀 )?

    • the grue
      TheGrue Reply

      Hi! If the sub-menus are not enabled, please enable them in the Extensions > Module Manager > Menu Module > Show Sub Menu Items – YES
      just like in the following image:
      enable sub menus in joomla
      If this does not fix the problem, probably some other extension you installed is in conflict with the menu’s javascript. Show us an online demo if possible.

  6. Koudehand Reply

    Hello TheGrue,
    First of all, all the best for 2015!
    Thanks for the template. I use Blue-Lotus. My website is not yet available at this moment.

    I’ve problems to change the menu. I see /* Navigation */ two times in the styles.css file. I was able to change the height of the bar and the background, but can’t find where to change font-size, line-height etc.
    Could you please give me a hand where to make the changes?

    Thanks in advance.

    • the grue
      TheGrue Reply

      Happy new year to you as well!
      The styling of the navigation menu starts at line 146 and at line 404 there is the styling for mobile devices. So if you want to change the style for desktop view, please edit the lines between 146 and 182.
      At line 166 you can change font size and line height of the menu:
      #navigation .menu a {…}

  7. Marcus Reply

    Hi,
    i like your template Blue Point, but I need more space on the website. How can I enlarge the width?
    Thanks in advance

  8. Sunny A. Ghodekar Reply

    Hi Team,

    The tutorials you have given in this site help me to learn joomla easily. As well as the templates are also nice. Thank you very much. I would like to ask you that how can I manage two websites at a time by using joomla. Is it possible?

    Thanks in advance

  9. Peter Reply

    Hi Team,

    your Template Blue-Point is wonderful. One question, please. Is it available to change the Headersize? I have a Logo with 800/200px. But i think i have to change div#header. size, which is 960×99 px at the moment. Can i change this attributes?
    Thank you for a short answer.

    Pete

  10. Koudehand Reply

    Hello,

    I am using Blue Point and the Modern Travel template. I use Modern Travel. I can not get the homepage in good shape for the iPhone 4 view. Where the modules on position ‘right’ are going to the bottom in Blue Point, the modules stay on the right position in Modern Travel.
    I looked at styles.css but I could not find the difference.
    Did I do something wrong? Or do I have something on in my special articles that is not compatible? I tried almost everything. Do you have a suggestion please? Thanks in advance!

  11. Götz Wulf Hagmann Reply

    Hallo TheGrue,

    thanks for the nice template “open mind solutions,” I only have two short questions in which file can I change the size of the template, and how I can change the character set.

    Thanks in advance

    Götz

  12. Trelyon Lim Reply

    Hi there, I really like your template very much. Can I ask how can I enable dropdown menu?

  13. Oliver Reply

    Hi TheCrue,
    i make sone trys with blue-lotus. Especialy with the view in mobile devices.
    If i view your demo page in a mobile, i see the “left” modules (Menu, light, Medium, etc) above the main content. Very nice.
    When i place a menu or any another module in position “left” then it is “left” of the main content – not above! Is there a special setting like bootstrap number

  14. Kubiat Reply

    Hello TheGrue,
    I like your Blue Lotus template; that’s what i’m using to build my site. I wish to change the colour of the background to white, please would you explain how that can be done? Thank you!

    • the grue
      TheGrue Reply

      Edit the styles.css file, at line 42:
      body { background: url(“../images/bg.jpg”) 0 0 repeat-x #000000; … }
      Change the above code to:
      background: #ffffff;
      This will make it white.

  15. Yolanda Reply

    Hi There,

    a question. I am using your blue point template. But i noticed that in landscape mode, on an ipad, the dropdown menu’s won’t work. Tried it in safari and chrome. Can you please help me?

    thanks,

    Yolanda

Leave a Comment

Your email address will not be published. Required fields are marked *