Ziggy

Hi, try this CSS, you can adjust the filter type and brightness, as well as the transition speed to your liking: .eventlist-column-thumbnail img { transition:ease-in-out 500ms; } .eventlist-column-thumbnail:hover img { -webkit-filter: brightness(0.8); filter: brightness(0.8); }

It looks like the navigation bar at the top is a "secondary navigation" using this plugin: https://www.will-myers.com/products/p/secondary-navigation-for-squarespace-71 I'm not specifically familiar with this myself, but from the thumbnail images it does appear to have the functionality to convert the last link into a button with CSS. I would reach out to whoever installed this or ask in the support for the plugin. Hope that helps!

You can use a media query to hide and display different image blocks on mobile/desktop, something like this: // Blocks to hide on desktop @media only screen and (min-width:750px) { #block-yui_3_17_2_1_1662597656415_29097 { display:none; } } // Blocks to hide on mobile @media only screen and (max-width:750px) { #block-yui_3_17_2_1_1661988335368_69640 { display:none; } } Add new block IDs separated with commas as you need more instances.

In codepen it's written in HTML pug and SASS rather than HTML and CSS that you need for Squarespace. not too tricky to convert, try this in a code block: <div class="container"><input id="start" name="controls" type="radio" /><input id="stop" name="controls" type="radio" /><input id="reset" name="controls" type="radio" /> <div class="timer"> <div class="cell"> <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">.</div> </div> <div class="cell"> <div class="numbers millisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hundredmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> </div> <div class="timer-controls"><label for="start"> <i class="fa fa-play"></i></label><label for="stop"><i class="fa fa-pause"></i></label><label for="reset"><i class="fa fa-refresh"></i></label></div> </div> and put this into the Custom CSS: .container { padding: 20px; display: inline-block; text-align: center; position: relative; left: 50%; top: 30%; transform: translate(-50%, -50%); } input { display: none; } .timer { padding: 10px; overflow: hidden; display: inline-block; } .timer .cell { width: 0.6em; height: 60px; font-size: 50px; overflow: hidden; position: relative; float: left; color: #555; } .timer .cell .numbers { width: 0.6em; line-height: 60px; font-family: "Roboto Mono"; text-align: center; position: absolute; top: 0; left: 0; } .timer-controls { margin-top: 10px; } .timer-controls label { cursor: pointer; margin: 0 20px; font-size: 20px; border-radius: 50%; color: white; display: inline-flex; width: 70px; height: 70px; justify-content: center; align-items: center; } .timer-controls label:nth-child(1) { background-color: #4caf50; } .timer-controls label:nth-child(1):hover { background-color: #81c784; } .timer-controls label:nth-child(2) { background-color: #f44336; } .timer-controls label:nth-child(2):hover { background-color: #e57373; } .timer-controls label:nth-child(3) { background-color: #2196f3; } .timer-controls label:nth-child(3):hover { background-color: #64b5f6; } #stop:checked ~ .timer .numbers { animation-play-state: paused; } #start:checked ~ .timer .numbers { animation-play-state: running; } #reset:checked ~ .timer .numbers { animation: none; } @keyframes moveten { 0% { top: 0; } 100% { top: -600px; } } @keyframes movesix { 0% { top: 0; } 100% { top: -360px; } } .moveten { animation: moveten 1s steps(10, end) infinite; animation-play-state: paused; } .movesix { animation: movesix 1s steps(6, end) infinite; animation-play-state: paused; } .tenhour { animation-duration: 360000s; } .hour { animation-duration: 36000s; } .tenminute { animation-duration: 3600s; } .minute { animation-duration: 600s; } .tensecond { animation-duration: 60s; } .second { animation-duration: 10s; } .millisecond { animation-duration: 1s; } .tenmillisecond { animation-duration: 0.1s; } .hundredmillisecond { animation-duration: 0.01s; } Finally, I would recommend targeting the CSS to the Code Block ID, as it has some rather general classes that would likely affect other parts of your website negatively.

If you can contact me via my website I'll see what I can do to help you with this, I'll need access to the dashboard to effectively get this working: https://squarefortytwo.com/

Add the HTML in a code block in place of the two text blocks. You'll have to replace the placeholder text with your text and links. HTML: <div class="grid2"> <div class="grid2-item"> <p class="preFade fadeIn">Column One</p> <p class="preFade fadeIn">Column One</p> <p class="preFade fadeIn">Column One</p> </div> <div class="grid2-item"> <p class="preFade fadeIn">Column Two</p> <p class="preFade fadeIn">Column Two</p> <p class="preFade fadeIn">Column Two</p> </div> </div> Add this to your Custom CSS: .grid2 { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; gap:20px; } .grid2-item { text-align: left; }

Hi, try this code, it should work for just the homepage, I think that the colour is correct, but you can adjust the #HEX if needed. #collection-63169d1b2a89ee474abc6b88 { .header { background: #2B2A29; } #header a { color: #ffffff !important; } #footer-sections .section-background { background: #2B2A29; } }

I would suggest changing the navigation font color to the grey that you want for all of the other pages, and then add this code to target your homepage navigation color. #collection-5f1a521a8cf616598e1afbdb { .header-nav-wrapper a { color:#ffffff !important; }}

You'll want to add a code or markdown block with a custom ID rather than trying to link to block IDs. Like this: <span id="YOUR-ID"></span> and then link to: #YOUR-ID You may also want to add this to your Custom CSS to improve the behaviour of the scroll: html { scroll-behavior: smooth; } This guide is a good: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links

If you upgrade and build the footer in Fluid Engine you have a mobile specific editing option with an 8 column grid, so you can do whatever you want in terms of column layouts. You could also achieve the same thing with a single code block with CSS grid for the two columns, that way you maintain the columns on mobile.

Great question! There's certainly room for wireframing and prototyping with Squarespace. In the past that's been slightly limited, and designing directly in the builder (given a good content strategy) was often an efficient way to produce an effective design staying within the constraints, but now with the Fluid Engine builder there's a lot more scope for placement and overlapping as well as a mobile specific design, so you may well be able to retain your current workflow with some adjustments to suit the platform. I would certainly recommend it, doubly so with clients that want to do their own management and updates. Hope that helps!

If you convert the section to the new Fluid Engine editor, then edit the page design in mobile view, you have the option to change the layout and create two columns for your content. (When editing the page you should see an UPGRADE button in the top left of each section, but make sure to fully edit the mobile layout as this will no longer be automatic once converted.)

What custom coding are you using? Does the white margin appear if you temporarily remove it all?

Try this CSS: .header-actions--right .header-actions-action--social .icon { height: 30px; }

Does anyone have a way of changing the text and link in the announcement bar on a single page? Thanks!