Hello I'd need some help sorting out this.
My gallery is here and the top logo is white
https://gallery.kog.it/
but if you go on a subpage like this
https://gallery.kog.it/20212024/2021/
the logo is white on a gray background and I'd like it to be black. I know that I can change the BG color but is there any way to have it black only in the subpages?
X3Photo Gallery Forums
X3 Photo Gallery Support Forums
Change logo based on pages4 posts
Re: Change logo based on pages
This is a bit clumsy. First of all, you should be selecting your logo on how it should suit most/all pages, which in your case should be all subpages. For the home page, you are using "intro" plugin, which includes settings to have a semi-transparent background behind the logo so that it stands out better when placed on top of an image. This should be the logical approach.
You can't just "change" the logo <img> automatically when navigating pages, as it's a fixed element. The only way, would be to assign the logo as a background image in CSS, and then adjust the background-image source depending on what page you are on. Something like this:
This should work, although it's not tried and tested for all possible scenarios.
You can't just "change" the logo <img> automatically when navigating pages, as it's a fixed element. The only way, would be to assign the logo as a background image in CSS, and then adjust the background-image source depending on what page you are on. Something like this:
Code
.logo img {
visibility: hidden; /* must hide the original <img> logo but keep its size */
}
/* add the logo as a background image */
/* use the one that should go for all subpages */
.logo {
background-image: url(https://kgallery.b-cdn.net/content/custom/logo/kog-photogallery25a.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50%;
}
/* change the source for the index home page */
.page-index .logo {
background-image: url(https://kgallery.b-cdn.net/content/custom/logo/HOMEPAGE.png);
}-
-
andreamarucci
Experienced
- Posts: 312
- Joined:
Re: Change logo based on pages
Thanks Karl for the support. Maybe if I can change the color of the "filled" background section under the logo, I can use the same logo without changing it, what do you think?
Re: Change logo based on pages
Yes it's possible, but then you need to override that color in custom CSS. Why not then instead just make the logo with colors so that it works nicely on top of the default page background without using the "filled" background color at all? Surely that looks more elegant. Basically you should design your logo (colors) to make it best match your website. For example use a light grey or light blue text color?andreamarucci wrote: Thanks Karl for the support. Maybe if I can change the color of the "filled" background section under the logo, I can use the same logo without changing it, what do you think?
Then instead, you would only need worry about how the logo appears on your home page. Either choose a different intro menu background (already an option), or design a separate logo only for the home page.