How use text in combination with an image for the logo

Hi.
I would like to know if I could use text in combination with an image for the logo from the template using override.
Basically I have a logo that I would like to use and put the text next to it using (text in template). But at the moment you cannot have both.
So, Logo image and text to the right.

Thank you.

Hello,

The only solution is enabling the text logo type and specify for this logo (#gkLogo.text selector) left padding and place inside the logo container image as a background-image on the left. Alternatively you can use the :before pseudoelements to place image before the text logo.

Hi.

Thanks for you reply, but could you guide me more precisely please.

Can you be a bit more specific in the CSS code.
i was planning to keep default logo.png locations in foders style1 style2 style3
logo.png images are my customized logo in different tones to match template's color switching function.
I am confused what to write in the CSS code for it to work properly and switch colors.

Thanks..

Please provide me an URL to your website with text logo enabled - then I'll be able to prepare you a CSS code with proper dimensions etc.

Hi. Sent you the details through pm .

Thanks.

Please change in the css/template.css file fragment:

Code: Select all

#gkLogo.text {
color: #333;
min-height: 48px;
padding-top: 14px;
text-indent: 0;
}

to:

Code: Select all

#gkLogo.text {
   background: url('../images/style1/logo.png') no-repeat;
   color: #333;
   min-height: 48px;
   padding-left: 200px;
   padding-top: 14px;
   text-indent: 0;
}

but in my opinion it is sensless, because the logo is very big in this case.

Thanks a lot for your help.

Great to know the possibilities this trick offers.