Jump to content

Mitchy

Member
  • Posts

    3
  • Joined

  • Last visited

Everything posted by Mitchy

  1. Yes, you can change the header for just one page on your Squarespace website by using custom CSS. Here's how you can do it: Go to the page where you want to change the header. Click on the gear icon in the top-left corner to open the Page Settings. Click on the Advanced tab. Scroll down to the "Page Header Code Injection" section and click on "Header" to expand it. Add the following CSS code: css Copy code body#collection-xxxxxx header.Header { background-color: #ffffff; /* Change this to the desired background color */ } Replace "xxxxxx" with the ID of the page. You can find the page ID by looking at the URL when you're on the page. For example, if the URL is https://www.yourdomain.com/contact, then the page ID is "contact". Change the background color value to the desired color for the header on this page. You can use a color name, HEX code, or RGB value. Note: The above code targets the page header specifically for the page with the ID you specified. If you have multiple pages that you want to change the header for, you can add more code blocks with different page IDs and background colors. Also, keep in mind that this method only changes the background color of the header. If you need to make other changes to the header, such as adding a logo or changing the height, you can use CSS to target specific elements within the header.
  2. To group or lock two overlapping elements in Squarespace, you can use the Spacer Block to hold the two elements together. Here's how: Add a Spacer Block to the page where the two elements overlap. Adjust the Spacer Block's height to match the height of the two overlapping elements. Drag and drop the two overlapping elements onto the Spacer Block. Use the Position option in the Style Editor to position the Spacer Block and the two elements as desired. Note that this technique may not work in all cases, especially if the overlapping elements have different positions or animations. Answer 2: To prevent the triangle shape from being cut off on smaller screens, you can use CSS to position it relative to the section container. Here's how: Open the Page Settings for the page where the triangle shape appears. Go to the Advanced tab and click on the CSS Editor. Add the following code to the CSS Editor: css Copy code #block-604810f64e8e6a7e25eb7535 .content-wrapper { position: relative; } #block-604810f64e8e6a7e25eb7535 .triangle-image { position: absolute; top: 0; right: 0; bottom: 0; } Note that the code above assumes that the triangle image is inside a section with the ID block-604810f64e8e6a7e25eb7535. You may need to adjust the section ID and class names to match your specific design. Also, keep in mind that this technique may cause the triangle image to overlap with other content on smaller screens, so you may need to adjust the positioning or size of the image accordingly.
  3. Go to your Squarespace website and log in to your account. Navigate to the page that contains your blog. Click on the blog post that you want to edit. Click on the image that you want to change the width of. Click on the Edit button (pencil icon) that appears when you hover over the image. In the image editor, click on the Design tab. In the Design tab, you will see an option called Width. Adjust the width by dragging the slider or by typing in the desired value. Click Save to apply the changes. Repeat the above steps for any other images that you want to change the width of.
×
×
  • 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.