koko1234

20 hours ago, tuanphan said:

#1. Just adding padding value

If you need to add space on top/bottom, add attribute

padding-top

padding-bottom

#2. With selected, it will be more complex

Add this code to Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  </script>
<style>
  body.t-active a.archive-group-name-link{
    background-color: black !important;
    color: white !important;
     padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
</style>

 

Thank you for all that!

#1. the padding works great. 

#2. the section works, however it selects all three titles in the arhive block instead of just one - is there something i can change so it just highlights the one title clicked on? 

And, would it be possible to just have an underline instead of the black box?

Again, thank you so much for all your help!

12 hours ago, tuanphan said:

With Hover

Add this to Design > Custom CSS

a.archive-group-name-link[href*="blog/category"]:hover {
    background-color: black !important;
    color: white !important;
}
a.archive-group-name-link[href*="blog/category"] {
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}

With selected

Do you use Business or Commerce Plan?

@tuanphan that works! Thanks so much.

Is there a way to adjust the size of the black box? Make it bigger/more padding around the text?

Additionally, is there a way to keep the black box there, highlighting the title that has been selected?

I use the Business Plan for this website.

Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change). 

I have then used an archive block to display these three categories to be filtered by. 

What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below)

Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site). 

Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white. 

I am currently using this code (but it is not quite working properly):

.archive-group-name-link{
  display: flex;
  width: 100%;
}

.archive-group-name-link:after {
  display: flex;
  content: '';
  width: 0px;
  height: 1px;
  transition: width .5s ease;
}

.archive-group-name-link:hover:after {
  width: 100%;
  background: black;
}

Any help or guidance on this would be very much appreciated. 

I have attached some visuals below 🙂

Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog

Password: kokoloco

I want the portfolio block of images/works to change based on what button/title is selected. 

An example of how i want this to work is shown on https://exposure2019.massey.ac.nz/

I want the button/title to stay highlighted when selected, and only the work for that title to be shown. 

Is this possible on Squarespace? Is there CSS i can add to make it work? 

Any help would be very much appreciated!

Thank you in advance 

5 hours ago, creedon said:

Ah. I get ya.

Try the following as a starting point.

.sqs-block-accordion .accordion-item {

  border : 2px solid red;
  border-radius : 50px;
  margin-bottom : 15px;
  padding-left : 50px;
  padding-right : 50px;
  
  }

Let us know how it goes.

That works perfectly - Legend! Thanks heaps

35 minutes ago, creedon said:

Did you check out my May 19, 2022?

Let us know how it goes.

I tried that, but it created a border around the entire accordion instead of each heading. Do you know how I could alter that code to change that? Cheers!

@tuanphan Hi! I'm wanting to create a pill shape border around each heading in my accordion, and hoping for the pill shape to expand when clicked on (to show the rest of the text).  

Do you know how i might be able to do this? I have added a reference image below of what i am after. 

Thanks!