Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
wlinard

Changing logo colour on homepage vs other pages - Marta theme

Question

5 answers to this question

Recommended Posts

  • 1

Hello @wlinard:

You can use this CSS, inserted via the CSS Editor to invert the color of the image on the home page only. Do keep in mind that this only works on the latest browsers. Older browsers don't support it.


.homepage .Header-branding-logo {
 -webkit-filter: invert(100%);
 filter: invert(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

If you need to support older browsers, you're going to need a combination of solutions (see comments at bottom).

Also, keep in mind that if Squarespace ever changes the code on your template, this code that I've provided may break and need to be updated.

If this answers it for you, consider marking this answer accepted. Or wait and see what others offer up. You can inquire further as well!

-Brandon

PS: Code is provided without any warranty, expressed or implied. Use at your own risk.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

Hi @BrandonW

Thanks for the code you've provided. It works for my site (inverting a black logo to white on the homepage) on web browser on a laptop but when it comes to using the website on a mobile device, (iPhone or iPad) it resorts back to the black version instead of inversing it to white.

Do you have any ideas of why it might do that or how to fix it?

Many thanks,

Max

screen-shot-2017-09-13-at-224627.png.f77485d2e7d9c48e91a48a2fdef6f796.png

screen-shot-2017-09-13-at-224608.png.86a8655f9bec2d6765c02e6616179699.png

Share this post


Link to post
  • 0

It will depend on the template. Perhaps try asking a new question and including a link to the site/page in question.

-Brandon
Project Mgr. and Developer at Ignertia
Creator of Squint - Custom Text Styles & Classes for the Squarespace Text Editor



If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

For others who may have a similar issue, the solution for mobile would be to simply add an additional selector to target the mobile logo in addition to the full-width logo.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

That's a great idea! I had to change a couple of of elements for it to work with Fulton template:


#collection-5a9dbee8c83025e162cb3ffc #logoImage img {
  -webkit-filter: invert(100%);
  filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
}

Note that the collection id is unique to your own page. You can find it with the browser inspector.

Edited by Snow
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...