Linussss Posted October 20, 2022 Share Posted October 20, 2022 Hi all, I have created this timeline with the help of a codepen template that I have changed around. Now I want to implement this into a specific block on my website but I cant figure out where or how to do it. I have played around with common CSS coding and the coding blocks but it doesnt seem like I can find some place where I implement both CSS+HTML as this timeline requires that. Any help is greatly appreciated. https://codepen.io/coldes/pen/yooXNW Link to comment
Ziggy Posted October 20, 2022 Share Posted October 20, 2022 In a code block put the CSS at the top within <style></style> tags and the HTML within <html></html>. You may want to be careful with some of the CSS as it refers to "body" which may interfere with other CSS on the page. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
JuanU_SQSP Posted October 20, 2022 Share Posted October 20, 2022 Hi @Linussss, You can use code blocks to add custom code to a page, blog post, sidebar, footer, or other content area of your site. On all plans, code blocks support plain text, HTML, Markdown, and CSS code surrounded by <style></style> tags. Adding JavaScript or iframes to code blocks is a premium feature available in Business and Commerce plans. As a note, code blocks have a 400 KB limit, which is around 300,000 characters. To learn more about using the code block, visit our guide: https://support.squarespace.com/hc/articles/206543167 Link to comment
Linussss Posted October 21, 2022 Author Share Posted October 21, 2022 16 hours ago, Ziggy said: In a code block put the CSS at the top within <style></style> tags and the HTML within <html></html>. You may want to be careful with some of the CSS as it refers to "body" which may interfere with other CSS on the page. Hey thanks! However, I completed the following but it still ends up as just code text in the box. Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 2 hours ago, Linussss said: However, I completed the following but it still ends up as just code text in the box. Can you share what you've done, a screenshot or the code you've added, and a link to your website? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Linussss Posted October 21, 2022 Author Share Posted October 21, 2022 32 minutes ago, Ziggy said: Can you share what you've done, a screenshot or the code you've added, and a link to your website? Yes of course, I've embedded it into codepen so it takes up less space, and it looks completely fine on codepen. https://codepen.io/Linnuuss/pen/xxjvVqL https://www.yangi.se/ - website domain Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 I don't see it on your website, can you put it somewhere to demonstrate the problem? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Linussss Posted October 21, 2022 Author Share Posted October 21, 2022 3 hours ago, Ziggy said: I don't see it on your website, can you put it somewhere to demonstrate the problem? I have added it to a password protected subpage yangi.se/company-timeline-test password - test123 Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 I think you have "display source code" checked, uncheck that as it displays the code rather than rendering the code. I've tested it, and it will work, but there are issues with some of the CSS as it's referencing generic classes like body that get used for the rest of the page. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Linussss Posted October 24, 2022 Author Share Posted October 24, 2022 On 10/21/2022 at 4:07 PM, Ziggy said: I think you have "display source code" checked, uncheck that as it displays the code rather than rendering the code. I've tested it, and it will work, but there are issues with some of the CSS as it's referencing generic classes like body that get used for the rest of the page. strange, I have these settings enabled and it still looks like it does on the page. Yeah I guess I could make it refer to a single block later instead of the body? Link to comment
Ziggy Posted October 24, 2022 Share Posted October 24, 2022 You have the mode set to CSS, but your code is in HTML Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Linussss Posted October 24, 2022 Author Share Posted October 24, 2022 2 hours ago, Ziggy said: You have the mode set to CSS, but your code is in HTML Yes but as my original question I need both CSS and HTML code in the same window as the timeline is built by that, how would I go about doing it if this isnt the appropriatae method? It's in a codeblock but I still have to specify which Mode, according to squarespace Link to comment
Ziggy Posted October 24, 2022 Share Posted October 24, 2022 In HTML you define CSS with <style> tags. Change the mode to HTML. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Linussss Posted October 25, 2022 Author Share Posted October 25, 2022 (edited) 22 hours ago, Ziggy said: In HTML you define CSS with <style> tags. Change the mode to HTML. Ahh yes many thanks, I can get it working now. But you're right the functions don't work due to the body definition Edited October 25, 2022 by Linussss Link to comment
Ziggy Posted October 25, 2022 Share Posted October 25, 2022 You'll have to play around with the CSS, but this might be the cause: top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 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