General Questions

Below you will find the most frequently asked questions related to our design kit implementation. Please keep in mind that the list is being continuously updated based on frequent questions that our team receives.

The access password for all videos is support-faq

1. The password for the documentation is not working for the videos.

All the video passwords are on the first page (name of page) of documentation, which is different from the password you have for the documentation itself.

2. The CSS code isn’t applied properly

In the majority of cases, the CSS code isn’t applied due to the differences between the slugs of the sections and the ones mentioned in the code.

Watch the video below, where we go through how to edit the slugs and overall on how to check the CSS code.



3. My current site uses the same template as the one I need to have to implement the design kit. What do I do?

When working on your new site, you can either use a landing/cover page which says “under construction/coming soon” or to work in preview mode. The preview mode allows you to make changes to the new template, add CSS code, change layouts etc. Unfortunately , it isn’t possible to enable the preview mode if your live site is using the same template, as the one required for your new site. Thereby, the only option that you have if you currently use the template that’s needed for your new site is building a Coming Soon page by using Squarespace cover page.

Read here how to add Cover Pages.



4. I can’t find the necessary setting inside Site Styles

Site Styles show only a limited number of settings for you to adjust. If the element you want to adjust is not showing on the page you are currently previewing, the setting for this element won’t be shown in the Site Styles tab.
To solve this, simply click on the section that you need to edit, and the required settings will appear in the Site Styles’ left side column of your dashboard. For example, if you want to change the layout for your blog page, you have to open on your Blog Page, afterwards go to Site Styles and simply click on the whole area.

For more details, check this article here.


5. How Do I add a Full Width Banner?

The first thing you have to do is to add an index page. Add new blank section underneath.

After doing so, set the image from the banner section

 
download (1).png
 

6. How can I add my own fonts?

If you have custom fonts, or fonts that aren’t included in the default list in SquareSpace, you simply have to follow the steps listed in this article.

7. My logo is white, how to make it transparent?

Please make sure that your logo is uploaded as a png file, not jpg.

8. Can't seem to find the next steps to implement the Design.

All the documentation is in the upper- left corner. From there you will see the videos & documentation for different pages!

9. What do I do with my old pages once I publish my new site?

Once your new site is published, we strongly recommend to disable the pages from your old site. This way, your pages will not be indexed by Google but you will still be able to check your old information if necessary.

You can aslo check the video below to check how to properly prepare your site before launching.


10. How do I properly launch my site?

11. How do I set redirects so I don’t get any 404s errors after launch?

Your question wasn’t answered above? Let us know at support@squaremuse.com

Porto Design - General Questions

The access password for all videos is support-faq

1. The logo is being cut if I increase its width

In order to make your logo fit, add the following code snipped in the custom CSS tab (Design tab -> Custom CSS).

Note! This code can be used only if you have a logo with width larger than 150px;.

/* header logo fix */

.Header-branding {

padding-right: 15px !important;

}

div[data-nc-container="bottom-right"],

div[data-nc-container="bottom-left"] {

-webkit-flex: auto !important;

flex: auto !important;

}

.SocialLinks {

overflow: visible;

}

2. THE FIELDS FROM MY CONTACT FORM ARE EMPTY.

The fields from the contact form use the text added in the Placeholder area. You have to make sure that for each section you have added the label in the placeholder field.

 
image_preview+(5).png
 






Your question wasn't answered above? Let us know at support@squaremuse.com!

Venice DESIGN - GENERAL QUESTIONS


The access password for all videos is support-faq

1. The CSS code isn’t applied properly

In the majority of cases, the CSS code isn’t applied due to the differences between the slugs of the sections and the ones mentioned in the code.

Watch the video below, where we go through how to edit the slugs and check the CSS code in general

2. There’s a background color on the testimonials slider, behind the quote block, how do I solve this?

In order to solve this, go to Site Styles, click on the area and make sure you have the overlay color to be transparent. After this, adjust the padding on overlay pages to be 100 instead of 240px.

 
1007035e586a1bc3c01dd2502a2a96b2.png
 

3. The “Code” Font isn’t looking as in demo.

If you have this issue, most probably there’s a difference in the CSS code that you implemented. At this point, it is important to have the code as below. ( Row of code: 98 )


 
download.png
 
 

4. How can I make my header transparent?

If you want to have a transparent header, you simply have to go to Site Styles, click on your header and make the following adjustments:

 
download.png
 
 

Your question wasn't answered above? Let us know at support@squaremuse.com!

MINIMA DESIGN - GENERAL QUESTIONS

The access password for all videos is support-faq

1.How do I add a slider to the homepage?

In case you want to have a slideshow instead of the banner image at the top of your page, you simply have to add a gallery and to position it as the first section of the index page. Follow the steps in the video below to make sure you achieve the desired look.



2. How to make the header transparent?

If you want to have a transparent header which will be on top of your banner image, there are a couple of settings that have to be changed which will affect the position of both the logo & menu items.
You want to make sure that both your Branding & Primary Navigation are positioned in the bottom area of the header. You can adjust the settings and change the horizontal alignment.

download.png



Your question wasn't answered above? Let us know at support@squaremuse.com!

MIRÓ DESIGN - GENERAL QUESTIONS

The access password for all videos is support-faq

1.How to make the navigation bar/menu transparent?

If you want to have a transparent header which will be on top of your banner image, there are a couple of settings that have to be changed which will affect the position of your logo and menu items. You have to make sure that all the settings are configured as below (this will only work if your first section uses a banner image, for galleries/sliders see below)

 
image_preview (4).png
 

If instead of one image you want to have a slider, you need to add a gallery as first section, and check the following setting inside your Site Styles:

Screen Shot 2019-07-16 at 11.08.56 AM.png


2. How to add a slider to homepage?

In case you want to have a slideshow instead of the banner image at the top of your page, you simply have to add a gallery and to position it as the first section of the index page. Follow the steps in the video below to make sure you achieve the desired look.

Your question wasn't answered above? Let us know at support@squaremuse.com!

D’Avella DESIGN - GENERAL QUESTIONS

The access password for all videos is support-faq

1. How do I change the width of my post’s content?

If you want to change the width of the content from your blog post, you have several options:

  1. If you want to change the width of the text only, add the CSS code below in your CSS tab (Design -> Custom CSS) and change the percentage value accordingly.

.BlogItem .html-block .sqs-block-content{

  max-width:80% !important

2. If you want to have both the images and text the same width, you’ll have to add this code:

.BlogItem {

width:80%;

margin:0 auto;

}

.BlogItem .html-block .sqs-block-content{

max-width:100%  !important;

}

2. How do I make my header transparent?

Please insert the following code snippet in the Custom CSS area.

/* Transparent Header */

.homepage header {

        background: transparent !important;

        position: absolute !important;

}

.homepage #mainNavWrapper nav a,

.homepage #mainNavWrapper nav label{

        color: #fff;

}

.homepage .Header-branding-logo , .homepage #logoImage img {

        filter: invert(100%) !important;

}

.homepage #mainNavWrapper nav .subnav a {

        color: #1c1513;

}

.homepage #logoImage:before,

.homepage #logoImage:after {

        background: #fff;

}

.homepage.tweak-header-primary-nav-hover-style-plain .Header--overlay .Header-nav .Header-nav-item{

        color:#fff !important;

}

3. How do I center-align my blog’s title?

In case you want to center- or right-align your blog’s title, go to the settings of the page → Advanced and change the position of the text, it can be:

 text-lign: center; 

 or

 text-align:right;

 
image_preview (7).png
 

Your question wasn't answered above? Let us know at support@squaremuse.com!

Osaka DESIGN - GENERAL QUESTIONS

The access password for all videos is support-faq

1. The CSS code isn’t applied 

In the majority of cases, the CSS code isn’t applied due to the differences between the slugs of the sections and the ones mentioned in the code.

Watch the video below, where we go through how to edit the slugs and check the CSS code in general

2. I can’t make the vertical line appear on my About/ Home pages

If your section slugs match with the ids in the CSS code, but the line still won’t appear, the issue might be in spacer blocks used in these sections. Often the spacer from the right side of the text is missing, causing this issue. Make sure that in the backend, the spacers are organized exactly as shown below.

Homepage:

image_preview.png

About Page:

image_preview (1).png

3. On my homepage, in my About area, the background color is vertical, not horizontal. What do I do?

In this situation, make sure that the slugs for both the homepage and about are the correct ones.

4. My logo color on the homepage is inverted

The color filter is used if you have a black logo in order to make your logo visible on an overlay image. If you don’t have a monochrome logo or if your logo is visible on both white and image backgrounds, you will have to delete or comment /**/ the following block of code:

 
image_preview (2).png
 

5. The lines from the header aren’t even

image_preview (3).png

If you have this issue,  what you have to make sure that both your search icon and social media accounts are displayed in the header. After doing that, pay attention to the position of each and make sure that the site styles are configured as below:

 
image_preview (4).png
 

6. The fields from my contact form are empty.

The fields from the contact form use the text added in the Placeholder area. You have to make sure that for each section you have added the label in the placeholder field.

 
image_preview (5).png
 


7. The mobile version doesn’t look like in Demo ( make sure to update the slugs also for mobile)

If there are still some issues with the way the mobile version of your site looks like, make sure that the slugs mentioned in the code written for mobile devices are updated.


8. In the homepage gallery there is a white area which contains the subtitle & title of the images. How can I make the background from white to transparent?

If you will want to remove the white background behind the title & subtitle, you can add the following code snippet in the Custom CSS area :

.Index-gallery-item-content.Index-gallery-item-content--has-title-and-body{

  background:transparent !important;

}

9. How can I get the horizontal lines in the header to be white instead of black?

In order to change the color of the lines, you have to add the following code snippet in the Custom CSS area:

.ancillary-header-branding-position-bottom-center.homepage [data-nc-base="header"] [data-nc-group="bottom"] [data-nc-container]:first-child, .ancillary-header-branding-position-bottom-center.homepage [data-nc-base="header"] [data-nc-group="bottom"] [data-nc-container]:last-child{
  border-color:black !important;
}

10. How can I invert the color of the arrows from the homepage slider?

Please insert the following code snippet:

.tweak-index-gallery-layout-slideshow:not(.tweak-index-gallery-controls-none) .Index-gallery-control {

   filter: invert(100%);

}
 

Your question wasn't answered above? Let us know at support@squaremuse.com!

CROWD DESIGN - GENERAL QUESTIONS

The access password for all videos is support-faq

1. THE FIELDS FROM MY CONTACT FORM ARE EMPTY.

The fields from the contact form use the text added in the Placeholder area. You have to make sure that for each section you have added the label in the placeholder field.

 
image_preview+(5).png
 

2. My Newsletter block from footer looks off! How can I adjust this?

If you’re having an issue with the way your footer is looking like, please insert the following code snippet in the custom CSS area:

.newsletter-block .newsletter-form-field-wrapper{
  padding-right:0;
}
.newsletter-block .newsletter-form-button-wrapper{
  padding-left:0;
}
.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button{
  height:48px !important;
  margin-top:0 !important
}



Your question wasn’t answered above? Let us know at support@squaremuse.com !