marionnorton

This worked perfectly. As always, you are a wonderful resource for help. Several cups of coffee are on the way!

One other question. Do you know how on the sample site alysonhaley.com they were able to make a horizontal line that appear next to the text when the text box was clicked? That certainly isn't my biggest concern, but I thought I would see if you knew how that was accomplished. Thank you again.

Thank you for responding. The demo looks great. I will have 6 text blocks that I would like to show different summary blocks when they are clicked. I will probably want the text to the side, but knowing how to put the text blocks at the top is helpful for another option. I haven't built any of this out on my site. Are you able to provide sample code that I can then drop my div and block id's in to? Thank you again. Your help is much appreciated.

On the homepage of the website alysonhaley.com, the second section titled "Whats New" uses a vertical list of categories. When each category item is clicked a summary-block of the latest posts from that category appear. In the third section titled "the Latest Looks", this style is used again but with a horizontal list of categories that reveals different images. I am wondering if it is possible to recreate this effect in Squarespace. The best solution I can find so far is an auto layouts hover effect provided by Schwartz-edminsten, but it doesn't really achieve the effect of the example since it uses a simple list with static images. I would like to try and recreate this type of section in a website I am building. I cannot seem to figure this out so I haven't even made an attempt yet. My site is alittlepressedfortime.com and the site password is enter. Any help would be greatly appreciated. Below are screenshots of what I am trying to achieve.

I was able to solve this issue with the following code. You can adjust the font size, letter-spacing and padding any way you like. .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats { font-size: 0px !important; } .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a{ font-size: 11px!important; font-family: 'greycliff-cf'; letter-spacing: .15em; } .sqs-block-summary-v2 .summary-metadata-item.summary-metadata-item--cats a:not(:last-child):after{ content: "•"; visibility: visible; padding-left: 8px; padding-right: 8px; }

The public password is Johngrace3. Sorry for not providing it before. Any help would be most appreciated.

I am currently using the following code provided by @tuanphan to replace the "comma" dilimeter between categories on a blog summary page with a "•". span.blog-categories--comma { visibility: hidden; } span.blog-categories--comma:after { content: "•"; visibility: visible; padding-right: 5px; } This code works great. I am trying to achieve the same results between categories in a summary-block to create cohesion throughout my site. Any help would be greatly appreciated.

I have updated the password back to roundmagnolia. I apologize and hope you are still able to offer some help. Thank you.

https://round-magnolia-te9g.squarespace.com/config/ the password is roundmagnolia.

The website password is roundmagnolia. Thanks.

My url is https://round-magnolia-te9g.squarespace.com/config/pages I have uploaded custom arrows (png files) for use in other areas on my site. I am trying to change the banner slideshow arrows to match my other arrows. I have found ways to change the arrows using svg files, but nothing using png files. I am fine with having the custom arrows for all banner slideshows. Any help would be much appreciated.

I currently have custom arrows (png files I added to my site) for my older and newer blog posts. I used the following code to achieve this: /*Custom Pagination Arrows*/ .item-pagination-icon svg { visibility: hidden; } .item-pagination-icon { background-position: center center; background-repeat: no-repeat; background-size: contain; } /*url icon for next button*/ .item-pagination-link--next .item-pagination-icon { background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e91023a01fce319f721639/1709772835846/right-arrow+%281%29.png'); } /*url icon for previous button*/ .item-pagination-link--prev .item-pagination-icon { background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e9101c0f705c3fad22c824/1709772828912/left-arrow.png'); } This works perfectly, but I am trying to create the same effect on my main blog page. Any help would be much appreciated.

Thank you for your help. Worked great!

I am trying to remove the header and footer from the search page. Because the search page is generated by Squarespace I cannot go into the page settings and remove the header/footer with code injection. Also, there is no collection to target in css. I have tried .sqs-search-page {header {display:none!important;} in CSS, but it did not work. Any help would be appreciated.