Caspertheghost Posted August 15, 2023 Share Posted August 15, 2023 (edited) On 8/29/2022 at 10:45 AM, tuanphan said: Use this CSS to customize mobile button .header-menu-cta a { background-color: green !important; font-family: monospace !important; } how are you finding the class to refer to the header button? i've been using inspect and have had no luck figuring it out so far. edit: Never mind, the css code injection editor had some html code in it that was killing the whole file. I got rid of that and things started working Edited August 15, 2023 by Caspertheghost I figured out my issue myself tuanphan 1 Link to comment
tuanphan Posted August 19, 2023 Share Posted August 19, 2023 On 8/15/2023 at 7:47 PM, Caspertheghost said: how are you finding the class to refer to the header button? i've been using inspect and have had no luck figuring it out so far. edit: Never mind, the css code injection editor had some html code in it that was killing the whole file. I got rid of that and things started working I know code, so I inspect with F12 then checking it. Also, you can see this list https://forum.squarespace.com/topic/160059-share-squarespace-71-css-id-list/ Caspertheghost 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jen__ Posted August 31, 2023 Share Posted August 31, 2023 (edited) I want to change the font of the nav bar button to be the same as the font in the nav links. I cannot remember or find the name of the font though! So I need to find the font name from the nav links, and also change the button to have the same font. Is this possible? 🙏😄 Website: https://sprout-flamingo-9m98.squarespace.com Password: SQUARESPACE Edited August 31, 2023 by Jen__ duplicate attachment Link to comment
tuanphan Posted September 2, 2023 Share Posted September 2, 2023 On 8/31/2023 at 7:07 PM, Jen__ said: I want to change the font of the nav bar button to be the same as the font in the nav links. I cannot remember or find the name of the font though! So I need to find the font name from the nav links, and also change the button to have the same font. Is this possible? 🙏😄 Website: https://sprout-flamingo-9m98.squarespace.com Password: SQUARESPACE Header buttons uses Primary Button Style so you can change it in Site Styles Or if you want to use code, add this to Website > Website Tools > Custom CSS /* Header buttons */ header#header a.btn { font-family: 'Roboto' !important; } Jen__ 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jen__ Posted September 2, 2023 Share Posted September 2, 2023 @tuanphan Yay! The code worked a treat. Absolutely delighted. Thankyou Sir 🙏🙏😄😄💯💎 tuanphan 1 Link to comment
rwaldrondesigns Posted January 6 Share Posted January 6 I'm hoping someone can help me. I'm trying to use an image as my navigation button's background when it's hovered over. Here is the code I have, and it all seems to make sense, but the image isn't showing up. I'll be honest that CSS is not my forte, so maybe I'm doing something dopey and obvious??: .header-actions-action .btn { padding: 10px 20px; font-size: 15px; background:transparent !important; background-image:url('https://static1.squarespace.com/static/545db486e4b0b49a35de6ab0/t/6599d3b970f8bd43cbe5ba57/1704580025395/Screenshot+2024-01-06+142512.png');background-position:center;background-size:contain;background-repeat:no-repeat !important; } Link to comment
tuanphan Posted January 9 Share Posted January 9 On 1/7/2024 at 5:44 AM, rwaldrondesigns said: I'm hoping someone can help me. I'm trying to use an image as my navigation button's background when it's hovered over. Here is the code I have, and it all seems to make sense, but the image isn't showing up. I'll be honest that CSS is not my forte, so maybe I'm doing something dopey and obvious??: .header-actions-action .btn { padding: 10px 20px; font-size: 15px; background:transparent !important; background-image:url('https://static1.squarespace.com/static/545db486e4b0b49a35de6ab0/t/6599d3b970f8bd43cbe5ba57/1704580025395/Screenshot+2024-01-06+142512.png');background-position:center;background-size:contain;background-repeat:no-repeat !important; } What is your site url? We can check the code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted March 22 Share Posted March 22 Hi all, I'm having an issue that is slightly different. I would like to change the header nav button color only on a specific page. I can't see to get the code right. This is the page: https://www.bliss-hotel.net/home-riad-marrakech , I would like the "Book now" button to be red only on this page. Does anyone have an idea of how to write this code in the code injection? Thank you! Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/23/2024 at 12:01 AM, alihaz89 said: Hi all, I'm having an issue that is slightly different. I would like to change the header nav button color only on a specific page. I can't see to get the code right. This is the page: https://www.bliss-hotel.net/home-riad-marrakech , I would like the "Book now" button to be red only on this page. Does anyone have an idea of how to write this code in the code injection? Thank you! You can use this code to Website > Website Tools > Custom CSS (DO NOT ADD TO CODE INJECTION) body#collection-65f86dba64b1b80fde160162 a.btn { background-color: red !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted March 26 Share Posted March 26 Hi @tuanphan I tried adding this code on in the CSS but I don't see any changes :/. Any idea why? Thanks so much for your help! Link to comment
tuanphan Posted March 29 Share Posted March 29 On 3/27/2024 at 12:33 AM, alihaz89 said: Hi @tuanphan I tried adding this code on in the CSS but I don't see any changes :/. Any idea why? Thanks so much for your help! I just tested and it still works here. You try keeping code in CSS box, I can check again easier. Or try moving code to top of Custom CSS box Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted June 17 Share Posted June 17 Hi @tuanphan I tried adding it in the CSS box on the top but I still don't see a change. I don't know why you're able to see it and I can't :/. Let me know if there's any other solution. I really appreciate your help! Thank you Alizée Link to comment
tuanphan Posted June 19 Share Posted June 19 On 6/18/2024 at 5:29 AM, alihaz89 said: Hi @tuanphan I tried adding it in the CSS box on the top but I still don't see a change. I don't know why you're able to see it and I can't :/. Let me know if there's any other solution. I really appreciate your help! Thank you Alizée You can keep code in CSS box and let me know, I can check again easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted June 19 Share Posted June 19 @tuanphan ok, it's on top of the CSS box. Let me know what you see. Thank you so much! Link to comment
tuanphan Posted June 21 Share Posted June 21 On 6/19/2024 at 11:34 PM, alihaz89 said: @tuanphan ok, it's on top of the CSS box. Let me know what you see. Thank you so much! Browser give me an error, so I guess you have a syntax error on CSS box (it will make all or some CSS code didn't work properly). If you look at bottom left/right corner, you will see a red notice. If you don't know how to fix it, you can send all code in CSS box, I can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted June 21 Share Posted June 21 Hi @tuanphan, Here's the code. I see it's on line 5, but I don't know what the issue is 😕 body#collection-65f86dba64b1b80fde160162 a.btn { background-color: red !important; } https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.pnghttps://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.png /* Adjust the width and margin as needed */ .sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image { float: right; margin-left: 10px; /* Adjust the margin to control the space between text and image */ } /* Adjust the width and height of the image as needed */ .sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image img { max-width: 150px; /* Set the maximum width of the image */ height: auto; }https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/65f9bab2d0b0b32edecf582d/1710865074252/Bliss+Riad+Logo.png Link to comment
tuanphan Posted June 23 Share Posted June 23 On 6/22/2024 at 12:59 AM, alihaz89 said: Hi @tuanphan, Here's the code. I see it's on line 5, but I don't know what the issue is 😕 body#collection-65f86dba64b1b80fde160162 a.btn { background-color: red !important; } https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.pnghttps://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/64fa6ab6af011025f700fad6/1694132918140/Bliss+Cruise+Logo+W.png /* Adjust the width and margin as needed */ .sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image { float: right; margin-left: 10px; /* Adjust the margin to control the space between text and image */ } /* Adjust the width and height of the image as needed */ .sqs-block-accordion .sqs-block-content .sqs-block-html .your-accordion-image img { max-width: 150px; /* Set the maximum width of the image */ height: auto; }https://static1.squarespace.com/static/648a0aaa826edb34417322f6/t/65f9bab2d0b0b32edecf582d/1710865074252/Bliss+Riad+Logo.png Remove Line 05. It will make syntax error. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
alihaz89 Posted July 1 Share Posted July 1 Hi @tuanphan Genius! It works! Thanks so much! 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