Customizing your Joomla template logo

The Company logo is the most visible and recognizable symbol of brand. It should appear on every piece of communication — from the basic internal memo through to the website and everything in between. The corporate logo should always be placed in an unobstructed area on a clean, clear, solid background that provides maximum clarity and visibility. In most of cases on a Joomla! website the top-left or center position is reserved for this kind of object (graphic/text logo).

Note: Depending of Corporate Standards there are two acceptable formats for the logo: the horizontal format and the vertical format. Choose the format that best suits the web page layout and form of communication being used. The logo should always include all elements like the name and graphic sign.

Gavick Template Logo Customization Tips

First, all Gavick Templates for Joomla, and their respective WordPress themes also – allow you to customize the logo used on them (on the front-end). There 3 different types and methods for using your own logo; we will describe them all with some useful tips. If you want to change the logo go to Template Manager –> choose Gavick Template –> select Features tab. There you will see a “Logotypes” section from where you can start your changes.

Note: Before you will start to edit any template php or css files please read this manual about How to use custom CSS in GK templates.

Text Logo

If you do not have graphics capabilities, or the time to create a graphic logo, you can use this option. It allows you to use the logo text whose appearance is based on the deployed font. The advantage of this solution is that it limits the number of graphical elements to be loaded during the initial site load, and secondly, you can easily change the logo or slogan under it if necessary.

If you want to override the Text Logo appearance please use this class to change your selected elements from their default values:

 #gkLogo.text > span, #gkLogoSmall.text > span {
    display: block;
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
    padding: 0;
    text-transform: uppercase;
    color: red; 
}

If you want to override the Slogan appearance please use this class and change your selected elements:

#gkLogo.text .gkLogoSlogan, #gkLogoSmall.text .gkLogoSlogan {
    color: #444444;
    font-size: 12px;
}

Remember each template is different so please check which styles for these classes had been used.

CSS Logo

In our modern templates (from year 2014), starting from MO and NEWS(2), we give you the option of using the svg format for logo images, so if you have a logo in this format you can use this feature. Or course don’t forget about a PNG logo, because not all browsers can open svg files. We are using SVG images for log, because it looks much better on retina displays. The PNG image is for the fallback purpose on the older browsers.

To override those logo images use these classes:

.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
    background-image: url("../images/style1/logo.svg");
}

#gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    background-image: url("../images/style1/logo.png");
}

In this example I used style1 – so if you are using style2 or style3 – modify the name of the folder. Of course you can also use your own location URL for new images, or if you really only want to replace the image files.

The CSS selectors prefixed with fragment:

    .svg

– will work only in the browser which have support for the SVG graphics display.

So in this case below code:

    #gkLogoSmall.cssLogo {
    background-image: url('../images/style6/logo.png')!important;
    }

Will be used only on the old browsers without SVG support, and the following code:

    .svg #gkLogoSmall.cssLogo {
    background-image: url('../images/style6/logo.svg')!important;
    }

Will work on modern browsers and will guarantee that the displayed image will be sharp on the screens with high resolution (retina displays).

Image Logo

If someone created a logo for you, or you created one yourself you can upload it by using Image Logo format. Upload your logo file into the /image folder then use “Select” to browse and choose one from the available list of images.

Sometimes even when you upload a bigger logo image your logo on template is still small you have to use additional code to change width of image. For example:

#gkLogo { width: 230px; }

Of course this value can be changed to fit your needs.

Size of Logo

Make sure that the logo is never smaller than what can be executed. We suggest that you use a graphic tool to check which size would be optimal for your website’s purpose and reduce the size using this tool; not with css styles. We all know that logo is important part of any website but content is more important – so please do not use huge logo images. People are not blind. Please check width of logos on popular News/TV Websites:

• BBS UK – 84px
• Discovery – 96px
• Wikipedia – 135px
• CNN – 190px
• REUTERS – 221px
• NBC News – 272px
• The New York Times – 370px

Note: please reduce size and choose, for example, the PNG format with transparency which is the best option in most cases.

In most cases if you want to use a differently-sized logo than we used in our demo/quickstart – you would additionally have to override the defined size. For example for CSS logo style:

#gkLogo.cssLogo, #gkLogoSmall.cssLogo { height: __px; width: __px; }

In the fields marked as “__” please insert the size of the new logo.

Clear space around the Logo

A very important part of the corporate identity is the space around the logo. Clear space is the area surrounding the logo that must be kept free of other graphic elements, social icons or menu items etc. The minimum required clear space should be about 5-10px in height and at least 30px in the right margin.

p.s.

Remember to also replace the default Joomla favicon with your brand icon; this option may also be found in the Features tab.

We are using SVG images for log, because it looks much better on retina displays. The PNG image is for the fallback purpose on the older browsers.