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

[Share] Squarespace 7.1 CSS ID List


tuanphan

Question

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
46 minutes ago, jayciro said:

Is it possible to add categories?

What do you mean?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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!

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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; }

 

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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..

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;

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

Edited by hme164
Link to comment
  • 0

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.

Edited by Ad7am
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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? 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

Link to comment
  • 0

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

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