BIkeStore logo issues

Hi,

I need some help with changing the logo. I changed the existing bikestore logo with my own by just replacing the logo.png in the Style1 folder. Then I adjusted the style1.css so that the logo is displayed without background color:

#gkLogo {
background-color: transparent!important;
/* background: #fb5a29;*/

This all seem to work fine... So I did the same for gklogo.csslogo block, as this seems to have an impact on mobile layout:

#gkLogo.cssLogo {
background-color: #fb5a29;
background-image: url('../images/style1/logo.png');
}

Indeed the background color of the logo is removed when using a mobile device however the background is also removed from the 3 small icons (user, mycart, ...). Which obviously I don't want as they have a white foreground color...

So i have two questions:
1. how do i only remove the background for the logo and not for the 3 small icons when running in mobile mode?
2. Is above approach correct? Or should i add my logo in a different way? Should i perhaps add my logo via the template menu (logo image field)..?

Thanks a lot.

Could You post an url to your site?

Could You post an url to your site?

Hi,

I've send you an private message...

Thanks..

Do I need to be logged in somehow If I would like to see this "3 small icons"?
I cant see them on your site :/

Well that's the problem They are there.. but because of the white background and the transparancy/white color of the icons you can't see them (see sample.jpg)... The small icons are only showing when using a mobile device.

As explained in my initial post... I wanted to add my own logo. I just replaced the existing logo.png file in the Style1 folder... Since I didn't want the orange background I've also changed following in the style1.css:

#gkLogo {
background-color: transparent!important;
/* background: #fb5a29;*/

This seemed to work fine... So I did the same for gklogo.csslogo block, as this seemed to have an impact on the mobile mode:

#gkLogo.cssLogo {
background-color: #fb5a29;
background-image: url('../images/style1/logo.png');
}

Indeed the background color of the logo is now removed when using a mobile device... however the background from the 3 small icons (user, mycart, ...) is also removed (see sample.jpg). Which obviously I don't want as they have a white foreground color...

So i have two questions:
1. how do i only remove the background for the logo and not for the 3 small icons when running in mobile mode?
2. Is above approach correct? Or should i add my logo in a different way? Should i perhaps add my logo via the template menu (logo image field)..?

Last thing - they are there both in mobile and desktop sizes or just in mobile?

Please check it by disabling your override class - because im 80% sure they are not there right now

Hi,

Yes they are there.. I'm 100% sure.. at least on my phone. If I press the area the button works.
My problem is really not so complex. Maybe you misunderstood me.

By default the bikestore logo has a css background (style1=orange) which is used for normal mode and mobile mode. It's nice... However my logo doesn't match with a background color, so i want to remove (set transparant) the background color for my logo and this is mobile and normal mode.

So I made some changes that i listed up in my previous posts and it works.... except that in mobile mode there are 3 small icons, being login, register and mycart (these icons are not shown in normal mode -> then they are presented as text) that normally also have this orange background... but by removing the background from the logo I also removed the background from these 3 little icons. Resulting in the face that the white icons are shown on a white canvas = seem invisible.

I'm really a beginner when it comes to CSS stuff...

You could try this css:

Code: Select all

#gkTopLinks {background: #fb5a29;}