harriethoult Posted March 4, 2020 Share Posted March 4, 2020 Site URL: https://badger-wisteria-g5yn.squarespace.com/ Hi there, I have just started working on this site for a client: https://badger-wisteria-g5yn.squarespace.com/ and I want to change the 'contact us' button on the top right to a clickable - telephone icon & telephone number. It would be great if anyone could advise what css coding I can use to achieve this? Please note the site is very much in the beginning stages of development! Any thoughts would be much appreciated. Many thanks. Link to comment
tuanphan Posted March 4, 2020 Share Posted March 4, 2020 Private Site This site is currently private. If you’re the owner or contributor, and which plan will you use: Personal or Business? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
christyprice Posted March 5, 2020 Share Posted March 5, 2020 Hi @harriethoult, the answer somewhat depends on the template you are using. If you go into Settings > Site Availability you can set the site to Password Protected and share the password with us. Then someone may be able to help. christyprice.com 🇺🇸 Austin, TX US Best Squarespace Plugins • Resources for Designers • Make Money with your Blog ✅ Download a FREE Squarespace Prelaunch Checklist Link to comment
harriethoult Posted March 7, 2020 Author Share Posted March 7, 2020 Hi @christyprice, thank you very much for your response. I have just set the password as 'mint' - all in lower-case. Any help would be great. Thanks! Link to comment
christyprice Posted March 8, 2020 Share Posted March 8, 2020 Hi @harriethoult, Unfortunately, the workaround I use in Squarespace 7.0 with FontAwesome to get icons in the header no longer works in 7.1. 😞 Maybe someone else has another idea for you! christyprice.com 🇺🇸 Austin, TX US Best Squarespace Plugins • Resources for Designers • Make Money with your Blog ✅ Download a FREE Squarespace Prelaunch Checklist Link to comment
tuanphan Posted March 8, 2020 Share Posted March 8, 2020 (edited) To change button link to telephone, add this to Home > Settings > Advanced > Code Injection Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".theme-btn--primary-inverse").attr("href", "tel:0123456789"); }); </script> To change to telephone icon, add this to Home > Design > Custom CSS .theme-btn--primary-inverse { background-image: url(https://static.thenounproject.com/png/3158715-200.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; padding-left: 5px; padding-right: 5px; } Edited March 8, 2020 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
harriethoult Posted March 8, 2020 Author Share Posted March 8, 2020 @tuanphan thanks very much for your suggestions, I will give this a go. - and thank you @christyprice for your responses. Hopefully we'll all be up to speed with 7.1 soon! 🙂 christyprice 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