Jump to content

Adding two buttons to Squarespace Header and changing their individual colors

Recommended Posts

Site URL: https://pigeon-squid-t97t.squarespace.com/

Hello! 

After much Googling trying to find a fix to adding two buttons to the header without CSS (so I can have one link to an external url - if I can do this simply with CSS please let me know!) I've used a combination of Javascript & CSS by Thomas Creedon to add two buttons to my header, which work great but I was wondering what code I can add to change the color of just one of these buttons? Changing the color of both of them is as close as I was able to get. 

 

The website PW is: pixelsplease


I am trying to get one button in the beige, and one in the blue


Any help is greatly appreciated!

 

 

Header Injection

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

Footer Injection

<script>

  $( ( ) => {
  
    /*
    
      begin add buttons to header
      
      Version       : 0.6d1
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const buttonsTextUrl = [
      
        /*
        
          following is an example of a new button data structure. copy the
          example new button data structure and paste after the example new
          button data structure. remove the forward slash asterisk and asterisk
          forward slash lines from before and after the copied example. repeat
          for as many new buttons you want to create. this has been done once
          initially
          
          */
          
        /*
        
          {
          
            text : '[enter button text here between single quotes]',
            url : '[enter url here between single quotes]'
            
            },
            
          */
          
        {
        
          text : 'GET STARTED',
          url : 'get-started'
          
          },
          
        ]
        
      // do not change anything below, there be the borg here
      
      $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
      
        const $this = $( this );
        
        $.each ( buttonsTextUrl, function ( index, buttonTextUrl ) {
        
          $( '.btn:first', $this )
          
            .clone ( )
            
            .attr ( 'href', buttonTextUrl.url )
            
            .text ( buttonTextUrl.text )
            
            .appendTo ( $this );
            
          } );
          
        } );
        
      /* end add buttons to header */
      
    } );
    
  </script>

CSS

// Two Buttons on Header
/*

  begin add buttons to header
  
  Version       : 0.6d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Note          : on mobile at 575px and below the orientation is forced to
                  column
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @gap : 3rem; // space between buttons
  
  /*
  
    direction-order controls whether buttons will be oriented in a row or column
    and if they will be in normal or reversed order. the first argument can be
    row or column, the second argument can be normal or reverse.
    
    */
    
  .direction-order ( row, reverse );
  
  // do not change anything below, there be the borg here
  
  .header .header-actions-action--cta, // desktop
  .header-menu-cta // mobile
  
    {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : @d3;
      -webkit-box-direction : @d2;
      -ms-flex-direction : @d1;
      flex-direction : @d1;
      
      grid-gap : @gap;
      gap : @gap;
      
      }
      
  // desktop
  
  @media only screen and ( pointer : coarse ) and ( max-width : 1023px ),
    screen and ( max-width : 799px ) {
    
    .header .header-actions-action--cta {
    
      display : none;
      
      }
    }
    
  // begin mobile
  
    .header-menu-cta {
    
      justify-content : center;
      
      }
      
    @media screen and ( max-width : 575px ) {
    
      .header-menu-cta {
      
        -webkit-box-orient : @d6;
        -webkit-box-direction : @d5;
        -ms-flex-direction : @d4;
        flex-direction : @d4;
        
        }
      }
      
    .header-menu-cta a {
    
      margin-left : auto;
      margin-right : auto;
      
      }
      
    // end mobile
    
  // begin direction mixins
  
    // begin desktop
    
      // direction row, normal
      
      .direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) {
      
        @d1 : row;
        @d2 : normal;
        @d3 : horizontal;
        
        }
        
      // direction row, reverse
      
      .direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) {
      
        @d1 : row-reverse;
        @d2 : reverse;
        @d3 : horizontal;
        
        }
        
      // direction column, normal
      
      .direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) {
      
        @d1 : column;
        @d2 : normal;
        @d3 : vertical;
        
        }
        
      // direction column, reverse
      
      .direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) {
      
        @d1 : column-reverse;
        @d2 : reverse;
        @d3 : vertical;
        
        }
        
      // end desktop
      
    // mobile
    
      // direction column, normal
      
      .direction-order ( @d, @o ) when ( @o = normal ) {
      
        @d4 : column;
        @d5 : normal;
        @d6 : vertical;
        
        }
        
      // direction column, reverse
      
      .direction-order ( @d, @o ) when ( @o = reverse ) {
      
        @d4 : column-reverse;
        @d5 : reverse;
        @d6 : vertical;
        
        }
        
    // end direction mixins
    
  // end add buttons to header

Screenshot - 2021-12-01T185332.592.png

Link to comment
5 hours ago, azzy_m said:

Site URL: https://pigeon-squid-t97t.squarespace.com/

Hello! 

After much Googling trying to find a fix to adding two buttons to the header without CSS (so I can have one link to an external url - if I can do this simply with CSS please let me know!) I've used a combination of Javascript & CSS by Thomas Creedon to add two buttons to my header, which work great but I was wondering what code I can add to change the color of just one of these buttons? Changing the color of both of them is as close as I was able to get. 

 

The website PW is: pixelsplease


I am trying to get one button in the beige, and one in the blue


Any help is greatly appreciated!

 

 

Header Injection

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

Footer Injection

<script>

  $( ( ) => {
  
    /*
    
      begin add buttons to header
      
      Version       : 0.6d1
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const buttonsTextUrl = [
      
        /*
        
          following is an example of a new button data structure. copy the
          example new button data structure and paste after the example new
          button data structure. remove the forward slash asterisk and asterisk
          forward slash lines from before and after the copied example. repeat
          for as many new buttons you want to create. this has been done once
          initially
          
          */
          
        /*
        
          {
          
            text : '[enter button text here between single quotes]',
            url : '[enter url here between single quotes]'
            
            },
            
          */
          
        {
        
          text : 'GET STARTED',
          url : 'get-started'
          
          },
          
        ]
        
      // do not change anything below, there be the borg here
      
      $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
      
        const $this = $( this );
        
        $.each ( buttonsTextUrl, function ( index, buttonTextUrl ) {
        
          $( '.btn:first', $this )
          
            .clone ( )
            
            .attr ( 'href', buttonTextUrl.url )
            
            .text ( buttonTextUrl.text )
            
            .appendTo ( $this );
            
          } );
          
        } );
        
      /* end add buttons to header */
      
    } );
    
  </script>

CSS

// Two Buttons on Header
/*

  begin add buttons to header
  
  Version       : 0.6d1
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Note          : on mobile at 575px and below the orientation is forced to
                  column
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @gap : 3rem; // space between buttons
  
  /*
  
    direction-order controls whether buttons will be oriented in a row or column
    and if they will be in normal or reversed order. the first argument can be
    row or column, the second argument can be normal or reverse.
    
    */
    
  .direction-order ( row, reverse );
  
  // do not change anything below, there be the borg here
  
  .header .header-actions-action--cta, // desktop
  .header-menu-cta // mobile
  
    {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : @d3;
      -webkit-box-direction : @d2;
      -ms-flex-direction : @d1;
      flex-direction : @d1;
      
      grid-gap : @gap;
      gap : @gap;
      
      }
      
  // desktop
  
  @media only screen and ( pointer : coarse ) and ( max-width : 1023px ),
    screen and ( max-width : 799px ) {
    
    .header .header-actions-action--cta {
    
      display : none;
      
      }
    }
    
  // begin mobile
  
    .header-menu-cta {
    
      justify-content : center;
      
      }
      
    @media screen and ( max-width : 575px ) {
    
      .header-menu-cta {
      
        -webkit-box-orient : @d6;
        -webkit-box-direction : @d5;
        -ms-flex-direction : @d4;
        flex-direction : @d4;
        
        }
      }
      
    .header-menu-cta a {
    
      margin-left : auto;
      margin-right : auto;
      
      }
      
    // end mobile
    
  // begin direction mixins
  
    // begin desktop
    
      // direction row, normal
      
      .direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) {
      
        @d1 : row;
        @d2 : normal;
        @d3 : horizontal;
        
        }
        
      // direction row, reverse
      
      .direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) {
      
        @d1 : row-reverse;
        @d2 : reverse;
        @d3 : horizontal;
        
        }
        
      // direction column, normal
      
      .direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) {
      
        @d1 : column;
        @d2 : normal;
        @d3 : vertical;
        
        }
        
      // direction column, reverse
      
      .direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) {
      
        @d1 : column-reverse;
        @d2 : reverse;
        @d3 : vertical;
        
        }
        
      // end desktop
      
    // mobile
    
      // direction column, normal
      
      .direction-order ( @d, @o ) when ( @o = normal ) {
      
        @d4 : column;
        @d5 : normal;
        @d6 : vertical;
        
        }
        
      // direction column, reverse
      
      .direction-order ( @d, @o ) when ( @o = reverse ) {
      
        @d4 : column-reverse;
        @d5 : reverse;
        @d6 : vertical;
        
        }
        
    // end direction mixins
    
  // end add buttons to header

Screenshot - 2021-12-01T185332.592.png

Try adding to Home > Design > Custom Css

/*Change color of header button*/
.header-actions-action [href*='get-started'] {
  background-color: purple !important;
}

.header-actions-action [href*='contact'] {
  background-color: orange !important;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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