inside_the_square

@Ziggy Thanks but didn't work. Found out from @inside_the_square that the selector is actually: .sqs-gallery-design-autocolumns. Tried it, it works!

Hey @Miicherey! It looks like that testimonial title is just a standard text block in a normal fluid engine page section. We can't change font sizes for a specific selector of text using the editor, so if none of your assigned font sizes for h1, h2, h3 and so on will work, you can change this individual thing with CSS.

Here is a video with info on how to do that. Also - this video is a little old but the concept still works!  To add CSS, go to website then website tools, then custom CSS. They rearranged the design menu back in August. 😅
 

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
 
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
 

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
 
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
 

Hey Jake! I am a huge fan of customizing Squarespace with CSS. I have a little over 300 blog posts that specify the classes you're talking about: https://insidethesquare.co/squarespace-tutorials/
I also use this free chrome extension to grab block ids (not affiliated just a fan!): https://insidethesquare.co/chromeext 

And if you want some tips on when to use a selector/class vs a block id (and when to usee both!) check out this video overview specifically for Squarespace: 
And if you wanna grab my collection of classes for Squarespace, I have them all organized in a Notion doc you can get here: https://insidethesquare.co/css 

I hope all that info helps! Feel free to DM me if you have any questions about a specific project; I'm always looking for more tutorial ideas for my blog 😉
 

Hey Jake! I am a huge fan of customizing Squarespace with CSS. I have a little over 300 blog posts that specify the classes you're talking about: https://insidethesquare.co/squarespace-tutorials/
I also use this free chrome extension to grab block ids (not affiliated just a fan!): https://insidethesquare.co/chromeext 

And if you want some tips on when to use a selector/class vs a block id (and when to usee both!) check out this video overview specifically for Squarespace: 
And if you wanna grab my collection of classes for Squarespace, I have them all organized in a Notion doc you can get here: https://insidethesquare.co/css 

I hope all that info helps! Feel free to DM me if you have any questions about a specific project; I'm always looking for more tutorial ideas for my blog 😉
 

Thanks for sharing @CassAggett 🥰

@byboldstudio @inside_the_square just released this tutorial for exactly what you're after: https://insidethesquare.co/squarespace-tutorials/clickable-list-item 😊

Thanks for sharing @Michelle_Barra_ 🙌❤️ If you need any help with this code @Alma_ugc26 feel free to DM me.

Hi @Alma_ugc26
Not sure if you found a solution yet, but check out this fantastic video from @inside_the_square who provides a code that works (thanks Becca!)
I just used it on a client website and it worked perfectly.
 

Wow, I feel like I've just been visited by a celebrity! Thank you so much, love your videos! You've helped me a fair amount over the last few years!
 
Just went through every other variable I could imagine and found the glitch. The Vimeo video helped.
 
(My CSS formatting for the calendar was not specific enough.) 

Hey @AJZ I just took a look at your source code and there is some typo/character issue that is blocking your code from rendering after line 35721.

Your code is just fine for 7.1, so something must have carried over from wherever you store your codes. 😬
https://vimeo.com/865155812/e356e70256?share=copy
If  you remove your code & notes, and replace it with this you should be good to go. 

P.S. be sure to add !important for your burger display value change to make sure it's not ignored by the browser. Hope this helps!
 
/* burger on desktop */ .header .header-burger{display:flex!important} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}  

@inside_the_square I feel so seen! Definitely take your days off from being a coding superhero but thank you soooooo much for helping me out and taking the time to respond. The code worked beautifully and the website looks amazing, I cant thank you enough!

Hey @leilollipop I don't have a quick fix for an SVG but I do have an older tutorial that can show you how to use a unique logo on an individual page; hope it helps! 
 

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
 
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
 

Thanks for sharing the screenshot! It looks like you want your dropdown menu background to be transparent and that's totally possible with a little CSS! Here is the code you'll need to add to your site:
.header .header-nav-folder-content{background-color:transparent!important} And here is the tricky part as of right now: how to access your custom CSS. 😅
If you are using the Website menu, navigate to website, select website tools, and select custom CSS. Here you can paste the code.
If you see the word "pages" followed by "design" click on design, and then select Custom CSS. That opens the same panel, and you can paste the code there.
A little confusing for now, but I hope that info helps, and best of luck with your project!

Use this code instead
<style> header#header img { content: url(paste new logo image url here); } </style>  

@inside_the_square Thank you.

Hey Yohan! This is a site animation that is created for border buttons. If you turn off your animations (design > site styles > animation)  it will go back to the normal hover effect where it's slightly lighter/transparent on a hover. Hope the info helps and best of luck with your project!

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 
 
.header-burger { display:flex!important} .header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;} .header-nav, .header-actions {visibility:hidden!important}  
 

I am in LOVE with the new variant button option we have in Squarespace!! 🙌 

I decided to tinker a bit with the design of it, changing up colors, borders, shape, and adding a hover effect, all using CSS based on the full selector for these buttons: 
.variant-option .sqs-button-element--secondary 

Here is a tutorial video I made about it, and the codes I used in case anyone else wants to get creative here, too! 🎉
/* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F6EDCE!important; /* change the button background color */ border: 2px solid #EDD17D!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: 1rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#EDD17D!important; /* change the button background color */ color: brown!important; /* change the font color */ box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label { background: #e5f5f6 !important;/* change the button background color */ color: #50bdb8 !important;/* change the button font color */ border: 1px solid #50bdb8 !important; /* change the button border */ border-radius: 3rem !important; /* change the button shape */ }  
Why is the word !important used a gazillion times in this code?! That little extra CSS is helping us overwrite the style already being applied to the button based on your secondary button style. Everyone has different design settings selected for this button, so you might not need to add !important to every value in your code, but I added it to this code to make sure it will work! It won’t add a significant amount of load time to your site, and it won’t affect anything else that is loading - just the variant buttons we are restyling. 

Anyhoo - hope you found this info helpful, and have fun with your Squarespace website! 🥰

I am in LOVE with the new variant button option we have in Squarespace!! 🙌 

I decided to tinker a bit with the design of it, changing up colors, borders, shape, and adding a hover effect, all using CSS based on the full selector for these buttons: 
.variant-option .sqs-button-element--secondary 

Here is a tutorial video I made about it, and the codes I used in case anyone else wants to get creative here, too! 🎉
/* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F6EDCE!important; /* change the button background color */ border: 2px solid #EDD17D!important; /* change the button border */ border-radius:0!important;/* change the button shape */ font-size: 1rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#EDD17D!important; /* change the button background color */ color: brown!important; /* change the font color */ box-shadow: 5px 5px 15px rgba(0,0,0,0.2) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:cheacked+label { background: #e5f5f6 !important;/* change the button background color */ color: #50bdb8 !important;/* change the button font color */ border: 1px solid #50bdb8 !important; /* change the button border */ border-radius: 3rem !important; /* change the button shape */ }  
Why is the word !important used a gazillion times in this code?! That little extra CSS is helping us overwrite the style already being applied to the button based on your secondary button style. Everyone has different design settings selected for this button, so you might not need to add !important to every value in your code, but I added it to this code to make sure it will work! It won’t add a significant amount of load time to your site, and it won’t affect anything else that is loading - just the variant buttons we are restyling. 

Anyhoo - hope you found this info helpful, and have fun with your Squarespace website! 🥰

Becca with @inside_the_square has a great post on how to do this which you can find here: https://insidethesquare.co/squarespace-tutorials/blog-pagination

Thanks for the shout-out @QueenOfTeacups 🥰 @GMS2 It looks like you found a solution for this mobile layout (yay!) but if you need any future code help, feel free to search my tutorial library ( insidethesquare.co ) or reach out to me directly anytime: support@insidthesquare.co

Hey @angelashelton - no need for code here! You can just toggle that metadata off so it won't display and on the individual post, toggle off "show date"
 
I attached two screenshots to help.

I also want to mention that we can't switch templates in 7.1 because you don't need to! Unlike the theme families we used to work with in version 7 (Brine, Bedford, Pacific, York, Etc) All of the 7.1 sites have the exact same features and functionality.
Now there definitely is a bit of learning curve BUT the good news is that if you want to recreate something you see in a different 7.1 template, you can, without having to switch over anything! The page types, premade sections, and the Fluid engine & auto layouts are all the same.