Jump to content

Jo_SQSP

Administrator
  • Posts

    619
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
  2. Love
    Jo_SQSP reacted to inside_the_square in Building industry-specific websites with Becca Harpain   
    I got a few more ideas from my Instagram fam today (here's a link to my profile if you wanna join the fun)
    martial arts authors (writers & poets) medi spas corporate events catering weddings
  3. Like
  4. Love
    Jo_SQSP reacted to laura5 in Building industry-specific websites with Becca Harpain   
    I'm going rogue and not requesting an industry in particular, but more overall: how to do great sites for industries that don't need (or want or have) a lot of photography. Thanks for all you do @inside_the_square!
  5. Like
  6. Like
    Jo_SQSP reacted to Beb in Building industry-specific websites with Becca Harpain   
    Graphic Designers' Portfolios
     
  7. Like
    Jo_SQSP reacted to JulielM in Building industry-specific websites with Becca Harpain   
    Small yoga studio in-venue and online
  8. Like
    Jo_SQSP reacted to OLL in Building industry-specific websites with Becca Harpain   
    Boutique fitness studios!
     
  9. Like
    Jo_SQSP reacted to mariay in Building industry-specific websites with Becca Harpain   
    Art galleries
  10. Love
    Jo_SQSP reacted to inside_the_square in Building industry-specific websites with Becca Harpain   
    These are all great - thank you, everyone!! I posted this question to my YouTube community and got some great responses there that I wanted to add here: 
    Legal and accounting! These are often just brochure sites, with contact information. Local clubs and societies, which often don’t have much money but need a site.  Food retail / restaurants (that have POS) Non-profits Franchises
  11. Like
    Jo_SQSP got a reaction from Aligency in CSS Expert AMA Answers: Becca Harpain   
    CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
    Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
    We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
    This leads me to one of my favorite questions from the Q&A:
    Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
    There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
    Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
    Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
    LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
    Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

    If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
    That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
    There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
    How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
    I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
    I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
    body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
    You’ll find the full Q&A below, but here is a quick recap:
    1 - only use CSS for things you can’t change using the design menus built into Squarespace.
    2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
    3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
    4 - make notes for yourself in case you need to edit your code
    5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
    To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
    I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
    Most importantly, have fun with your Squarespace website.
    ALL my best - Becca
    Questions
    How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
    I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
    I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
    With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
    CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
    Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

    All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
    That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!
  12. Like
    Jo_SQSP got a reaction from houseofnantes in Building industry-specific websites with Becca Harpain   
    We're teaming up with Circle member Becca Harpain ( @inside_the_square) to bring you a new series on the Squarespace Forum dedicated to empowering you with the knowledge and insights needed to build industry-specific websites on Squarespace. Whether you’re a seasoned Squarespace user, a budding entrepreneur exploring website creation, or someone keen on maximizing the potential of this versatile platform, this series is for you. 
    What to expect
    In an era where every business, big or small, needs a compelling online presence, understanding the nuances of different industries can make all the difference. Each sector comes with its own set of challenges, opportunities, and unique characteristics that should be reflected in its online representation.
    Becca will be providing her insights on how to make the most of your Squarespace website for specific industries over the next few months. 

    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

    How to participate
    Please reply to this topic with any industry suggestions! If you see any suggestions in the comments you want to see addressed, simply like the comment. We’ll be selecting 5 suggestions to address in this series.
     
  13. Love
    Jo_SQSP got a reaction from inside_the_square in Building industry-specific websites with Becca Harpain   
    We're teaming up with Circle member Becca Harpain ( @inside_the_square) to bring you a new series on the Squarespace Forum dedicated to empowering you with the knowledge and insights needed to build industry-specific websites on Squarespace. Whether you’re a seasoned Squarespace user, a budding entrepreneur exploring website creation, or someone keen on maximizing the potential of this versatile platform, this series is for you. 
    What to expect
    In an era where every business, big or small, needs a compelling online presence, understanding the nuances of different industries can make all the difference. Each sector comes with its own set of challenges, opportunities, and unique characteristics that should be reflected in its online representation.
    Becca will be providing her insights on how to make the most of your Squarespace website for specific industries over the next few months. 

    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.

    How to participate
    Please reply to this topic with any industry suggestions! If you see any suggestions in the comments you want to see addressed, simply like the comment. We’ll be selecting 5 suggestions to address in this series.
     
  14. Like
    Jo_SQSP got a reaction from Bhavik in Introducing: Clubs   
    We’ve added two brand new clubs to the Squarespace Forum: Artists and Photographers and Online Sellers. Clubs are like social groups, and you can join them to connect with others who are also interested in the club’s topic. 
    You can join the clubs to introduce yourself or your business, share your work, get advice, and get to know others in the Squarespace community. 
    Everyone’s welcome to join! Click the links below to join a club and introduce yourself: 
    Artists and Photographers Online Sellers 
  15. Like
    Jo_SQSP got a reaction from SQSPStarter in CSS Expert AMA Answers: Becca Harpain   
    CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
    Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
    We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
    This leads me to one of my favorite questions from the Q&A:
    Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
    There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
    Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
    Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
    LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
    Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

    If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
    That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
    There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
    How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
    I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
    I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
    body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
    You’ll find the full Q&A below, but here is a quick recap:
    1 - only use CSS for things you can’t change using the design menus built into Squarespace.
    2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
    3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
    4 - make notes for yourself in case you need to edit your code
    5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
    To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
    I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
    Most importantly, have fun with your Squarespace website.
    ALL my best - Becca
    Questions
    How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
    I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
    I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
    With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
    CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
    Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

    All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
    That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!
  16. Like
    Jo_SQSP got a reaction from melody495 in CSS Expert AMA Answers: Becca Harpain   
    CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
    Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
    We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
    This leads me to one of my favorite questions from the Q&A:
    Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
    There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
    Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
    Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
    LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
    Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

    If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
    That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
    There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
    How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
    I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
    I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
    body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
    You’ll find the full Q&A below, but here is a quick recap:
    1 - only use CSS for things you can’t change using the design menus built into Squarespace.
    2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
    3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
    4 - make notes for yourself in case you need to edit your code
    5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
    To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
    I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
    Most importantly, have fun with your Squarespace website.
    ALL my best - Becca
    Questions
    How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
    I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
    I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
    With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
    CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
    Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

    All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
    That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!
  17. Love
    Jo_SQSP got a reaction from Susana_SQSP in CSS Expert AMA Answers: Becca Harpain   
    CSS is a code language that tells a browser how to display content. What fonts to use, what color things should be, and other visual parts of making your website look the way you want it to.
    Squarespace creates a CSS file for you based on what you select in the program in your site style menu and other design options.
    We have the ability to add our own custom code at the end of that file. That gives us Squarespacers a chance to make Squarespace do even more unique things, pushing our creativity past the limits of the design menu.
    This leads me to one of my favorite questions from the Q&A:
    Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers. 
    There were a few questions about accessibility. Custom CSS plays an important role in making the content of your website easy for everyone to access. 
    Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add visual elements to make a website easier to use & understand is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible & easy for everyone to use.
    Some of the questions in this Q&A were about advanced CSS features like nesting and using LESS.js in your code. These are completely unnecessary for most Squarespace users and I want to make sure anyone new to code isn’t deterred by complicated concepts like this! Here are a few thoughts on creating complicated code for Squarespace:
    LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice on enterprise level sites. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make. 
    Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site.

    If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection.
    That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.

    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY
    There were a few technical questions that I wanted to highlight. One of them can be solved without CSS!
    How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.
    I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. 
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion. 
    I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    For a modification like this, you can go all the way down to the base layers of your site. Using CSS, you can give the body of any page a specific margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:
    body{margin:5vw; background: linear-gradient(45deg, pink, blue)}
    You’ll find the full Q&A below, but here is a quick recap:
    1 - only use CSS for things you can’t change using the design menus built into Squarespace.
    2 - use CSS to make your site more accessible by adding contrast that makes it easier to understand your website content & interact with it.
    3 - CSS does not need to be complicated; focus on making visual changes that improve your site beyond what you can do with your design menu.
    4 - make notes for yourself in case you need to edit your code
    5 - add code where you need it. Site wide CSS is great for things like installing fonts, or making button hover effects on every page. Individual content changes, like adjusting the size of a line of text should be added on the individual page with page header code injection or a code block.
    To watch a brand new video about customizing Squarespace with CSS, be sure to subscribe to my YouTube channel at https://www.youtube.com/insidethesquare?sub_confirmation=1
    I hope you found this article informative and inspirational! If you have any questions about custom code, DM me here on the forum anytime @inside_the_square
    Most importantly, have fun with your Squarespace website.
    ALL my best - Becca
    Questions
    How are you handling the lack of forward compatability of old versions of Safari? And following on from that, how much browser compatibility do you tend to factor in to your code?
    I wouldn’t recommend changing anything that would dramatically impact a site's usability with CSS, but if a design code won't loads; it can still look unique! For any CSS that isn’t compatible with older browsers, like some gradient codes, I encourage my students to use high-contrast backup colors. Some older browsers also struggle with animations, but I consider those nice-to-have styles, not need-to-have functionality. 😉 Any favourite properties etc in the current CSS spec? Or any you're looking forward to?
    What a fun question! 🤩I always love a good gradient code and I think box shadows are game changers for adding depth to a design, especially creating subtle layers.  LESS, SASS or vanilla CSS? And why? (I'm guessing LESS)
    You only need to use CSS to change things you can’t edit using the design features in Squarespace, so using anything advanced is unnecessary. On the 100+ Squarespace sites I have worked on, I have only used LESS twice. Simple (”vanilla”) CSS is plenty for the simple changes that we Squarespacers need to make.  Thoughts on the updated Nesting spec?
    I love using nesting for my media queries, making sure that all the changes for a specific screen size happen at once. But beyond that, I’ve never written so much CSS for a single site that nesting was necessary. It will be interesting to see it develop and how this shorthand version of code can potentially improve load time as more browsers adapt to process it! To learn more about nesting, check out this article from Google: https://developer.chrome.com/docs/css-ui/css-nesting Do you use Stylish/any similar extensions for styling your Squarespace dashboard?
    With Squarespace making constant changes to the platform these days, I’ve decided to move away from any plugins that edit the program and change how I interact with it. 😬 It’s the core reason for my love of CSS - all I code is something that changes the style of a site, not the way it works. If the site style menu can't handle my creative ideas or I need to apply a creative concept to multiple things, I like adding my own codes line by line.
    Pro tip: you can leave yourself notes in your code so you know what line does what! Check out this YouTube short all about it: https://youtube.com/shorts/2FGfbJijhFY Do you limit the number of lines of custom CSS you use/split some into individual pages/code blocks?Interesting question! I have never found a need to limit my code, but I do have a rule I follow when it comes to adding code to a Squarespace site. If it is a site-wide change, like a custom font or a global element, I’ll add that to my site-wide CSS (website → website tools → custom CSS), but if I am only changing content on a single page, then I will use page header code injection. That way a browser won’t have to process unnecessary code for every page load - it gets the info it needs to showcase my unique design.  Squarespace is a lot of fun to customise with CSS, but you can run into a lot of accessibility issues if you're not also using JS/just "hacking" the platform to make cool effects. How do you handle this and how often do you find yourself saying to clients "I can make that but it won't be accessible"?
    Sometimes I do! I like to ask people why that needs to change; shrinking fonts and hiding things is not a good idea, but using CSS to add brand styles to a site to make it easier to use is a great idea. I like to focus on borders, color changes, and things that make Squarespace more accessible. Ultimately, it’s the website creator's responsibility to make sure their site is easy for everyone to use, and CSS is a fun way to add more style to a site, making it unique and even more accessible.  Hello, I am trying to edit the limited availability feature. I want it to show a custom message(which is currently possible), but I want the custom message to be linked to my inventory. Essentially, I want it to show " X Number of Orders Until Item is Unlocked", and this would update in real time as people place pre orders. Do you know how I could do this/if it is possible? I think a code injection would be necessary 
    CSS can change the style of a site, but not the way it works. It can’t generate content based on a user action; that’s usually reserved for Javascript. To pull a number from the product/store information inside a Squarespace site, you’ll need to use more advanced type of code. But when you’re ready to customize the font family or text color for that alert, CSS will make it display exactly how you want it to! Hello- a full screen landscape gallery block is the first thing a user sees upon landing on my website. The orientation and screen extents look good on desktop but not so much on mobile where the landscape image is cropped to a portrait format. Is it possible, using custom code, to create an alternate. - or sub - portrait gallery that specifically shows on mobile? So what I am asking is: can a gallery block be split in two - with certain landscape images designated to display on desktop only and portrait images designated to only display on mobile?
    Showing an alternative layout for mobile is one of my most popular tutorials to date! When there are a lot of changes that you’ll need to make to keep a page section accessible on mobile, you can design two page sections in your Squarespace site, and use CSS to show one on desktop & the other on mobile. Here is a link to my tutorial that will teach you how to create this with code step by step: https://www.youtube.com/watch?v=AQnwhitEqnI How do I remove the footer on just one page of my Squarespace site. I want the footer on all the other pages. 
    You can add CSS to an individual page using page header code injection, or a code block if you’re on a personal plan. Adding code this way means it will only load on one page, so your change will only happen there. For a 7.1 site, your code would be this: <style> #footer-sections {display: none} </style>
    Pro tip: You can use more than one type of code in those spots, so you’ll need to tell a computer this is a style code, with HTML style brackets like the example above.

    All of these questions are for a Bedford 7.0 site: I have a gallery slideshow full of images of differing sizes and aspect ratios. I want them all scaled to fit the width of the pane, so I click "Automatically Crop Images". Now I want to choose the height of the slideshow, and have the images cropped so that they fit the height of the slideshow that I chose (not cropped any shorter than that). How do I do this? Very willing to use code if need be. (If you'd like to have a look at the gallery slideshow in question, it's here: https://www.geothermalcanada.org/corporate-members )
    You don’t need code at all! Create a canvas using a program like Adobe Express or Canva, and add your images so they all have the same height and stay in proportion to the canvas you created. Export as a PNG with a transparent background and the physical size of the image will be the same, but your images themselves will be in proportion.  I'd like the background of my site outside the body content of the site (ie: the margin area) to be a background image or a gradient, instead of the white space it currently is. I tried using a border, but sadly it covers up my site banner when I don't want it to. Also, it only seems to work with solid color, not gradient nor image. What are my options for this?
    You can go all the way down to the base layers; the body of your website. Using CSS, you can give it a margin, and add a background image that is an actual image or a gradient code. The code you need will change based on the version and theme you are using, but most will respond to a code similar to this; use it as a starting point for your project:body{margin:5vw; background: linear-gradient(45deg, pink, blue)} I'd like to be able to put a "flexible" summary block on my site. That is, a summary block that generates in response to user input. For example, someone visiting my site selects a blog category from one of my blogs, and a summary block automatically generates right there on the page to show posts from that category. Is this possible with code?
    That is possible with code, but not CSS alone. CSS changes the style of a website but not the way that it works. You can use CSS to change the style of the summary block; spacing, borders, colors, fonts and more!
  18. Like
    Jo_SQSP got a reaction from SST in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
  19. Thanks
    Jo_SQSP got a reaction from Andrew101 in What are your best practices for mobile styling?   
    Have you ever heard of the term “mobile-first design”? It’s a common concept among web designers who want to stay ahead of the curve on the technologies that we use every day to view sites on the Internet. The philosophy contained within mobile-first design is called “progressive advancement,” which dictates that you should design your web presence with smaller screens in mind first, which in turn makes it easier for you to progressively move on to larger screens.  
    According to data shared by the AdobeXD Ideas blog, two billion people currently access the internet on their mobile devices, and that number is expected to jump 72.5% in the next three years. That’s a lot of people to think about! In essence, thinking about mobile-first design forces you to strategize and prioritize your content so that it is leaner and more to the point, to use headings strategically in order to create a visual hierarchy, reduce the number of links in your navigation to fit a smaller screen, use fonts that prioritize readability, and to use white spaces to your advantage for a cleaner layout. 
    What are your best practices for designing more mobile friendly sites? Share your ideas below!
     
  20. Love
    Jo_SQSP got a reaction from christyprice in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
  21. Like
    Jo_SQSP got a reaction from GeothermalCanada in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
  22. Like
    Jo_SQSP got a reaction from AleemYousaf in Using product detail pages to your advantage   
    For the online seller, creating an engaging and user-friendly online store is essential to attract customers and boost sales. There are a variety of built-in tools you can use to captivate and convert your audience, but let’s focus on how product detail pages can showcase your products effectively and convert visitors into loyal customers. These pages are your opportunity to share more details, dimensions, images, and variants with your customers. Here are some tips to make the most of your product detail pages:
    Use high quality images that showcase your products from various angles. Having multiple images per product allows your customers to get a complete understanding of what they’re purchasing.  Include compelling product descriptions that provide detailed information about the product’s features, benefits, and usage. Keeping these descriptions concise and scannable will make them easier for your customers to understand. Be sure to be mindful of SEO best practices! Enhance the user experience by suggesting related products or cross-selling items that complement the one being viewed. You can do this by switching on the Related Products toggle in the Commerce panel. These related products may increase the amount of time a customer spends on your site and give more visibility into your product range. Leverage customer experience to instill confidence in potential buyers by including product reviews.  What do you find most impactful to include in your product details page? Do you like to style it in any particular way? Share in the comments below! 
    Check out our free webinar Design tips to increase your store sales for more ideas to make your store a success. 
     
  23. Love
    Jo_SQSP got a reaction from hilary in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
  24. Love
    Jo_SQSP got a reaction from LouLouHarvey in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
  25. Love
    Jo_SQSP got a reaction from inside_the_square in CSS Expert AMA: Becca Harpain   
    Are you ready to take your website design to the next level? Do you have any burning questions about using CSS on Squarespace? We are excited to announce Becca Harpain (@inside_the_square), a seasoned expert in leveraging the full potential of CSS on the Squarespace platform, will be answering your biggest questions about CSS.
    Why CSS on Squarespace matters
    While Squarespace provides an intuitive and user-friendly interface for creating stunning websites, understanding and harnessing the power of CSS can elevate your design game even further. CSS is a versatile language that allows you to customize the look and feel of your Squarespace site beyond the standard templates.
    Whether you're a seasoned web designer or a Squarespace novice, this AMA session with Becca Harpain promises to be an invaluable opportunity to gain insights into using CSS effectively, troubleshoot common issues, and discover tips and tricks to make your website uniquely yours.
    Who is Becca Harpain?
    A Squarespace designer turned educator, Becca Harpain is the creator of the world's largest collection of Squarespace CSS tutorials - InsideTheSquare.co. Every week, you can tune into her YouTube channel to discover new ways to make your Squarespace website unique. When she's not creating content for the Squarespace community, you can find her running, hiking, and backpacking her way across the trails in the Pacific Northwest.
    How to participate
    Please reply to this topic with any questions you have by Monday January 15th! If you see any questions you want to see answered, simply like the question. Becca will answer the top 10 most liked questions.
     
×
×
  • 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.