Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How impossible is it to incorporate a 1000-line css theme intended for eg Hugo in SS 7.1?


court74

Question

I want to write most of my site in an offline Markdown editor, use Pandoc to convert it to HTML, and then add enough custom CSS to be able to style sidenotes and better epigraph-like blockquotes in, at least, the blog, but maybe everywhere.

I have the special HTML creation part working, but it needs the custom CSS to display properly. The custom CSS is not designed for Squarespace—more for Hugo, I think.

The (1000-line) css theme is here: https://github.com/jez/pandoc-markdown-css-theme/blob/master/public/css/theme.css

The SS Sitewide Custom CSS editor seems to detects a lot of errors/problems which is unsurprising.
 

I might be willing to debug the whole thing, but… it’s like working blindfolded if I don’t really understand what classes already exist in SS and can and can’t be adjusted. Maybe it’s all there in browser inspectors (is it?), but… is there a best-practice way to approach this kind of challenge in Squarespace with more efficiency / clarity? 

I’m a beginner, but have a front-end person on this, but… this is different from what they normally do, so still looking for good advice at this stage.

p.s. I’m willing to undergo a lot of struggle to get sidenotes* happening, but it would be great to find out sooner if this route is impossible  

(*sidenotes are like footnotes, but they live adjacent to referencing text for easier examination of sources. Kinda tricky to do manually, but someone already coded an efficient way to do this—just not for Squarespace).

Thanks for any guidance you can provide.

Edited by court74
Syntax, clarity
Link to comment

1 answer to this question

Recommended Posts

  • 1
3 hours ago, court74 said:

I want to write most of my site in an offline Markdown editor, use Pandoc to convert it to HTML, and then add enough custom CSS to be able to style sidenotes and better epigraph-like blockquotes in, at least, the blog, but maybe everywhere.

I have the special HTML creation part working, but it needs the custom CSS to display properly. The custom CSS is not designed for Squarespace—more for Hugo, I think.

The (1000-line) css theme is here: https://github.com/jez/pandoc-markdown-css-theme/blob/master/public/css/theme.css

The SS Sitewide Custom CSS editor seems to detects a lot of errors/problems which is unsurprising.
 

I might be willing to debug the whole thing, but… it’s like working blindfolded if I don’t really understand what classes already exist in SS and can and can’t be adjusted. Maybe it’s all there in browser inspectors (is it?), but… is there a best-practice way to approach this kind of challenge in Squarespace with more efficiency / clarity? 

I’m a beginner, but have a front-end person on this, but… this is different from what they normally do, so still looking for good advice at this stage.

p.s. I’m willing to undergo a lot of struggle to get sidenotes* happening, but it would be great to find out sooner if this route is impossible  

(*sidenotes are like footnotes, but they live adjacent to referencing text for easier examination of sources. Kinda tricky to do manually, but someone already coded an efficient way to do this—just not for Squarespace).

Thanks for any guidance you can provide.

When I face a situation when the 3rd party css conflict with Squarespace css, I usually create a scoped version of the css, eg. add a class name in root node of the component. In this case I think the root node should be .sqs-block-markdown...

Once I use UIKit version 3 to integrate lightbox component to squarespace, I use a scope version built from the UIKit source and assign a unique class name for the scope so it won't mess up with ss's css. I guess you can build scope version directly from the css you have you or pasted it into custom css panel (which is less format) and wrap it with something like .scoped-hugo ...

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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...