Jump to content

Portfolio page logo customization without affecting subpages possible?

Go to solution Solved by Web_Solutions,

Recommended Posts

Hello there,
by any chance there is a similar solution but for the following,
I have created a Home page based on a Portfolio page where there is a slideshow full bleed,
There it makes sense to have the logo in White, 

but the subpages have a white background, therefore a black logo is necessary there.

I have injected the code above, but it not only affects the Main portfolio page but also the subpages. Anyway to go around this? 
Appreciate the help!

Home with a portfolio page + full bleed slideshow:
https://www.studiohelenaholz.com/home-3
Logo in black disappears.

Screenshot 2023-12-20 at 11.24.13 (3).png

 

Porfolio Subpage 

Screenshot 2023-12-20 at 11.17.26 (3).png

Link to comment
7 minutes ago, NitramHolz said:

Hello there,
by any chance there is a similar solution but for the following,
I have created a Home page based on a Portfolio page where there is a slideshow full bleed,
There it makes sense to have the logo in White, 

but the subpages have a white background, therefore a black logo is necessary there.

I have injected the code above, but it not only affects the Main portfolio page but also the subpages. Anyway to go around this? 
Appreciate the help!

Home with a portfolio page + full bleed slideshow:
https://www.studiohelenaholz.com/home-3
Logo in black disappears.

Screenshot 2023-12-20 at 11.24.13 (3).png

 

Porfolio Subpage 

Screenshot 2023-12-20 at 11.17.26 (3).png

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

#collection-6581c20b2e16065e824a63c5 .header-title-logo img{
    filter: grayscale(1) !important;
}

 

Screenshot_536.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
4 minutes ago, NitramHolz said:

image.thumb.png.0f7bf0937c69e924acd35df84abbe0d4.png

image.thumb.png.3678c4103dac9d4c720286a2daa7af62.png

I thought you have used black logo. Please replace the previous code with the code below.

.header-title-logo img{
    filter: invert(1)  !important;
}

#collection-6581c20b2e16065e824a63c5 .header-title-logo img {
    filter: grayscale(1) !important;
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
1 minute ago, NitramHolz said:

@Web_Solutions I Just noticed that on the mobile pages the logo is still white.
Can I do any thing about it?

Yes, Replace the previous code with the code below.

.header-title-logo img, .header-mobile-logo img {
    filter: invert(1) !important
}

#collection-6581c20b2e16065e824a63c5 .header-title-logo img {
    filter: grayscale(1) !important
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.