Blue Lotus – Professional Joomla Template for Free

We are happy to announce that our first free joomla template has arrived! BlueLotus is a professional joomla theme, created for business sites and has lots of great features and customization possibility that will definitely make your site stand out from others.

[alert-success]Compatible with Joomla: 2.5, 3.0, 3.3+[/alert-success]

Main features of BlueLotus template:

  • Fast loading, well coded and tested framework
  • SEO friendly layout to improve your website’s position in Google
  • Lots of available modules positions
  • Out of the box social icons and slideshow module
  • Responsive design, adapting to any screen resolution (excellent for mobile browsing)
  • Nice and slick drop-down menu with multiple levels
  • Custom pre-made module styles included for better customization

These are only a few things that this template can do. Check out the live demo or download and try it out yourself to see the real potential of this professional designed free template.

If you have any questions or you found a bug, please report it in the comment section bellow and help us improve this template.

Module positions of Blue Lotus:

blue lotus module positions

This article has 68 comments

  1. Demien Reply

    I just notice that you can add 4 modules in the the user1 positions, that is exactly that I wanted. Great template and thank you for sharing it for free!

    • the grue
      TheGrue Reply

      Yes, user1 and user2 positions can support up to 4 modules in a line. In the demo I used only 3 columns because in my opinion it looks better with 3. If you like our template, don’t forget to share it with your friends. Thank you!

    • the grue
      TheGrue Reply

      I used custom HTML modules for those positions. Added text and image in the text editor. It is part of Joomla core, don’t have to install anything.

    • pavan tiwari Reply

      i have made a new custom HTML module for banner at the top position. how can i make it in center at the top position.(in Blue-Lotus Template
      Please give me the right solution.

      • the grue
        TheGrue Reply

        I think you can align the banner as you would align text to center. Not sure if you want to center it in the header or just in the module area?

  2. Giampiero Gottardi Reply

    The template is very nice but i would like to enlarge the central part. Is it possible. I must change same script ? Also for mi is a great template and thank you for sharing it for free!

    • the grue
      TheGrue Reply

      Thanks for the feedback, glad you like our template.
      If you want to increase the width of the content part, you will have to edit the styles.css file. You will have to increase the width of the .span_6 { width: 49.0% } style.
      In the same time you will have to reduce the .span_3 { width: 23.5% } accordingly.

  3. Carl Makin Reply

    Can you add custom CSS that will survive a template upgrade? Does it automatically include a “custom.css” file or similar if it’s there?

    • the grue
      TheGrue Reply

      The template does not include a custom.css file automatically, so you can create one if you don’t want to loose your styles on a possible upgrade.

  4. Callum Reply

    Hi. Great template – thanks! Quick question though please?…

    There are four boxes on the demo labelled ‘light’,’medium’, ‘dark’ and ‘blank’ – how do I turn them on and edit them?

    thanks again~Callum



    please, how do i make my user1 to look like the template demo

    I already have the template installed on my site and it actually looks nice but not yet completed.
    i want to have my user1 position appear the same as the template demo.

  6. Jameel Reply

    I am implementing the template for 1 of my website but as per client requirement I want to modify slide show option of the template. How can I use other slide show option in the template?

    • the grue
      TheGrue Reply

      In the template folder you can find the file slideshow.php
      There is a javascript that contain the slideshow options like slideshow speed, animation speed, slide direction, etc…
      I did not implemented these directly in the template parameters because only very few users needs these special options.


    please how do i remove the joomla logo from my browser’s title bar.
    i have tried to remove it by renaming and deleting the favicon.ico file but to no avail, please help me some body.

    • the grue
      TheGrue Reply

      By deleting the favicon.ico should be removed from the browser tab as well. Clear browser cache and let me know if it is still showing.

  8. Mark Reply

    hi guys,
    first I want to say that I am relieved to have found your template blue lotus. I like it.
    But I have a question yet:
    I want to use a custom logo which is bigger than normal. Using firebug to explore I edited thy styles.css in line 128 but there is no effect.
    Can you give me a hint what I need to change to use a logo in about 200px x 950px ?

    • the grue
      TheGrue Reply

      Hey! I’m happy to hear you like our template!
      1. First you will have to edit the index.php file, at line 39 find this code:

      • Arnold Reply


        Thank you so much for your nice and amazing Blue Lotus Theme… I like it very much, so I have installed the theme, and I just try to to begin to edit/change the logo. About the custom logo, it has been asked by Mark and you have been answered as well. But I still cannot figure it out, as I’m bit newbie for Joomla!

        Well, I tried to use a log size with height = 145px and width = 400px to change the default logo size. Can you show me (if possible kindly in picture, please) where the lines I have to change to index.php file (at line 39 )AND styles.css (at line 126 to change the size)?

        Using Filezilla to explore the Blue Lotus Theme, and checked the index.php and style.css files, but I still cannot find the target lines to be changed.

        Can you give me a hint, like few previous lines on index.php (until I get the line 36) and previous lines on style.css (until I get the the line 126)? Pleaae help me to highlight the line that I have to change,and thank you in advance for your reply.

  9. mica Reply

    Thank you for your template, I like it much. I am newly creating my website but I just noticed that when I search for my pages most come out in google with “Blue Lotus” after the page name. I would prefer to have my website name after the page name, and tried to change the global settings hoping it would work, but I would like to know if there is a way to disable all the “Blue Lotus” thing from coming up in the google search. Thank you!

    • the grue
      TheGrue Reply

      Probably you don’t have enough content, that is why Google is indexing any text it finds on your website. Add content to your site and on the next crawling Google will show your website text. It is not possible to manipulate how google displays your website in search results, but having content will definitely help Google to display the proper text.

  10. Rana Reply

    Please see at your image on the top of this page. Where u define the positions. I can see “Content Here” text on the main page but I donot know how to edit that portion. I want to Edit the main content of home page please tell me how to add text there…….

    • the grue
      TheGrue Reply

      The “Content here” text in the module position image is actually the article title. You can change that in the Content > Article Manager by editing the article title.
      If you want to change the homepage title “Home” you should edit the default menu at Menus > Main Menu > edit Home menu and in the Page Display tab add the new title. You can also disable it if you want.
      disable home page title in joomla

  11. Mauricio Reply

    Hi all:
    Great job with this template, I have 3 questions:
    1. Can I change the main font, I need to use Columbia-medium font.
    2. I’m trying to put a new logo but the other icons like “socials” (Facebook and Twiter) and “Languaje Switch” are setting to the next row, can I get this into the same line
    3. I’m using native slideshow with a pictures with diferent size, can I set up an standard size to see my images one by one with a correct size, where?

    • the grue
      TheGrue Reply

      Hey Mauricio!
      1. You can change the font family in the styles.css file by adding a new line to body{… font-family: “Columbiana”,Arial,Helvetica,sans-serif; } If your font is not web font you should convert it to .woff extension and other required web font extension to work on all browsers. After your font is converted for web, upload it to the template folder /templates/blue-lotus/fonts/ and add the following lines to the top of styles.css file for each extension:
      @font-face {
      font-family: ‘Columbiana’;
      font-style: normal;
      font-weight: 400;
      src: local(‘Futuram’), local(‘Columbiana’), url(../fonts/columbiana.woff) format(‘woff’);
      2. I’m not really sure why your logo is pushing everything to the next row, maybe it is too big, or the language switcher module is causing this issue, I don’t know until I don’t see a demo of your site.
      3. For the slideshow you should always use same size images, otherwise the slideshow will resize them automatically. In the demo we used 1000px X 300px images.

      • Mauricio Reply

        Thanks for your help!!! In the form you can find the address of my test site,
        Thanks again.

        • the grue
          TheGrue Reply

          First, you should decrease the size of the logo, because it loads very slowly. You have removed the class=”col span_4″ from the logo so this is why is pushing the social icons and flags down.
          Put back the “col span_4” to the logo id and make the id=”top” class=”col span_6” (with this actually reduce the width of the module position where you have the language switcher).
          After this, add the following line to the styles.css file:
          div.mod-languages ul { text-align:right!important}
          This will change the alignment of the flags from left to right.

          • Mauricio

            Thanks so much, now everything is working fine!

  12. Giampiero Gottardi Reply

    Hi all,
    in the Apache server log i find several times the error:

    PHP Warning: Cannot modify header information – headers already sent by (output started at /web/htdocs/website/home/templates/blue-lotus/html/modules.php:21) in /web/htdocs/website/home/modules/mod_vvisit_counter/helper.php on line 1297

    Have you any suggestions?

    Thanks again.

    • the grue
      TheGrue Reply

      Hi! Are you getting this error only with the BlueLotus template? It looks that your have installed another module that is causing this error. Deactivate the vvisit counter module and let me know if still getting this error message.

      • Giampiero Gottardi Reply

        Without removing vvisit counter are several days that I don’t find any error.I think I accidentally deleted the problem…..

  13. Kingmig Reply

    The “drop-down” function does not work wirh virtuemart add-on or did i need an extension ?

    • the grue
      TheGrue Reply

      Unfortunately we did not tested our templates with all extensions. What is the problem that occurs with virtuemart? Have you activated the drop-down functionality in menu module?

    • the grue
      TheGrue Reply

      If you have a sub-menu item, the arrow should automatically appear. Don’t have to do anything special, just add sub menus.

  14. Kusuma Reply

    I want to know, how to change background colour with my preferred image?

    • the grue
      TheGrue Reply

      You will have to edit the styles.css file and change the following line:
      body { background: #000 url(“../images/bg.jpg”) 0 0 repeat-x; …}
      You will have to upload your own image to the server and give the right path in the css file.

  15. Max Reply


    I use this template for a german site and the umlauts don’t work.
    I insert “” in the index.php but it doesn’t work.

    Nice template.

    • Max Reply

      meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″

      • Martin Reply

        Did you manage to solve this Problem? I have the same problem, too …

        • Max Reply

          It works with this:

          header(‘Content-Type: text/html; charset=utf-8’);
          meta http-equiv=”content-type” content=”text/html; charset=utf-8″
          jdoc:include type=”head” /

  16. Oliver Reply

    Hi TheGrue,

    i have some problems with your templates by using a mobile phone. In The moment i test blue-lotus, but i have the same behavior with each other of your templates.
    I have modules in left, right and user2 positions. My website on pc looks similar like your demo page.
    But…all modules in position left and right of the main content are always left and right in mobile browsers. They dont float to other positions?
    The modules on your demo page are floating above or below the content.
    The same with three modules in position user2. On pc all three side by side – very nice but also with my mobile. Side by side. On your demopage the modules in position user2 floating one above the other.
    I can not find a setting to change this behavior. I use Android 4.4 with Chrome and build in Browsers.

  17. Phil Reply


    Love the template, but I want to add a Google Analytics code to the header and don’t seem to be able to do so. Any ideas?

    • the grue
      TheGrue Reply

      You will need to edit the index.php file and add the code in the header area manually, or you could use a Google Analytics plugin and add the code into that plugin. This is simpler if you don’t know how to edit a php file.

  18. samad Reply

    how to link the template to joomla database. Because i create an application form for my project assignment. But i dont know how to link mySQL to this template. can you help me.

    thank you.

    • the grue
      TheGrue Reply

      You have to install the template to your Joomla site and activate it in the Template Manager in the administrator panel. Is your project made with Joomla?

  19. solo Reply

    Hi! Thank you for this awesome template…
    On my site the template do not show subtitles until I click on them…

    • the grue
      TheGrue Reply

      Are you referring to the sub-menus or what the actual subtitles in the content?

  20. Max Reply

    I have problems with the menu on the left side of the mobile version.
    How can I fixe this?

      • Max Reply

        The left menu doesnt’t have a own container, because of that the menu items appear in the post.

        • the grue
          TheGrue Reply

          If I resize the browser on a PC, the website looks good, and the left menu is rendered as it should be, on my Iphone the menu looks just like in your image. Have you edited the index.php or any other file of the template? I think that there is an open css element somewhere in the code and the Firefox browser renders it well, but the smartphone can’t render it and breaks the the layout.

  21. wilma Reply

    I have install your template Blue Lotus but not get the responive menu. Can you help me?

    • the grue
      TheGrue Reply

      The menu is showing or it is not turning responsive when resize browser?

      • wilma671 Reply

        On the PC is doing well, but the menu on the tablet and mobile will not extend the menu

        • the grue
          TheGrue Reply

          This can be caused by Javascript conflict. If you have installed to your site modules or template that loads the jQuery library, please make sure that you are loading it only once. Loading multiple versions of jQuery on the same page will cause problems. Because the responsive menu is based on jQuery in this template, I assume this is the problem. If you have an online demo to your site, I can take a look and tell you exactly what the problem is.

          • wilma671

            Thank you for your answer. This was indeed the problem. I had a module call fancy zoom video wish use also jQuery. I have deactived this module and the menu is now showing.. Problem solved!!!

  22. JuniorA Reply

    hello,i’m very impressed about your template and want to used it to host a website but the problem is i want increase the padding of the template so that the website can at least look big on the on the internet.i hope you can help me out.

  23. wilma671 Reply

    I use your template but I get the template not responsive on the Iphone. The windowsphone shows perfect. But on the Iphone the text and pictures remain big. I have had a update from Joomla 3.4.4 maybe this cause this, but I dont now. Can you help me?

    • the grue
      TheGrue Reply

      I have tested the BlueLotus template on Joomla 3.4.4 and works perfectly on iPhone, iPad and other devices. Probably you have modified some files on your website that is causing the problem on iPhone.

  24. junior Reply

    hello, i’m impressed about your template but i want to ask only three questions.
    1. i want to use custom banner i.e “WELCOME TO WISE BUIDING” which will be at the center of the site but i can do it
    2.i want to use more than 3 pics in the slideshow,is there away that you can help me to do that
    3.finally, i want to increase the left and right padding of the site which will help my site to occupy the greater part of the webpage .how can i do that

    • the grue
      TheGrue Reply

      I’m sorry but your requirements is not subject of the template support. What you are asking is modification and design of your website, which is not what I’m doing here.

  25. Paul Robinson Reply

    I have just installed the blue lotus template on a site I am building and love it. However, when I try to edit my Main Menu module to show it in the position Menu I am unable to do so. As soon as I click on Main Menu the edit screen flashes, and the words Main Menu appear in small letters in the top left of the screen. When I return to the Modules screen I have to do a “Check-in” for the Main Menu module as it is locked. HELP!

Leave a Comment

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