RichardR Posted June 20, 2020 Share Posted June 20, 2020 Hi everyone, I have managed to add CSS to pages that include lots of images, for instance a list of team member images. When you click on each image it takes you to their individual profile page where I have an image card with text at the side. I can add CSS to change each individual image card, but as there are approx. 20 pages of individual profiles, is there a way of me adding CSS to ensure all image cards have the same rounded edges? Page with team members: https://oarfish-salmon-gpgd.squarespace.com/who-we-are password: criminaljustice If you click on an individual profile, you'll see I just have a square image. Many thanks Link to comment
paul2009 Posted June 20, 2020 Share Posted June 20, 2020 I see that each team member has an individual 'Page' on this site. This means that they are separate entities and you'll need to address each image individually to change the image style. There's nothing wrong with this - it's perfectly valid - but it's not very efficient. There's actually an easier way to set up pages with related content like this 🙂. You may not want to change for this site now that you've built it, but I'll explain in case it helps you (or someone else) later. If you create a 'Blog Page' called team profiles in the unlinked section, you can add each team member as a post within the Blog page. This allows you to: structure the content. Each team member will have a title, a thumbnail image and description control the styling of all the member pages with one line of code. The blog will have a unique ID that allows you to target it easily for style changes. pull the team content onto a page automatically with Summary Blocks (rather than manually creating each image, title and so on) improve the user experience because visitors can take advantage of the built-in pagination to move between each member, rather than going back to the 'who are we' page each time. I hope this helps. -Paul About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 20, 2020 Author Share Posted June 20, 2020 4 minutes ago, paul2009 said: I see that each team member has an individual 'Page' on this site. This means that they are separate entities and you'll need to address each image individually to change the image style. There's nothing wrong with this - it's perfectly valid - but it's not very efficient. There's actually an easier way to set up pages with related content like this 🙂. You may not want to change for this site now that you've built it, but I'll explain in case it helps you (or someone else) later. If you create a 'Blog Page' called team profiles in the unlinked section, you can add each team member as a post within the Blog page. This allows you to: structure the content. Each team member will have a title, a thumbnail image and description control the styling of all the member pages with one line of code. The blog will have a unique ID that allows you to target it easily for style changes. pull the team content onto a page automatically with Summary Blocks (rather than manually creating each image, title and so on) improve the user experience because visitors can take advantage of the built-in pagination to move between each member, rather than going back to the 'who are we' page each time. I hope this helps. -Paul Thanks Paul, very helpful, I'll look into that now. If you look here: https://oarfish-salmon-gpgd.squarespace.com/fellows I've done this as a gallery, then a Summary block to pull them in. So would this be better as a blog page? Link to comment
paul2009 Posted June 20, 2020 Share Posted June 20, 2020 A Gallery collection is great if you only want images and a title, but I guess you'll end up creating individual pages if you want visitors to click into them. For example: https://oarfish-salmon-gpgd.squarespace.com/angus-cameron https://oarfish-salmon-gpgd.squarespace.com/lol-burke When a Blog collection is used, a Summary Block can be used to pull in the titles and thumbnails, but the posts will also be the bio pages. You won't need to create them manually 🙂. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 20, 2020 Author Share Posted June 20, 2020 Thanks Paul, I think I have something similar here: https://oarfish-salmon-gpgd.squarespace.com/news Link to comment
RichardR Posted June 20, 2020 Author Share Posted June 20, 2020 Hi @paul2009 if you look at the news page for instance https://oarfish-salmon-gpgd.squarespace.com/news I know I can style them altogether when they are in a list, when I open one to read the full story do they all need styling individually? Link to comment
paul2009 Posted June 20, 2020 Share Posted June 20, 2020 On 6/20/2020 at 4:06 PM, Icclebug said: when I open one to read the full story do they all need styling individually? You can do the same with them individually. Individual items that belong to a collection have the class view-item. When an item is part of a Blog collection, it will also have the class collection-type-blog. This particular blog (/news) has the class collection-5ec3d82b1d9caf120a11c232. This is unique to this blog collection on this site. You can therefore change the style of all the /news blog posts when viewed individually by targeting: .Main .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 As an example, if you wanted all news blog titles to be red instead of blue, you could use: .Main .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 .BlogItem-title { color: red; } About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 20, 2020 Author Share Posted June 20, 2020 On 6/20/2020 at 5:55 PM, paul2009 said: You can do the same with them individually. Individual items that belong to a collection have the class view-item. When an item is part of a Blog collection, it will also have the class collection-type-blog. This particular blog (/news) has the class collection-5ec3d82b1d9caf120a11c232. This is unique to this blog collection on this site. You can therefore change the style of all the /news blog posts when viewed individually by targeting: .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 As an example, if you wanted all news blog titles to be red instead of blue, you could use: .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 .BlogItem-title { color: red; } Excellent example thank you, this is VERY helpful. Link to comment
RichardR Posted June 21, 2020 Author Share Posted June 21, 2020 I’ve added a new test blog page to use as the team page: https://oarfish-salmon-gpgd.squarespace.com/test-who-we-are-1 I've tried using CSS to centre the summary block on it, but it doesn't seem quite central: .sqs-block-summary-v2 .summary-item-list { display: flex; flex-wrap: wrap; justify-content: center; } Also, I want to add some CSS to the images to make the edges rounded, instead of .BlogItem-title mentioned in the last post what would I use? Also, with this in mind, if I wanted to reduce the image width on the mobile for all images, when you click on them individually, from say this page https://oarfish-salmon-gpgd.squarespace.com/test-who-we-are-1 what would I do please? Many thanks Link to comment
paul2009 Posted June 21, 2020 Share Posted June 21, 2020 The principles that I posted above will apply. Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS: .Main .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img { border-radius:10px; } Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 21, 2020 Author Share Posted June 21, 2020 On 6/21/2020 at 9:38 PM, paul2009 said: The principles that I posted above will apply. Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS: .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img { border-radius:10px; } Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look. Thank you, very much appreciated. Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 On 6/21/2020 at 9:38 PM, paul2009 said: The principles that I posted above will apply. Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS: .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img { border-radius:10px; } Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look. Hi @paul2009 quick question if I may, the above code works perfectly but just noticed it actually puts a rounded edge on the site logo too - which isn't ideal. Any clue how to avoid this please? Thank you. Link to comment
paul2009 Posted June 27, 2020 Share Posted June 27, 2020 Apologies, it wasn't tested before being posted. You may need to prefix it with .Main or if that doesn't work, add another class specific to the image blocks that are in the blog. [updated answer provided below] About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 11 minutes ago, paul2009 said: You just need to prefix it with .Main See updated post above. thank you @paul2009 it seems to just remove the border radius from the image and the logo - see here https://oarfish-salmon-gpgd.squarespace.com/team/helen-schofield-as3ta I added this code: .Main .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img { border-radius:10px; } Link to comment
paul2009 Posted June 27, 2020 Share Posted June 27, 2020 There are many ways to do this depending on how specific it needs to be. However, try this: .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b .sqs-block-image img { border-radius: 10px } About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 7 minutes ago, paul2009 said: There are many ways to do this depending on how specific it needs to be. However, try this: .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b .sqs-block-image img { border-radius: 10px } thank you so much @paul2009 this worked perfectly. I hope other forum members find this useful. 🙂 Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 Hi @paul2009 I'm trying to implement the same coding for product images, but I suspect I'm getting the first part incorrect. The images on the product page are rounded, but can't seem to get them to do the same on click through. Any thoughts please? https://oarfish-salmon-gpgd.squarespace.com/how-to-join https://oarfish-salmon-gpgd.squarespace.com/membership-options/practitioner Many thanks. Link to comment
paul2009 Posted June 27, 2020 Share Posted June 27, 2020 Product pages have a slightly different structure and instead of having Image Blocks, they have product gallery options. As currently styled, you can change it with: .collection-type-products.collection-5ee0fea47d22e671c1280940 .ProductItem-gallery-slides-item img { border-radius: 5px } For the benefit of anyone reading this: It uses the collection-type-products class because this is a 'product' not a blog or gallery. It references the unique 'collection ID' for the products on this Product Page to limit the styling to this particular collection of products. On another site, the collection ID will be different, because they are always unique. It references the ProductItem-gallery-slides-item class because this is the current product gallery setting in Site Styles. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 7 minutes ago, paul2009 said: Product pages have a slightly different structure and instead of having Image Blocks, they have product gallery options. As currently styled, you can change it with: .collection-type-products.collection-5ee0fea47d22e671c1280940 .ProductItem-gallery-slides-item img { border-radius: 5px } For the benefit of anyone reading this: It uses the collection-type-products class because this is a 'product' not a blog or gallery. It references the unique 'collection ID' for the products on this Product Page to limit the styling to this particular collection of products. On another site, the collection ID will be different, because they are always unique. It references the ProductItem-gallery-slides-item class because this is the current product gallery setting in Site Styles. Thank you @paul2009 works perfectly and a great explanation for future use. I think I fixed the 40px offset margin you mentioned earlier in the thread, hope this is correct, it seems to have worked: https://oarfish-salmon-gpgd.squarespace.com/who-we-are .sqs-block-summary-v2 .summary-item { margin: 5px !important; } Where I have the summary blocks for the images on here https://oarfish-salmon-gpgd.squarespace.com/who-we-are and here https://oarfish-salmon-gpgd.squarespace.com/fellows - when you click through on the mobile version to an individual profile the images are quite big, is there a way of reducing the size on the mobile only to make them a little narrower? Many thanks. Link to comment
paul2009 Posted June 27, 2020 Share Posted June 27, 2020 13 minutes ago, Icclebug said: when you click through on the mobile version to an individual profile the images are quite big, is there a way of reducing the size on the mobile only to make them a little narrower? You should be able to do this with a little more CSS 🙂. For example: @media only screen and (max-width: 767px) { .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img { max-width: 70%; margin-left: 5%; } } Explanation: The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. I set the maximum width of the image to 70%, but you can change this to suit your needs. I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
RichardR Posted June 27, 2020 Author Share Posted June 27, 2020 12 minutes ago, paul2009 said: You should be able to do this with a little more CSS 🙂. For example: @media only screen and (max-width: 767px) { .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img { max-width: 70%; margin-left: 5%; } } Explanation: The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. I set the maximum width of the image to 70%, but you can change this to suit your needs. I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices. Just perfect @paul2009 and great for me to learn too. Thank you so much. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.