Jump to content

Inverting Colors on ONE page on Avenue Template

Recommended Posts

Site URL: http://www.artbysambass.com/

Hello,

 

I'm trying to create a single page on my site that has a different colored background, text, and logo than the rest of my site. I tried putting some code into the advanced section of the site and was able to change the background color and one of the test lines but that's it. PAGE

Has anyone tried this or know how to do this? I'm using the Avenue template for my site and I'm in version 7 of the interface.

 

Thanks,

Sam

Edited by artbysambass
added more information for clarity
Link to comment
  • Replies 13
  • Views 881
  • Created
  • Last Reply

Top Posters In This Topic

On 8/20/2021 at 12:20 AM, artbysambass said:

Site URL: http://www.artbysambass.com/

Hello,

 

I'm trying to create a single page on my site that has a different colored background, text, and logo than the rest of my site. I tried putting some code into the advanced section of the site and was able to change the background color and one of the test lines but that's it. PAGE

Has anyone tried this or know how to do this? I'm using the Avenue template for my site and I'm in version 7 of the interface.

 

Thanks,

Sam

Hi. It looks like you solved this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, artbysambass said:

No this is as far as I got. I can't figure out how to make the logo a different image on just this page and all of the type white so that it shows up. I attached a screen shot of what I'm talking about.

ScreenShot.PNG

Add to Design  >Custom CSS

/* Coming soon page */
body#collection-611e8ee21c7c884383608ac6 .logo-image .logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Thanks for the suggestion @tuanphan but that didn't change anything on the page. What I'm looking for isn't a global change to all of the design, I need it to be changed on an individual page which is why I tried using code in the advanced section on that specific page. 

Edited by artbysambass
spelling
Link to comment
2 hours ago, artbysambass said:

Thanks for the suggestion @tuanphan but that didn't change anything on the page. What I'm looking for isn't a global change to all of the design, I need it to be changed on an individual page which is why I tried using code in the advanced section on that specific page. 

That code targets coming soon only & work on custom CSS only. If you add to Advanced Section, it won't work

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, artbysambass said:

I added it to the Custom CSS in the Design tab. There it didn't have any effect.

CustomCSS.PNG

Try adding a Code Block under Gallery Block >> Then add this code > Then save & reload your site

<style>
  .logo-image .logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 minutes ago, hilaryb said:

I have a similar question - how to use a different logo image for one page only.  When I use different color themes on other pages, it effects the visibility of my main logo (see attached screenshots).

Is there a way to change the logo on one page to an image I have uploaded to my custom files?

http://hilarybeckwith.com/services

 

Screen Shot 2021-09-01 at 3.16.43 PM.png

Screen Shot 2021-09-01 at 3.16.25 PM.png

Change image to black, or different image?

If black, add this to Design > Custom CSS

/*
- Change Services Page Logo Color to black 
*/
body#collection-60f8600ef406692e8c57e335 .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

image.thumb.png.3cdb2c7e74dfee65dfc5d52af60465d6.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 minutes ago, tuanphan said:

Change image to black, or different image?

If black, add this to Design > Custom CSS

/*
- Change Services Page Logo Color to black 
*/
body#collection-60f8600ef406692e8c57e335 .header-title-logo img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

image.thumb.png.3cdb2c7e74dfee65dfc5d52af60465d6.png

Different image. Black does not coincide with my branding colors

 

Link to comment
On 9/2/2021 at 5:30 AM, hilaryb said:

Different image. Black does not coincide with my branding colors

 

Add to Design > Custom CSS

/* Change logo on services page */
body#collection-60f8600ef406692e8c57e335 {
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
    background-position: center center;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/4/2021 at 12:17 AM, tuanphan said:

Add to Design > Custom CSS

/* Change logo on services page */
body#collection-60f8600ef406692e8c57e335 {
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
    background-position: center center;
}}

 

Thank you - how do I now resize it?

Link to comment
On 9/7/2021 at 1:12 AM, hilaryb said:

Thank you - how do I now resize it?

Use background-size

/* Change logo on services page */
body#collection-60f8600ef406692e8c57e335 {
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg);
    background-position: center center;
	background-size: 100px;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.