Tip tags

Joomla! Tips

Joomla! Tips

Daily Joomla! tips that make your life easier
Tags >> templates

The background color for the Joomla! beez template can be changed by editing the position.css file (the purple color)

To find this file, in the backend administrator panel head to:

  1. Extensions -> Template Manager
  2. In the Template Manager, select from the list the "beez" template and click to edit.
  3. Now, click on the "Edit CSS" icon from the right panel.
  4. From the list with css files select the position.css and edit it.
  5. At the beginning of the css file you will find the css property that needs to be modified:
     body
    { background: #F2E3ED;
    color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px;
    text-align: center;
    }
  6. Just replace the background property: background: #F2E3ED with other color.
    For example, if you want a white background for the beez template use:  
    background: #FFFFFF;

There are 2 easy methods used to hide/remove  the menu bullets in the Joomla! Milkyway template: 

  1. Using the Module Manager:
    • in the backend Joomla! panel  head to Extensions -> Module Manager
    • select from the list the menu that you want to edit
    • from the Module Parameters (right panel) change the Menu Style from "List" to "Legacy Vertical"
  2. Edit the template.css file:
    • to edit the template.css file, in the Joomla! backend click on Extensions -> Template Manager 
    • edit the rhuk_milkyway template .
    • click on the "Edit CSS" icon and choose from the list the template.css file.
    • edit the file and put the following code at the end of the document:
    #leftcolumn li {
    list-style-type: none;
    }

    #leftcolumn ul {
    margin: 0px;
    padding: 0px;
    }

The advantage of the second method is that it will hide the bullets for all the Joomla! menus with bullets. When using the first method, you will have to repeat the process for every menu with bullets.


If you are using one of the default templates in Joomla! : beez, JA_Purity or rhuk_milkyway you might want to change the logo.

Change the Joomla! logo for the rhuk_milkyway template:

  1. Head to "Extensions" -> "Template Manager".
    • Click on rhuk_milkyway template ;
    •  Edit CSS;
    • You will see several css files.
    • Edit the template.css file and look for the following style:
    div#logo {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 298px;
    height: 75px;
    background: url(../images/mv_joomla_logo.png) 0 0 no-repeat;
    margin-left: 30px;
    margin-top: 25px;
    }
    •   change the image path from
     url(../images/mw_joomla_logo.png)

    with the location of the new uploaded logo.

Change the Joomla! logo for the JA_Purity template:

  1. Head to "Extensions" -> "Template Manager".
    • Click on JA_Purity template ;
    • Edit CSS;
    • You will see several css files.
    • Edit the template.css file and look for the following style:
    • h1.logo a {
      width: 208px;
      display: block;
      background: url(../images/logo.png) no-repeat;
      height: 80px;
      position: relative;
      z-index: 100;
      }
    • change the image path from
      url(../images/logo.png) 
    with the location of the new uploaded logo.

 

Change the Joomla! logo for the beez template:

  1. Rename the new logo as logo.gif
  2. Go to  /joomla/templates/beez/images and replace the logo.gif with the new logo.

Extra tip: if you would like to delete or replace the "Joomla! accessible Template", below the logo go to
/joomla/language/en-GB/ ,  edit the en-GB.tpl_beez.ini and delete/replace the words after "=":

JOOMLA ACCESSIBLE TEMPLATE=Joomla! accessible Template

with
        JOOMLA ACCESSIBLE TEMPLATE=

or        
























The favicon is a small 16x16 image that is displayed in browser before the page URL or in the browser tab before page title.

Create the favicon (there are many free tools to design ), save it in jpg, .gif or .bmp format then convert the image  to an favicon.ico file using a generator.

Where is Joomla! favicon localized?

In Joomla! 1.5 the favicon is localized in the same folder where the template is. For example,  for the domain http://www.red-shoes.com, the favicon file is in http://www.red-shoes.com/templates/theme215/favicon.ico.

How to change the Joomla! favicon?

To change the favicon just replace the Joomla! favicon file with the new one using a FTP program.

 


Suppose  you won't keep for your website the default Joomla! template, you will have to find and install another template (there are plenty free or commercial templates ).

Installing steps...

Installing a Joomla! template is the same as installing an extension:

  1. After downloading the template, in  the backend Joomla! administrator panel head to "Extensions" -> "Install/Uninstall"
  2. In "Upload package file" section, browse the template file from your computer and click "Upload File & Install"
  3. Head to "Extensions" -> "Template Manager" and you find the list of all available templates, including the default Joomla! templates.
    Check the new template and mark it as default.