Sensebellum Posted December 9, 2021 Share Posted December 9, 2021 Is it possible to customize the line block in Squarespace so that it is a multi-color gradient? There is an example here where a developer can make the line a single color. But can you make it a two color, or multi-color gradient instead? Thank you for any help! Link to comment
Sensebellum Posted December 9, 2021 Author Share Posted December 9, 2021 Unfortunately the linked example did not work. Using Charlotte template if that is any help. .sqs-block-horizontalrule hr { background-color: orange; } Link to comment
Sensebellum Posted December 9, 2021 Author Share Posted December 9, 2021 Figured it out! Used this resource and put it in a code-block. Might have to ensure it works in all browsers but it's a start! <style> #grad1 { height: 2px; background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA); } </style> <div id="grad1"></div> Link to comment
Poppyseeds Posted December 11, 2021 Share Posted December 11, 2021 (edited) On 12/9/2021 at 11:13 AM, Sensebellum said: Figured it out! Used this resource and put it in a code-block. Might have to ensure it works in all browsers but it's a start! <style> #grad1 { height: 2px; background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA); } </style> <div id="grad1"></div> I'd like to apply this to just one line block. Any suggestions? Edited December 11, 2021 by Poppyseeds question was inside instead of outside the quote Link to comment
tuanphan Posted December 12, 2021 Share Posted December 12, 2021 On 12/11/2021 at 12:53 PM, Poppyseeds said: I'd like to apply this to just one line block. Any suggestions? Which line block you want to apply? Can you share link? We can help easier 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
Poppyseeds Posted December 12, 2021 Share Posted December 12, 2021 10 hours ago, tuanphan said: Which line block you want to apply? Can you share link? We can help easier I placed this code in a Code Block, but no line appears at all. Here's what used: <!DOCTYPE html> <html> <head> <style> #grad3 { height: 5px; background-image: linear-gradient (to right, #9400D3, #4B0082, #0000FF,#00FF00, #FFFF00 ,#FF7F00, #FF0000); } </style> </head> <body> <div id="grad3"></div> </body> </html> I tried different gradient types, such as radial, but nothing. What am I doing wrong? Link to comment
derricksrandomviews Posted December 12, 2021 Share Posted December 12, 2021 (edited) Poppyseeds, I could not get your code to function. This code works in a code block set for HTML. Before you post the code, remove the default code line that is there in the block by default. <style> #grad1 { height: 2px; background: linear-gradient(to right ,#C94127, #EF7F25,#E5DC38,#34B44A,#4E68EA); } </style> <div id="grad1"></div> Edited December 12, 2021 by derricksrandomviews Link to comment
creedon Posted December 13, 2021 Share Posted December 13, 2021 (edited) The critical syntax error is linear-gradient (. Notice the space before the open paren. CSS doesn't like that. It wants linear-gradient(. There are also some unneeded tags. SS cleans those out for you but you don't need 'em. Following is the cleaned up code. <style> #grad3 { background-image : linear-gradient( to right, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000 ); height : 5px; } </style> <div id="grad3"> </div> Let us know how it goes. Edited December 13, 2021 by creedon Poppyseeds 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
Poppyseeds Posted December 13, 2021 Share Posted December 13, 2021 31 minutes ago, creedon said: The critical syntax error is linear-gradient (. Notice the space before the open paren. CSS doesn't like that. It wants linear-gradient(. There are also some unneeded tags. SS cleans those out for you but you don't need 'em. Following is the cleaned up code. <style> #grad3 { background-image : linear-gradient( to right, #9400D3, #4B0082, #0000FF, #00FF00, #FFFF00, #FF7F00, #FF0000 ); height : 5px; } </style> <div id="grad3"> </div> Let us know how it goes. IT WORKED! THANK YOU! 🤩 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