Why do I need a png and a svg file for the logo?

Please elaborate why a PNG and an SVG file is needed for the logotype.

What if I do not have/use SVG file?

Hi, you don't have to.. just use Image feature and upload your own logo image.
That's all.

General Guide: http://www.gavick.com/documentation/joo ... -add-logo/

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.

I have some problem with the logotype.

I am using the CSS function to get the logo, but have not managed to get it working and I discovered that it only works with SVG files (?)

Please note that I am using the following addition to the CSS file:

Code: Select all

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

Could the code above have something to do with it?

Yes, this code is responsible for the logo image display - you are using most probably the browser with SVG support so the second rule is executed on your page.

I am not sure how to interpret this
Please elaborate so that I can test alternative ways.

Yes, this code is responsible for the logo image display - you are using most probably the browser with SVG support so the second rule is executed on your page.

I mean that the CSS selectors prefixed with fragment:

Code: Select all

.svg

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

So in this case below code:

Code: Select all

#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:

Code: Select all

.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).

OK. Can I in some way control to say that I want only to use the PNG file ?

Yes, you can - you should remove all CSS rules prefixed with:

Code: Select all

.svg

From styleX.css and template.css files.

I must say that it is a bit tricky to understand all this for me. I have now created a SVG file and edit the correct CSS files and ... still I can not get the logotype appearing.

Please provide us your website URL - without it I'll unable to help you.

I will send you a PM as my site is not live yet.

Please provide us your website URL - without it I'll unable to help you.

Your problem is caused by fact that image templates/gk_news2/images/style6/8.svg is not existing on your server.

Sorry about that
I change it just before I sent the PM to you and forgot to alter it. Anyhow, the problem still exist. I have now changed it back to the correct image files which exist on the server. Still no logo appears.

Your problem is caused by fact that image templates/gk_news2/images/style6/8.svg is not existing on your server.

Your image displays correctly but it is too big - it should be 124 x 40px your is over 300 x 100px - so it displays only the blank space.

The solution can be adding the following code at the end of any CSS file:

Code: Select all

.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
background-size: cover!important;
}

Please remember to refresh your browser cache after this operation