Jump to content

Change Color of Plus Sign (instead of Arrow) to expand the Accordion?

Recommended Posts

I found some great code that easily and perfectly changes the color of the arrows to expand the accordion, but I can't find the right word to swap with '.arrow' in this code snippet below to change the color of the plus sign option. I've tried '.plus' and '.cross' etc...but can't figure it out! Anyone know what Squarespace calls the plus sign on the back-end? Thank you 🙂

/* accordion arrows color */
.accordion-block .arrow {
    border-color: #ffff00 !important;
}
Edited by pieperpieper
Link to comment
  • pieperpieper changed the title to Change Color of Plus Sign (instead of Arrow) to expand the Accordion?
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, pieperpieper said:

I found some great code that easily and perfectly changes the color of the arrows to expand the accordion, but I can't find the right word to swap with '.arrow' in this code snippet below to change the color of the plus sign option. I've tried '.plus' and '.cross' etc...but can't figure it out! Anyone know what Squarespace calls the plus sign on the back-end? Thank you 🙂

/* accordion arrows color */
.accordion-block .arrow {
    border-color: #ffff00 !important;
}

Can you share link to page where you use accordion? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, pieperpieper said:

Thanks - but I don't know how to make my site not private / log in when in development?

You can setup password & share url

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
6 hours ago, pieperpieper said:

yeah that was much easier than I expected - thanks.

Here's the link:
https://alpaca-tetra-nxtp.squarespace.com/rentals

Pass: smores

If you scroll down to the first set of rentals (Cameras) - you'll see the red Arrows next the (default) black Plus signs.

Appreciate your help!

I see you solved with this CSS

.accordion-block .arrow {
    border-color: #d64127 !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Yes I was able to change the ARROW color to red - but I don't want to use the arrows. I want to use the PLUS option instead...and I can't figure out how to change that color to red. I'm sure I just need to change the '.arrow' to something else in the CSS...but I can't figure out what Squarespace calls the PLUS sign on the back-end...?

Edited by pieperpieper
Link to comment

Thanks @tuanphan - that's what I needed!!

Care to educate me as to why the need to add 'div.' before 'accordion.block'?

I was expecting every bit of the CSS to stay the same except for the name of 'arrow' or 'plus'...since it's basically just swapping that one alternate option that is already offered by Squarespace.

My mind is broken....

Edited by pieperpieper
Link to comment
19 hours ago, pieperpieper said:

Thanks @tuanphan - that's what I needed!!

Care to educate me as to why the need to add 'div.' before 'accordion.block'?

I was expecting every bit of the CSS to stay the same except for the name of 'arrow' or 'plus'...since it's basically just swapping that one alternate option that is already offered by Squarespace.

My mind is broken....

You can add, or don't add. They are same.

I added because I'm afraid of when you copy code, you missing dot before class name

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.