3-day-monk Posted March 8, 2021 Share Posted March 8, 2021 Site URL: http://hachikin.com/ Does anyone know how to add a link button at top-right corner to the site header of the Carson template..? I'd be grateful if you can help me. Thank you! Link to comment
creedon Posted March 8, 2021 Share Posted March 8, 2021 (edited) 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. Edited March 25, 2021 by creedon version 2 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
3-day-monk Posted March 9, 2021 Author Share Posted March 9, 2021 Thank you Creedon, I added the code but it didn't affect..,don't know why Link to comment
creedon Posted March 9, 2021 Share Posted March 9, 2021 My bad. I've updated my code post. 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 Posted March 12, 2021 Share Posted March 12, 2021 Hi @creedon, how are you? Would there be a version of this code (to add buttons to header) for the York template on 7.0? Any help would be really incredible. Thanks a lot. Link to comment
creedon Posted March 12, 2021 Share Posted March 12, 2021 @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 Posted March 14, 2021 Share Posted March 14, 2021 Hi @creedon, thanks a lot for the code. It is working perfectly. The only problem is that I want to add a specific button for each page of my website, linking to second language page versions of each page. Is there any possibility to use code injection on each page for this purpose? Link to comment
creedon Posted March 14, 2021 Share Posted March 14, 2021 @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 Posted March 14, 2021 Share Posted March 14, 2021 (edited) Hi @creedon. The website is public. www.musaparadisiaca.net Thanks for your help! Edited March 14, 2021 by MiguelFerrao Wrong answer. Link to comment
creedon Posted March 14, 2021 Share Posted March 14, 2021 @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
MiguelFerrao Posted March 16, 2021 Share Posted March 16, 2021 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
creedon Posted March 17, 2021 Share Posted March 17, 2021 @MiguelFerrao Please post the URL for the v7.0 site. As you say the language switching on the v7.1 seems to be working well. tuanphan 1 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
3-day-monk Posted March 25, 2021 Author Share Posted March 25, 2021 Hi @creedon Thank you so much for your help! I added the new code and it's looking nice! But there's the only one problem that the button placed at top-"left" corner now, but I want to have it at top-"right" corner. Do you know how to tweak this? Let me share the link to my website so you can see how it's working now. Thank you.http://hachikin.com/ Link to comment
creedon Posted March 25, 2021 Share Posted March 25, 2021 @3-day-monk I updated my code post again! There was a typo in the code to install in Custom CSS. 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
3-day-monk Posted March 26, 2021 Author Share Posted March 26, 2021 @creedon Thank you so much! It's looking perfect! I sincerely appreciate it. creedon 1 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