Jump to content

independent blog styling on same site

Recommended Posts

https://glockenspiel-iguana-m2r3.squarespace.com/horses
PW: wally

I'm creating a site (7.1) for an artist using blog collections as a way to present 50 pieces of art. One collection has primarily horizontal images whereas the three other collections have a mix of horizontal and vertical images. When I adjust the blog format in the editor, the changes are global for all blog collections. Is there a way to style a single collection so it presents Horizontal images and the other collections are vertical images?

 

Link to comment
  • Replies 12
  • Views 654
  • Created
  • Last Reply
42 minutes ago, IXStudio said:

Hi,
You can target your individual page by using page code injection or Body collection ID/Class.

Please use the like button if it helps you!

Best,
Leopold

Thank you Leopold.

I wasn't seeing how exactly to identify the element I wanted to modify. There are so many attributes called out in the body section. This is the element for the vertical formatted collection. "tweak-blog-basic-grid-image-aspect-ratio-34-three-four-vertical"

And this is for the Horizontal I see this.

weak-blog-side-by-side-image-aspect-ratio-43-four-three

I'm not sure how to specify in the Collection ID CSS.

craig

Link to comment

I think this code helps you! Use this code in Design -> Custom CSS

#collection-5f444c520dcf2a12d9a900bd.tweak-blog-side-by-side-image-aspect-ratio-34-three-four-vertical .blog-side-by-side .image-wrapper {
    padding-bottom: 60% !important;
}

Please use the like button if it helps you!

Best,
Leopold

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
7 minutes ago, IXStudio said:

I think this code helps you! Use this code in Design -> Custom CSS


#collection-5f444c520dcf2a12d9a900bd.tweak-blog-side-by-side-image-aspect-ratio-34-three-four-vertical .blog-side-by-side .image-wrapper {
    padding-bottom: 60% !important;
}

Please use the like button if it helps you!

Best,
Leopold

BINGO! thanks so much Leopold. You are very helpful.

Link to comment
  • 3 months later...
On 12/4/2020 at 7:23 PM, Einar said:

I have the same challenge but on a 7.0 site. (Brine family (Heights template)
I would like different aspect ration images on different blog articles.

One blog 3:4 
Another 16:9

I tried the css code but no luck. Any suggestions?

If you share link to 2 blogs, we can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
16 hours ago, Einar said:

Here are the links to the two blogs.

Keep 3:4 ratio - https://www.kraftlauget.no/artiklar

Change this blog from 3:4 to 16:9 ratio - https://www.kraftlauget.no/169

Today the default ratio is 3:4. But if it is easier we could do it the other way around, and change the default to be 16:9 and override  /artiklar to be 3:4 ratio.

Add to 169 page settings > Advanced > Header

<style>
  .BlogList-item-image:before {
    padding-bottom: 56.25% !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Sweet! This sorted the thumbnail size!👍

One bug I found though.🐛

If first visiting the 16:9 blogg, https://www.kraftlauget.no/169
and then clicking on the 3:4 blogg in the menu (Blogg),
the size of the thumbnails on the 3:4 blogg are also reduced to 16:9?
Like the new header code is cashed or not refreshed/loaded? 

If I manually refresh the 3:4 blog the images return to the correct 3:4 ratio.

Link to comment
20 hours ago, Einar said:

Sweet! This sorted the thumbnail size!👍

One bug I found though.🐛

If first visiting the 16:9 blogg, https://www.kraftlauget.no/169
and then clicking on the 3:4 blogg in the menu (Blogg),
the size of the thumbnails on the 3:4 blogg are also reduced to 16:9?
Like the new header code is cashed or not refreshed/loaded? 

If I manually refresh the 3:4 blog the images return to the correct 3:4 ratio.

Home > Design > Site Styles > Disable Ajax Loading

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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