azzy_m Posted December 1, 2021 Share Posted December 1, 2021 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 Link to comment
Beyondspace Posted December 1, 2021 Share Posted December 1, 2021 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 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 tuanphan and azzy_m 1 1 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, Lightbox Studio pluginIf 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
azzy_m Posted December 4, 2021 Author Share Posted December 4, 2021 Thank you so much! That worked absolutely perfectly!! Beyondspace and tuanphan 2 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment