Jump to content

Adding timeline HTML+CSS Code

Recommended Posts

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
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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
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
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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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?

image.png.a542294fbe04a1e3ac61815437fba4e3.png

Link to comment
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

image.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.