Jump to content

justinjamesclack

Circle Member
  • Posts

    89
  • Joined

  • Last visited

Community Answers

  1. justinjamesclack's post in Setting <div class> for code injection was marked as the answer   
    Maybe it's in a code block on the page or each page. 

    Otherwise you can target font colour using css in the custom css panel.
  2. justinjamesclack's post in Remove some navigator menu items from different HOME pages was marked as the answer   
    So this is very doable and I have done this in a website I've designed for an artist, that wanted 2 websites in one with different links displayed on different parts of the website. 

    So the first thing you're going to want to do is change your url name for each page/link. 

    You want to change it so that it's something like /en/url-tag or /ice/url-tag so for example;

    www.youraddresshere.com/en/about-us        for the English side of the site and then
    www.youraddresshere.com/ice/um-okkur     for the Icelandic side of the site. 

    Step 2 is going to each page and accessing the page setting > advanced > header code injection. Then you are going to take the following code and place it on all the English pages/links;

    <style>
    header#header [href*="/ice/"] {
        display: none;
    }
    </style> 

    and then on every Icelandic page/link go to page setting > advanced > header code injection. Then you are going to take the following code and place it on all the Icelandic pages/links;

    <style>
    header#header [href*="/en/"] {
        display: none;
    }
    </style> 

    If this doesn't work, then you will have to use the code in a code block, and use the /ice/ code on each English page, and the /en/ code on every Icelandic page.
  3. justinjamesclack's post in Hiding a single site navigation item on homepage was marked as the answer   
    Hi @miketerranova,

    If you had multiple dropdown menu's then yes you would have to target the specific dropdown menu.

    So depending on where you would like to hide the dropdown menu, is where you should inject the code, using the page settings and the header code injection. 

    However, if you want to hide the dropdown menu across the whole site, add the code to the custom css window;



    If you want to just inject this code on the home page, open up the page settings for the home page, then navigate to advanced, and then in the header code injection add the code between <style></style> tags, like this;

    <style>
    .header-nav .header-nav-item--folder {
    visibility: hidden !important;
    }
    </style>


  4. justinjamesclack's post in Custom Product Form CSS was marked as the answer   
    what text's are you trying to trigger? 

    For the field title (e.g. Name) you'd target this;
    .sqs-async-form-content .form-wrapper .field-list .title {
    font-family: 'insert font family' !important;
    font-size: 24px !important; //change font size//
    font-weight: 500 ; //change bold size//
    }

    for the caption text (e.g. address 1) you'd target this;
    .sqs-async-form-content .form-wrapper .field-list .field .caption {
    font-family: 'insert font family' !important;
    font-size: 18px !important; //change font size//
    font-weight: 500 ; //change bold size//
    }

     
    For the description (e.g. the grey 'if you have a transponder' text) you'd target this;
    .sqs-async-form-content .form-wrapper .field-list .description {
    font-family: 'insert font family' !important;
    font-size: 24px !important; //change font size//
    font-weight: 500 ; //change bold size//
    color: #5FB2F7 !important;
    }
     
    For the button you'd target this;
    .sqs-async-form-content .form-wrapper input[type=submit] {
    font-family: 'insert font family' !important;
    font-size: 24px !important; //change font size//
    font-weight: 500 ; //change bold size//
    background-color: #5FB2F7 !important;
    }
     
    You can add a hyperlink to a checkbox, but it will navigate to a different page and you'd have to refill out the information in the form. I am not sure if this is possible but maybe @tuanphan @paul2009 or @Ziggycould answer this more thoroughly.
  5. justinjamesclack's post in How do I change the size of the category font so it is smaller? was marked as the answer   
    My apologies, let's try this code instead;

    .products.collection-content-wrapper .nested-category-breadcrumb-link {
    font-size: 14px !important;
    }
     
  6. justinjamesclack's post in How do I change the button size on the mobile layout? they seem to look too big. was marked as the answer   
    That will target all respective fonts across the whole site and down to tablet and mobile devices. 

    To only target mobile devices, you'd use the media query 

    @media only screen and (max-width: 768px) {
        h1, h2, h3, h4 {
            font-family: 'EuclidCircularA-bold';
        }
    }
    p, .sqsrte-large, .sqsrte-small {
        font-family: 'EuclidCircularA-Regular';
    }
     
×
×
  • 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.