How to change the Logo Size of the logo position in Gavick Pro template.

logo css in gavick template

Let me guess, you've got a Gavick Template and a logo file that is bigger than the space available in the logo position. I hear ya. It's easy to change the size available so your logo file will fit.

i'm about to show you how to edit the CSS to make the available space for the logo position of a gavick pro template match the size (in pixels) of the file which has the logo, so you will need to know how wide and how tall you file is in pixels (I assume you know this).

Also. I am going to show you only what you need to know. If you don't have any knowledge of CSS, don't worry I will help you make the changes and you won't need to worry about anything else.

How to change the logo size on a Gacick pro template easy as 1 2 3.

Start by logging in to the Joomla back end.
Once there, click Extensions>Template manager, but DONT rush ahead and click the template name in the list:

Templates manager link in Joomla backend

To open the options screen of that template, you need to click on the word "Templates" which appears next to "styles" (as shown in the screenshot) this will take you to another tab:

Templates tab joomla

Now you can click the name of your Gavick pro template in the list:

Gavick sport template details

To change the logo size you will need to change the space available in the template.css file, so simply click "Edit css/template.css" in the list:

edit template css

Now look for the code:

/* Logo  */
h1#gkLogo {
  float: left;
  margin: -1px 0 -1px -1px;
  position: relative;
  height: 92px;
  width: 220px;
  background: transparent url('../images/style1/bg_logo.png') no-repeat 0 0;
h1#gkLogo a img {
  display: block;
  height: 92;
  margin: 0;
  width: 220;

As you can plainly see the width and height are clearly marked (they may be different on you installation) and you can simply change those number to match your logo file and click save.

Now when you return to the fronted and refresh your page, you should see the Gavick template now reflects the change in logo size.

NOTE: you are changing the template's CSS files. If you later update to a newer version of the same template, you will need to make the change again.

Posted in Joomla