Jump to content

add css to multiple data-sections

Recommended Posts

Hi is it possible to list out multiple data section ids for one  set of css 

 

This doesn't seem to work so im wondering if there is another method

 

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

 

Link to comment
13 hours ago, joshuaechevarriadop said:

Hi is it possible to list out multiple data section ids for one  set of css 

 

This doesn't seem to work so im wondering if there is another method

 

[data-section-id="63a47ed57f4f560e989882c9”],
[data-section-id="63a480337f4f560e9898ac76”],
[data-section-id="63a4804fd610163651c3c4f5”],
[data-section-id="63a480771e0fe210f84f4001”],
[data-section-id="63a4809914e37d1742619a31”],
[data-section-id="63a480b5ee1b281b1e1ea0e0”] {
position: fixed !important;
z-index:9999;
}

 

Your syntax is right. Howerver, what do you want to achieve? 

Greeting, it's 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, Lightbox Studio plugin
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
7 hours ago, Beyondspace said:

Your syntax is right. Howerver, what do you want to achieve? 

I wanted to apply a fixed position for it.  

when I used the above code it said there was a syntax error but I achieved what I needed by using this code below but I would like to figure out how to target multiple data sections at once

.page-section:nth-child(1) {
  position: fixed !important;
  z-index:9999;
}

 

Link to comment
Quote

when I used the above code it said there was a syntax error

The syntax error is because you have smart quotes in your code. CSS doesn't like smart quotes. Change them to straight quotes.

Otherwise the general syntax for having multiple selectors is correct.

selector,
selector,
selector,
selector

  {
  
    property : value;
    
    }

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

Hi I'm having the same issue. It works great with one, then when I start adding more data-section-ids the entire css doesn't work. In the last part of the css - if I use a comma after the section it will stop displaying full width. see screen shot. 

here is the code that works (see screenshot - titled withonly one): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more): 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
{
  box-shadow: 0px 8px 8px rgba(0,0,0,0.1);
  min-height: 0 !important;
  position: sticky !important;
  -webkit-position: sticky !important;
  top: 0;
  z-index: 999;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.content-wrapper {
  padding-top: 25px !important;
  padding-bottom: 10px !important;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block {
  padding-bottom: 0 !important;
  text-align: center;
}

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]
.html-block p {
  display: inline-block !important;
  margin: 0 20px;
}

 

https://cornet-strawberry-368d.squarespace.com/citizenship
pw: mingus12

after-adding-more.png

withonlyone.png

Edited by dfesenmyer
Link to comment
4 hours ago, dfesenmyer said:

here's what it looks like when i add more sections - and it breaks the css (see screenshot - titled afteradding more):

Your selectors are incomplete. The CSS should look something like the following.

section[data-section-id="63d2d9da32af660a9bb515e7"] .content-wrapper,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .content-wrapper,
section[data-section-id="63d3f99f03e4472872bcea8a"] .content-wrapper,
section[data-section-id="63d3f9d3e68141630f2d2375"] .content-wrapper,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .content-wrapper,
section[data-section-id="63d3fa337d11266dadde5407"] .content-wrapper

  {
  
    padding-top : 25px !important;
    padding-bottom : 10px !important;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block

  {
  
    padding-bottom : 0 !important;
    text-align : center;
    
    }
    
section[data-section-id="63d2d9da32af660a9bb515e7"] .html-block p,
section[data-section-id="63d3f7101a747f1a9fdd4644"] .html-block p,
section[data-section-id="63d3f99f03e4472872bcea8a"] .html-block p,
section[data-section-id="63d3f9d3e68141630f2d2375"] .html-block p,
section[data-section-id="63d3fa0096f1a24a26e4a399"] .html-block p,
section[data-section-id="63d3fa337d11266dadde5407"] .html-block p

  {
  
    display : inline-block !important;
    margin : 0 20px;
    
    }

If you're putting the code in Custom CSS you can use LESS syntax to reduce some of the repetitive text of standard CSS.

/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"]

  {
  
    .content-wrapper {
    
      padding-top : 25px !important;
      padding-bottom : 10px !important;
    
      }
      
    .html-block {
    
      padding-bottom : 0 !important;
      text-align : center;
      
      p {
      
        display : inline-block !important;
        margin : 0 20px;
        
        }
        
      }
      
    }

I tried the password for the site but it didn't work.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

your suggestion worked!!! however the .content-wrapper should be sticky? 

/*HORIZONTAL STICKY CONTENT NAV - 7.1*/
/* uses LESS syntax */

section[data-section-id="63d2d9da32af660a9bb515e7"],
section[data-section-id="63d3f7101a747f1a9fdd4644"],
section[data-section-id="63d3f99f03e4472872bcea8a"],
section[data-section-id="63d3f9d3e68141630f2d2375"],
section[data-section-id="63d3fa0096f1a24a26e4a399"],
section[data-section-id="63d3fa337d11266dadde5407"],
section[data-section-id="63d3fa5bfc703f102cee7de3"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fd73bcde2501d846e044"],
section[data-section-id="63d40527c392bd3a0c6b5f50"],
section[data-section-id="63d4058ff679e32fba95154e"],
section[data-section-id="63d4059af75935614200890e"],
section[data-section-id="63d405a7f8a2f972db0aafda"],
section[data-section-id="63d405b371b5476458f514e8"],
section[data-section-id="63d405c01c535a124ece65c9"],
section[data-section-id="63d405cce158984767bae86d"],
section[data-section-id="63d409e31257eb14e31d95d0"],
section[data-section-id="63d40a20a525244fb4f9cea6"],
section[data-section-id="63d40a339c8b554a7ee1b73f"],
section[data-section-id="63d40a471d7615439aa2f7de"],
section[data-section-id="63d40a5946744037285e531b"],
section[data-section-id="63d40a706109964256c2b7ca"],
section[data-section-id="63d40a83d7a88f51e3b61c16"],
section[data-section-id="63d3fa9ff18e2f67b26f99ed"],
section[data-section-id="63d3fd29dfcbee58269cbd4c"],
section[data-section-id="63d3ff17f60fa726f15c6ca1"],
section[data-section-id="63d3fc3e69877625abaf0353"],
section[data-section-id="63d3fc791122d450f6bce63a"],
section[data-section-id="63d3fca117e5a3539cda8fe0"],
section[data-section-id="63d3fd73bcde2501d846e044"]
{
  .content-wrapper {
    padding-top : 15px !important;
    padding-bottom : 10px !important;
      }
      
    .html-block {
      padding-bottom : 0 !important;
      text-align : center;
      p {
        display : inline-block !important;
        margin : 0 20px;
        }
      }
}
 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

Link to comment
2 hours ago, dfesenmyer said:

however the .content-wrapper should be sticky?

I only tackled the code that had issues. The first ruleset in your post appeared to be correct.

Quote

and for some reason, now - my site logo disappeared?

Your code is not manipulating the header. Your page appeared to be OK after I disabled the Mega Menu and Secondary Navigation code. I'm an unable to help with someone else's custom code. Perhaps there is an error in your install process or it isn't configured properly?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 1/29/2023 at 5:48 AM, dfesenmyer said:

 

and for some reason, now - my site logo disappeared? 

https://cornet-strawberry-368d.squarespace.com/citizenship

pw: mingus12!

 

thanks - you helped a ton.. The logo was another issue - trying to use a svg for the logo. (buggy and i couldn't get it to work). 

You mean replace this logo with a svg logo?

image.png.07135cebf7fa2c67c8398474db3de696.png

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

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.