[Share] Accordion Block: Useful code

Hello @tuanphan

You described how to change the accordion icon colors in #2. Change Arrows Color , but I can't seem to be able to do the same with the Plus '+' icon. Is it possible at all?

Thanks

On 2/26/2024 at 7:27 PM, trout-vanilla-fe4g said:

Hello @tuanphan

You described how to change the accordion icon colors in #2. Change Arrows Color , but I can't seem to be able to do the same with the Plus '+' icon. Is it possible at all?

Thanks

It is #2 code, if it doesn't work for your site, you can share link to page where you use accordion on your site, I will check it again

8 hours ago, tuanphan said:

It is #2 code, if it doesn't work for your site, you can share link to page where you use accordion on your site, I will check it again

Thanks for the reply, @tuanphan

I used the code below and it changes the arrow colours, no problem, but '+' icons remain unchanged

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

What's the correct syntax for the Plus icon?

I've tried the obvious ones such as  `.accordion-block .plus {`  etc., but to no avail.

On 2/29/2024 at 11:38 PM, trout-vanilla-fe4g said:

Thanks for the reply, @tuanphan

I used the code below and it changes the arrow colours, no problem, but '+' icons remain unchanged

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

What's the correct syntax for the Plus icon?

I've tried the obvious ones such as  `.accordion-block .plus {`  etc., but to no avail.

 

Plus, use this code

div.accordion-block .plus>div {
    background-color: #f1f !important;
}

Minus, use this code

button[aria-expaned="true"] .plus>div {
    background-color: red !important;
}

4 hours ago, tuanphan said:

Plus, use this code

div.accordion-block .plus>div {
    background-color: #f1f !important;
}

Minus, use this code

button[aria-expaned="true"] .plus>div {
    background-color: red !important;
}

Many thanks @tuanphan, that works great!

@tuanphan Thanks for all of this, its so helpful. I am using a Legacy template and don't even get the Design tab when creating accordion blocks. Is there a way to change the headline text style in my accordions using code? TIA!

On 5/18/2022 at 7:18 PM, creedon said:

Please see Accordion Block Top Bottom Border Hide.

Let us know how it goes.

Is there a way to do this w code on older templates that don't show the "design" tab in accordion style popup? thanks

53 minutes ago, Aurelia said:

Is there a way to do this w code on older templates that don't show the "design" tab in accordion style popup?

In my v7.0 test site using the Brine template family there is a Design tab for the Accordion block and it have some Divider controls.

13 hours ago, creedon said:

In my v7.0 test site using the Brine template family there is a Design tab for the Accordion block and it have some Divider controls.

Thanks, but Im using Avenue template & definitely do not get that Design tab, so the question’s still open?

4 hours ago, Aurelia said:

Im using Avenue template & definitely do not get that Design tab

I have the Design tab in my Avenue.

@creedon thanks i will try it again 

Hi @tuanphan

I am editing the Mobile Footer on my site.
I've successfully added some of your code from this thread to centre align the footer on mobile view. 
I'm still struggling to get the Accordian Title to centre (the description centre aligned is working well).

I also can't get the newsletter block input (placeholder) fields to centre align in mobile view.

And lastly, the 3 x text blocks at base of footer, I'd like these NOT to be centre aligned, is that possible?

URL: landerse.au

I have applied this code:

@media only screen and (max-width:640px){#footer-sections p {text-align:center !important;}}

/* accordion on mobile */
@media screen and (max-width:650px) {
span.accordion-item__title {
    text-align: center !important;}
.accordion-item__description * {
    text-align: center !important;}}

@media screen and (max-width:650px) { newsletter-block .newsletter-form-field-element::placeholder {
  text-align: center !important;}}

Thanks for your help,

Hannah

On 4/6/2024 at 6:43 PM, hannahnowlan said:

Hi @tuanphan

I am editing the Mobile Footer on my site.
I've successfully added some of your code from this thread to centre align the footer on mobile view. 
I'm still struggling to get the Accordian Title to centre (the description centre aligned is working well).

I also can't get the newsletter block input (placeholder) fields to centre align in mobile view.

And lastly, the 3 x text blocks at base of footer, I'd like these NOT to be centre aligned, is that possible?

URL: landerse.au

I have applied this code:

@media only screen and (max-width:640px){#footer-sections p {text-align:center !important;}}

/* accordion on mobile */
@media screen and (max-width:650px) {
span.accordion-item__title {
    text-align: center !important;}
.accordion-item__description * {
    text-align: center !important;}}

@media screen and (max-width:650px) { newsletter-block .newsletter-form-field-element::placeholder {
  text-align: center !important;}}

 

Thanks for your help,

Hannah

Which accordion title/text?

With newsletter, use this CSS code

@media screen and (max-width:767px) {
.newsletter-block .newsletter-form-fields-wrapper *, footer.sections .newsletter-form input, footer.sections .newsletter-form input::placeholder {
    text-align: center !important;
}
.newsletter-block .newsletter-form-wrapper--alignRight .newsletter-form-field-wrapper {
    width: 100% !important;
}
.newsletter-form-body {
    text-align: center;
}
}

Perfect, thankyou! @tuanphan

Hi @tuanphan

In desktop view, is it possible to reduce the padding between the input/placeholder fields on my newsletter block? Ie. First name, last name, email address all sit closer together, at the moment they feel too far apart.

Thanks,

Hannah

landerse.au

On 4/9/2024 at 7:02 AM, hannahnowlan said:

Hi @tuanphan

In desktop view, is it possible to reduce the padding between the input/placeholder fields on my newsletter block? Ie. First name, last name, email address all sit closer together, at the moment they feel too far apart.

Thanks,

Hannah

landerse.au

You can click on Newsletter >> square icon will appear on top/bottom/left/right >> You can drag left icon to decrease newsletter width

Hi @tuanphan,

Thanks. I have already decreased the newsletter block to as small as it goes, whilst still remaining in a single line (not stacked).

I am hoping to change the pre-determined width of each input field text box.
See image attached, I have highlighted in yellow lines the spaced areas between the input fields. I would like to reduce this spacing between them, but keep the newsletter box displaying in one line this this (not stacked).

On 4/17/2024 at 7:13 PM, hannahnowlan said:

Hi @tuanphan,

Thanks. I have already decreased the newsletter block to as small as it goes, whilst still remaining in a single line (not stacked).

I am hoping to change the pre-determined width of each input field text box.
See image attached, I have highlighted in yellow lines the spaced areas between the input fields. I would like to reduce this spacing between them, but keep the newsletter box displaying in one line this this (not stacked).

You can use this CSS code

footer.sections .newsletter-form input {
    max-width: 70px;
}
.newsletter-block .newsletter-form-wrapper--alignRight .newsletter-form-field-wrapper {
    min-width: unset !important;
}

Bringing this thread back. Anyone know how I can split my accordion block into two columns? My website is https://chrysalis-dog-f4na.squarespace.com/ password is 1234 

On 4/20/2024 at 5:11 PM, Tommyisbae said:

Bringing this thread back. Anyone know how I can split my accordion block into two columns? My website is https://chrysalis-dog-f4na.squarespace.com/ password is 1234 

Use this CSS code

div#block-yui_3_17_2_1_1713436761815_29219 ul {
    column-count: 2;
}

Does anyone know if there is a way to change the colour of the accordion item title when open. When the accordion item is open, I would like the title text to change colour to #ED1650, like the screenshot attached. 

Here's the site I'm working on: 
https://rocketrehab.squarespace.com/faq
password: rocket

Many thanks

1 hour ago, holahannah said:

Does anyone know if there is a way to change the colour of the accordion item title when open.

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .sqs-block-accordion .accordion-item[ data-is-open="true" ] .accordion-item__title {
  
    color : #ED1650;
    
    }
    
  </style>

Let us know how it goes.

Thank you @creedon - worked a treat!