LOGO

My problem is to replace the logo with custom logo news again. I tried to replace just the folders in the template file.png but nothing happens. And when the control panel instead sostiuisco logo image with css, the new logo appears to me to double.

Thanks

Could You please post an url to your site?

I had the same problem

I have replace in my css style

Code: Select all

 ('../images/style1/logo.svg');

by

Code: Select all

('../images/style1/logo.png');

I had the same problem

I have replace in my css style

Code: Select all

 ('../images/style1/logo.svg');

by

Code: Select all

('../images/style1/logo.png');

Or better you can create a svg file with adobe IllustratorCC

Now it's okay

Editing template core css files is not the best solution. Instead I would suggest to use override.css:
Please edit: /templates/gk_news2/css/override.css and add at its end:

Code: Select all

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


Now place you logo.svg inside:
/templates/gk_news2/images.

If you would like to use png file instead - just change the file extension in css override.

This way if you will update the template in the future - you will only need to backup 2 files and restore them after the update.

Remember to enable "CSS override" in template settings - advanced section.

Hello,

Is it possible to have a large logo on regular view AND a small logo when you scroll down. URL: http://fondabec.jmlt.ca

logo_large.png

logo_small.jpg

Yes. You can use technique called media query:

Code: Select all

.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
background-image: url('../images/logo.svg');
}
@media (max-width: 800px) {
.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
background-image: url('../images/logo_medium.svg');
}
}
@media (max-width: 640px) {
.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
background-image: url('../images/logo_small.svg');
}


This is just a sample showing how to use different files for different resolutions.

well, i need help with this...

I´ve paste the code just as you show it, then upload the new logo files in te respective folders (logo medium, small etc) and... my logo change indeed, but another logo (well, the bottom of) appears obove my logo. Can you help me?

here's my web: [url]katolikos.com.mx[/url]

This is the logo that is shown on "fixed" menu when you scroll the page down. Please decrease i's size:

Code: Select all

#gkLogoSmall.cssLogo {
height: 70px;
background-size: contain;
}


thanks but...where can I find that? which one I must modify? Thanks in advice

Its the code you should add to override.css

Well, i´m sorry to tsay this but doesnt work for me. I´ve put the code in te Override Css but there´s any change. Can you help me? if you want I can make an a super admin account for you to see if I mess something. Thanks in advance

Could you please post an url to your site?

Could you please post an url to your site?

http://www.katolikos.com.mx

Thanks in advance

Your override.css is buggy.
Replace it with this content:

Code: Select all

.svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
   background-image: url('../images/logo.svg');
}
@media (max-width: 800px) {
   .svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
      background-image: url('../images/logo_medium.svg');
   }
}
@media (max-width: 640px) {
   .svg #gkLogo.cssLogo, .svg #gkLogoSmall.cssLogo {
      background-image: url('../images/logo_small.svg');
   }
}

#gkLogoSmall.cssLogo {
   height: 30px;
   background-size: contain;
}


thanks so much, you resolve it! how do you do it? I´m glad to learn

First of all I'm frontend developer for more than 10 years. It was obvious that something was wrong in override.css - you knew it too . The only thing was to check line by line if there was an error - and one closing "}" was missing.

that's right! I´ve didnt notice...

Good practice is, if you are not using any kind of ide to edit css/js/html files - is to use online validator - it will tell you exactly where problem lies if it is code error.