Styling the accordion (shortcode)

GetSeenMedia · January 2020

Hello there,

I'm attempting to create a similar accordion to this: http://www.visitcreorooms.com/wp-content/uploads/2020/01/Screenshot-2020-01-18-at-16.10.36.png

Here is where I am up to: http://www.visitcreorooms.com/wp-content/uploads/2020/01/Screenshot-2020-01-18-at-16.10.36.png

I have used the shortcode instead of the drag&drop block as I prefer the shortcode.

I would like to put an icon where the numbers appear or if that is not possible, remove the number square entirely.

Then the writing of both the title and explanation in the dropdown I want to increase in size.

I would also like to know how to change the background colours, and the plus/minus.

Please can you provide the CCS?

The website is: http://www.visitcreorooms.com/

Thank you!

Bryan · January 2020

Hello,

you cannot have an icon there, most colors can be changed in theme options>colors>shortcodes.

Please also specify, best on a screenshot, which fonts do you want to resize.

thanks

GetSeenMedia · January 2020

Okay so how do I remove the background tab entirely so that it looks like the first screenshot?

These are the fonts I wish to change and resize, please provide the CSS or navigation to change:

http://www.visitcreorooms.com/wp-content/uploads/2020/01/Screenshot-2020-01-20-at-17.21.31.png

http://www.visitcreorooms.com/wp-content/uploads/2020/01/Screenshot-2020-01-20-at-17.21.56.png

With thanks,

Tom

GetSeenMedia · January 2020

Hello,

I've been able to style the fonts how I wish but I would just like to now remove the sidebar element where the numbers would normally show. I would like the question to align with the FAQS title.

http://www.visitcreorooms.com/wp-content/uploads/2020/01/Screenshot-2020-01-20-at-19.23.52.png

How do I do this?

Thanks in advance,

Tom

Pablo · January 2020

Sure, please paste that CSS code into the Theme Options > Custom CSS & JS > CSS

.mfn-acc .question::after, .mfn-acc .question::before{
	display: none !important;
}

Thanks

GetSeenMedia · February 2020

Thanks that has helped but it's still not quite as I want it, please see attached:

https://www.visitcreorooms.com/wp-content/uploads/2020/02/Screenshot-2020-02-04-at-17.38.59.png

Where I have drawn black arrows, I would like the wording to align there or as close to it as possible please. Secondly where I have drawn a yellow circle, you can see a difference in shade of red - how do I correct this so that the accordion is the same colour as the entire boxed section?

With thanks,

Tom

Bryan · February 2020

Hey Tom,

try this css for the spacing

.faq .question .title {
	padding: 20px 40px 20px 20px !important;
}

this is for the background:

.faq .question { background: transparent !important;}

thanks

GetSeenMedia · February 2020

That has worked for the question title but how do I style the 'answer', as that is still far to the right of the title: https://www.visitcreorooms.com/

Bryan · February 2020

Try this

.faq .question .answer { 
padding: 0px 20px 20px 20px !important;
}

GetSeenMedia · February 2020

Perfect thank you!

Styling the accordion (shortcode)

Comments