Jump to content

Adding a button to the site header of Carson template

Recommended Posts

  • Replies 14
  • Views 831
  • Created
  • Last Reply

The following requires the business plan or above.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Design > Custom CSS.

/*

  add button to header
  
  SS Version : 7.0
  Template : Tremont template family
  
  */
  
  #tc-header-button {
  
    position : absolute;
    right : 13px;
    top : 13px;
    
    }

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add button to header
      
      SS Version : 7.0
      Template : Tremont template family
      
      */
      
      const buttonLabel = 'Button Label';
      const buttonUrl = '/button-label';
      
      // do not change anything below, there be the borg here
      
      $( '<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="tc-header-button">' +
      
        '<div class="sqs-block-content">' +
        
          '<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">' +
          
            '<a class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">' +
            
              '</a>' +
              
            '</div>' +
            
          '</div>' +
          
        '</div>' )
        
        .find ( 'a' )
        
          .attr ( 'href', buttonUrl )
          
          .text ( buttonLabel )
          
          .end ( )
          
        .appendTo ( '#siteHeader' );
        
      // end add button to header
      
    } );
    
  </script>

This is for v7.0 using the Tremont template family.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@MiguelFerrao

We can use a different technique for the York template family. First add a button block as the last block of the footer. Set it up as desired.

Add the following to Design > Custom CSS.

/*

  begin add button to header
  
  SS Version : 7.0
  Template : York template family
  
  */
  
  /* no user serviceable parts below */
  
  [data-nc-base="header"] [data-nc-container="right"] [data-nc-element="tc-button"] {
  
    order : 7;
    
    }
    
  #footer .sqs-block-button:last-child {
  
    display : none;
    
    }
    
  /*  add button to header */

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add button to header
      
      SS Version : 7.0
      Template : York template family
      
      */
      
      // no user serviceable parts below
      
      $( '#footer .sqs-block-button:last' )
      
        .attr ( 'data-nc-element', 'tc-button' )
      
        .appendTo ( '#header [data-nc-container="right"]' );
        
      // end add button to header
      
    } );
    
  </script>

This is for v7.0 using the York template family.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@MiguelFerrao

Please post the URL for your site. It's hard to help when we can't see your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@MiguelFerrao

Do you have some example URLs of alternate language pages. I'm trying to understand the whole picture. How things are laid out for each language and how switching between them with a button might work.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hello @creedon.

I have done it almost perfectly on 7.1. Here is the URL: https://banjo-recorder-36fe.squarespace.com/homept

pass: Musa

It would be really nice to replicate this design on 7.0. In fact, the only complaint I already had with 7.0 was the odd behaviour of the navigation menu. Each time you load a page, the menu jumps to the left, for one second, just to return to the right after.

 

 

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.