hollyfeld

On 12/10/2023 at 6:56 PM, tuanphan said:

Just add padding or margin to the code

/* Add site title */
.header-title-logo a:after {
    content: "Squarespace";
    display: block;
    color: #1bb7c5;
    font-size: 24px;
	margin-left: 20px;
}
.header-title-logo a {
    display: flex;
    align-items: center;
}

 

Got it! That works - thanks!!

On 7/6/2021 at 9:14 PM, tuanphan said:

Add to Design > Custom CSS

/* Add site title */
.header-title-logo a:after {
    content: "Squarespace";
    display: block;
    color: #1bb7c5;
    font-size: 24px;
}
.header-title-logo a {
    display: flex;
    align-items: center;
}

 

Hi @tuanphan I'm using this code and it's working great! Is there a way to add padding or space between the site logo and the "content" ? Right now on my site the content is right up against the logo without any space. 

Hi all

Overall I like the flex option as a sitewide animation. My issue is that on a page with multiple text links the underline is too busy visually. I've used this CSS to hide underlines:

a {
text-decoration: none !important;
} 

but it seems that the flex site wide animation overides this code (I can see the code works if I change to a different sitewide animation). Does anyone know how to hide link underlines while keeping the flex animation on?

Does anyone have code that can animate text? I'm aware of this guide http://www.justinaguilar.com/animations/scrolling.html but all animations have a bouncing effect and I need a more smooth slide in effect for a more formal business. I'm not looking to do this through the site wide animations available on Squarespace as I only want this to work for one specific line of text. 

On 8/19/2023 at 6:15 AM, paul2009 said:

You could hide it with CSS like this:

<style>
  #order-status-page-root .css-1uny5ea {
    display: none!important;
}
</style>

But there's a problem. It will stop working the next time that Squarespace make any code changes to the order status page. This is because Squarespace didn't include semantic, human-readable class names when they designed the order status page. (Don't ask me why - I'd like to know!) So, instead of this label having a persistent class like .badge-fulfillment-status it only has the auto-generated class .css-1uny5ea which will change every time they update the page! 🤷‍♂️

A better solution would be to write some Javascript to look for the label text and either remove it or modify it to fit your needs. I'll look at adding this to my guide. 

Did this help? Please give feedback by clicking an icon below  ⬇️

Got it! Thanks for your help! 

I have a site that is only service products being used as membership dues so nothing will ever be "fulfilled" to the customer. Right now the confirmation page is confusing because of the orange tag that says "Pending Fulfillment" Anyone have code or ideas on how to hide this on the customer facing page?