[Share] Squarespace 7.1 CSS ID List

2 hours ago, tjbarnett said:

Hey, I was wondering if it is possible to create a list out of my navigation items in CSS. I want to create a list so I could customize each look of the navigation with custom CSS. I am using version 7.1.

Use this

.header-nav-item:nth-child(1) a
.header-nav-item:nth-child(2) a
.header-nav-item:nth-child(3) a
...

Is it possible to add categories?

46 minutes ago, jayciro said:

Is it possible to add categories?

What do you mean?

Not sure if this is what @jayciro was asking, but I'm trying to customize my blog posts so some of these elements, like categories, show up in a different place than the default. Since ".blog-meta-item–categories" is the element, is it possible to code this into an HTML block to insert this meta data where I would like? Thanks!

37 minutes ago, Jahhhd said:

Not sure if this is what @jayciro was asking, but I'm trying to customize my blog posts so some of these elements, like categories, show up in a different place than the default. Since ".blog-meta-item–categories" is the element, is it possible to code this into an HTML block to insert this meta data where I would like? Thanks!

Where position you want?

1 minute ago, tuanphan said:

Where position you want?

Maybe slightly lower, maybe at the bottom of the page. (This code is definitely not correct but) is it possible to add something like the below snippet to a code block and then move that where ever on the page I would like the categories to appear? Thank you!

 .blog-meta-item–categories {
  display:block !important; }

On 5/27/2020 at 9:19 PM, Jahhhd said:

Maybe slightly lower, maybe at the bottom of the page. (This code is definitely not correct but) is it possible to add something like the below snippet to a code block and then move that where ever on the page I would like the categories to appear? Thank you!

 

 .blog-meta-item–categories {
  display:block !important; }

 

I think you need to use JavaScript to move an elements. You need Business Plan or higher.

On 5/31/2020 at 8:02 AM, tuanphan said:

I think you need to use JavaScript to move an elements. You need Business Plan or higher.

Ya that shouldn't be a problem. Just not sure what the code needs to be. Thanks!

is there an ID for the login button in the header?

2 minutes ago, hboileau said:

is there an ID for the login button in the header?

Can you share link to your site? I can check login button id..

2 hours ago, tuanphan said:

Can you share link to your site? I can check login button id..

embersoultarot.com 

password: hisoka

thank you!!

4 hours ago, tuanphan said:

Can you share link to your site? I can check login button id..

hey! I actually figured it out I used this to change colors on a hover

.user-accounts-link.header-nav-item--collection a:hover {
   color: #B26967 !important;
} 

On 4/12/2020 at 2:50 AM, tuanphan said:

Blog List

• Blog List: .collection-type-blog.view-list
• Thumbnails: article.blog-item img
• Date: time.blog-date
• Category: span.blog-categories-list
• Title: h1.blog-title
• Excerpt: .blog-excerpt
• Read more: a.blog-more-link

Blog Posts

• Blog Posts Page: .collection-type-blog.view-item
• Blog Items: .blog-item-entry
• Categories: .blog-meta-item–categories
• Date: time.dt-published.blog-meta-item.blog-meta-item–date
• Author: .blog-meta-item.blog-meta-item–author.p-author.author
• Title: .blog-item-title
• Content: .blog-item-content-wrapper
• Pagination: .item-pagination
• Pagination Arrows: .item-pagination-link .item-pagination-icon
• Pagination Title: h2.item-pagination-title
• Author Box: .blog-item-author-profile-wrapper
• Author Image: a.author-avatar.content-fill
• Author Name: .author-name
• Author Site: a.author-website
• Post Comment: .squarespace-comments
• Post Comment Button: .comment.btn
• Comment Input: .squarespace-comments .new-comment-area
• Preview: span.btn-text.preview-comment.top-level-preview-btn
• Subscribe via email text: span.subscribe.subscribe-control

Checked & Wrote by tuanphan

That is just great! Thank you!

I was wondering how can I target the content of a blog to create a border around? I tried different variations but with no luck

Thanks for posting this list, Tuanphan.

For gallery lightboxes, I've found the following IDs: 

• .gallery-lightbox-wrapper
• .gallery-lightbox-item-wrapper
• .gallery-lightbox-item
• .gallery-lightbox-list
• .gallery-lightbox-item-src
• .gallery-lightbox-item-img

I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code:

.gallery-lightbox-item {
  height: auto !important;

}

.gallery-lightbox-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
} 

It works, with one issue: The scroll bar is outside the <Next> arrow.

I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work.

Any ideas to solve this?

Thanks in advance.

i want to remove my Quantity, Add to Cart. Could someone give me a code that I can copy past in my Header Code Injection. I don't have a lot of knowledge.

11 hours ago, mickeymiscia said:

i want to remove my Quantity, Add to Cart. Could someone give me a code that I can copy past in my Header Code Injection. I don't have a lot of knowledge.

Add to Home > Design > Custom CSS

.product-quantity-input {
    display: none !important;
}
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

On 9/26/2020 at 1:09 AM, Ad7am said:

Thanks for posting this list, Tuanphan.

For gallery lightboxes, I've found the following IDs: 

• .gallery-lightbox-wrapper
• .gallery-lightbox-item-wrapper
• .gallery-lightbox-item
• .gallery-lightbox-list
• .gallery-lightbox-item-src
• .gallery-lightbox-item-img

I wanted to enable my gallery images to show at their full width (no matter the height), so I used this code:

.gallery-lightbox-item {
  height: auto !important;

}

.gallery-lightbox-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
} 

It works, with one issue: The scroll bar is outside the <Next> arrow.

I tried substituting .gallery-lightbox-wrapper with each of the other IDs above. But the only one that came close was .gallery-lightbox-list. That put the scroll bar inside the arrow, but for some reason scrolling didn't work.

Any ideas to solve this?

Thanks in advance.

Can you share link to gallery?

Thanks for this list Tuan.

Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS:

.gallery-lightbox-item[data-active='true'] {
  height: auto !important;
}

.gallery-lightbox-list {
  overflow-x: hidden;
  overflow-y: auto !important;
  z-index: 100;
} 

That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be.

HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop.

Anyone have a solution for this, please? 

On 10/14/2020 at 10:33 AM, Ad7am said:

Solved my own question of how to my enable lightbox images to show at their full width, no matter the height. Here's the CSS:

.gallery-lightbox-item[data-active='true'] {
  height: auto !important;
}

.gallery-lightbox-list {
  overflow-x: hidden;
  overflow-y: auto !important;
  z-index: 100;
} 

That puts the scrollbar in the correct place, and keeps the arrows outside the image, where they should be.

HOWEVER... I just noticed that on mobile the images are still cut off at the bottom of the lightbox. So it seems the overflow-y property does not work on mobile, though it works fine on desktop.

Anyone have a solution for this, please? 

Do you still need help on this?

16 hours ago, tuanphan said:

Do you still need help on this?

Thanks for asking, Tuan. I emailed you, and will do so again.

Nope, on mobile I still can't get the long images to show in the lightbox at full width without cutting off at the bottom — there's no scrollbar. It seems “overflow-y: auto !important;” is being overruled somewhere.

Hi @tuanphan

Firstly - thank you so much, this is really helpful as always!

Do you know if I can differentiate between the individual pages in a portfolio and the main portfolio 'landing' page which displays the thumbnail images for each portfolio item?

I have added the sidebar from SQSthemes to a portfolio collection, but I don't want it to display on the main portfolio page - just the individual portfolio items. I have the option to omit certain page IDs in the sidebar code, but I can't seem to target that main page only. I want to avoid listing all of the individual portfolio items in the 'allowed' list as there will be lots of them, but there will only be five main portfolio pages in the 'not allowed' list. If that makes sense?!

Site is https://dev-bcco.squarespace.com/ pward: bcco

The page I'm currently working on is: BLINDS > Roller Blinds

I've fixed the above!

Hey, I was wondering if it is possible to create a list out of my navigation items in CSS. I want to create a list so I could customize each look of the navigation with custom CSS. I am using version 7.1.

THAT WORKED THANK YOU SO MUCH !!!

This is such a great reference! Thanks so much!