Jump to content

Invert Logo on Order Confirmation Page

Recommended Posts

Site URL: https://meden.studio

Hello! As stated in the title, I'm trying to invert my logo on the order confirmation page and I'm not sure what's up. Here is my code:

 

#confirmed-page .header-title-logo img { 
-webkit-filter: invert(85%) !important;
filter: invert(85%) !important; 
filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1') !important;
}

Thank you for any insight!

Jess

Link to comment
  • 1 year later...
On 10/6/2022 at 9:20 PM, Abby_EveryStory said:

@tuanphan Hi there! I've dropped the code into custom css but it doesn't seem to be working. Not sure where I'm going wrong..! 

Link to order confirmation page: https://www.everystory.co.uk/checkout/order-confirmed?oid=633ee421021f24448c022a17&authCode=NjMzZWU0MjEwMjFmMjQ0NDhjMDIyYTE3OjIwMjItMTAtMDZUMTQ6MjA6MTcuOTAyWmVjHCYXHS0DPUDmyYeu78IzKDCROsCeA4SHR3EI5sQq

Thank you!

Add this code to Settings > Advanced > Code Injection > Order Confirmation Page

<style>
  body#order-confirmed .header-title-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

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.