Center Logo

http://216.70.110.123/ How do I add a logo like link (left) but have it in the center

My Site - http://ringnews24.com/joomlatest2/
My logo - http://ringnews24.com/boxingforum/image ... 4_logo.png

You can add following css code in to override.css and enable css override option in template settings > advanced settings > css override "on".

Code: Select all

#gkLogo.cssLogo {
    background: url("http://ringnews24.com/boxingforum/images/misc/vbulletin4_logo.png") no-repeat scroll 0 0 transparent!important;
    width: 700px;
    height: 188px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none!important;
}


See you around...

Hi, Thanks m8.

I managed to do what you said but i need the back ground to be white like http://216.70.110.123/ as my transparent logo blends in and you cant see some of the image http://ringnews24.com/joomlatest2/

If you want top section to be white.

Code: Select all

#gkPageTop { background: #fff;}


If you want only page width + top section.

Code: Select all

#gkPageTop .gkPage {background: #fff;}


See you around...

I want the menu to stay black (home-template-typograhy etc...)

I want the background behind the image to be white.

Can you post the whole code like you did with your first post as im lost, thanks.

Following is complete code. Choose either 1st version or 2nd version.

1st Version.

Code: Select all

#gkPageTop { background: #fff;}
#gkLogo.cssLogo {
    background: url("http://ringnews24.com/boxingforum/images/misc/vbulletin4_logo.png") no-repeat scroll 0 0 transparent!important;
    width: 700px;
    height: 188px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none!important;
}
#gkMainMenu { background: #000;}


2nd Version.

Code: Select all

#gkPageTop .gkPage {background: #fff;}
#gkLogo.cssLogo {
    background: url("http://ringnews24.com/boxingforum/images/misc/vbulletin4_logo.png") no-repeat scroll 0 0 transparent!important;
    width: 700px;
    height: 188px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    float: none!important;
}
#gkMainMenu { background: #000;}


See you around...

Thanks norman

I changed it with the first code.

http://ringnews24.com/joomlatest2/ In the menu bar theres a white space, after adding the code.

Inbetween TESTINGGGGG and LOG IN-RSS

White space is coming from logo background and menu + user area makes up the second part which in this case menu background width is not enough to cover the empty area.

You can edit php files and add an extra div container to cover menu + user area which then you can give this div element black color to cover the empty white space in between.

You will have to edit template file every time you update. Let me know if you want to do this and I ll post the solution.

See you around...

White space is coming from logo background and menu + user area makes up the second part which in this case menu background width is not enough to cover the empty area.

You can edit php files and add an extra div container to cover menu + user area which then you can give this div element black color to cover the empty white space in between.

You will have to edit template file every time you update. Let me know if you want to do this and I ll post the solution.

See you around...

Yeah I would like to do this and cover the white space, look forward to hearing from you.

Thanks.

Please do following.

1. Edit php file to add wrapper around menu and user section.
Find File: /templates/gk_news/layouts/default.php
Find Line: 72 which is below

Code: Select all

          <?php if($this->API->get('show_menu', 1)) : ?>


Replace the line with below, notice we have added new div wrapper before it.

Code: Select all

          <div class="gkMenuBar">
          <?php if($this->API->get('show_menu', 1)) : ?>


Find line: 102 and 103 which is below

Code: Select all

          </div>
          <?php endif; ?>


Replace with below, notice we now closed our div wrapper.

Code: Select all

          </div>
          <?php endif; ?>
          </div>


Now add following css code to end of previous css code you have added in this topic.

Code: Select all

.gkMenuBar{ background: #000!important;overflow:hidden;}


That should work now.

See you around...

That worked perfect and the guide you typed out was really easy to follow.

Thanks normanUK

No problem at all, see you around...