Highlighted

Need a collapsible CSS selector that does nothing

Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

I have a very large CSS stylesheet that controls the appearance of my squarespace site.

I've organized the file as much as possible and labeled it the best I could with comments.

Still, navigating the document would be much easier if I could just collapse certain sections.

But I'm having trouble coming up with an innocuous CSS selector I can to apply to different sections of the code just for the purpose of collapsing them.

I've tried just using brackets without any selectors, but it comes up as a syntax error in squarespace.

I've tried using media queries like @media only screen{ } but it seems to mess with the responsiveness of the site, even when I use the correct screen sizes.

Any ideas ??

Thanks!

Views

315

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need a collapsible CSS selector that does nothing

Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

I have a very large CSS stylesheet that controls the appearance of my squarespace site.

I've organized the file as much as possible and labeled it the best I could with comments.

Still, navigating the document would be much easier if I could just collapse certain sections.

But I'm having trouble coming up with an innocuous CSS selector I can to apply to different sections of the code just for the purpose of collapsing them.

I've tried just using brackets without any selectors, but it comes up as a syntax error in squarespace.

I've tried using media queries like @media only screen{ } but it seems to mess with the responsiveness of the site, even when I use the correct screen sizes.

Any ideas ??

Thanks!

Views

316

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 19, 2018 0
Adobe Community Professional ,
Jan 19, 2018

Copy link to clipboard

Copied

In CC2018, CSS files collapse two ways, by selector and by highlight.

There's no way to encompass a group of selectors in a selector to collapse the group in DW without causing problems in your file (as you've found). However, you can highlight any amount of code, then click the first triangle in the left margin to collapse the entire highlighted area. That way, you could write css comments at the beginning and end of sections, highlight from open comment to end comment...

...then collapse the entire block...

It's not as nice as having the ability to wrap and collapse with some form of tag like html, the structure of straight css just doesn't really allow for that, but it might do the trick for you.


Personally, if I have an overly massive css file, like the plodding monster that comes with Bootstrap, I create an overwrite file, rather than trying to work through someone else's mess, and link that after the giant file in my html. That way, my css is separate from "theirs" and much easier to manage.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 2
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

So there are no CSS selectors that technically do something, but they are so rarely relevant that it will effectively just serve the function of being collapsible in Dreamweaver?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Adobe Community Professional ,
Jan 19, 2018

Copy link to clipboard

Copied

  wrote

So there are no CSS selectors that technically do something, but they are so rarely relevant that it will effectively just serve the function of being collapsible in Dreamweaver?

No.

You're trying to customize Squarespace code?  Personally, I'd rather have a root canal!

Isn't the whole point of using a site builder like Wix  or Squarespace is so you don't have to do any coding?   Find a template you like.

Website Templates — Squarespace

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

Like could I use @supports(display:block){ ? Seems like that would apply to every conceivable browser to the point of being meaningless?  Seems like I was having problems nesting @media queries within each other but I can probably nest @support queries within @media's.  I'm gonna give a go.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

squarespace templates aren't as customizable as one would like

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

This seems to be working.

Though if someone wants to tell me why this could be potentially catastrophic, please don't be shy.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Adobe Community Professional ,
Jan 19, 2018

Copy link to clipboard

Copied

All I know is if you're customizing Scquarespace templates, you had better know exactly how they work and what language they use.  

What Is JSON-T? — Squarespace Developers

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

Well it's been a process of trial and error, and a lot of using the browser's Inspect feature, but I so far have it pretty well handled.

But specifically would there be a problem with repeatedly using @supports (font-weight:bold) as a means of making my code collapsible?  Looks like font-weight:bold is supported as far back as IE4.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0
Adobe Community Professional ,
Jan 19, 2018

Copy link to clipboard

Copied

pinnacled34498554  wrote

Still, navigating the document would be much easier if I could just collapse certain sections.

To collapse code, click on the down triangles.  See screenshot.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 1
Community Beginner ,
Jan 19, 2018

Copy link to clipboard

Copied

I meant pre-defined sections of the code, right now only delineated by comments.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2018 0