[maccarenaParticipant]

I’d like to customise my current Accordion setting so that the default is pretty much what you’re showing on your page below, i.e. white box, grey frame, plus sign which turns to ‘x’ when clicked:

http://theme.co/x/demo/integrity/1/shortcodes/accordion/

Could you send on the custom CSS required for me to do this?

Thanks,
Alex

[Paul RModerator]

Hi Alex,

Thanks for writing in!

To achieve that you can add this in your child theme’s style.css (wp-content/themes/x-child/style.css)

body .x-accordion{margin-bottom:1.313em;}

body .x-accordion-group{margin:0 0 8px;border:1px solid #ddd;border:1px solid rgba(0,0,0,0.15);box-shadow:0 0.125em 0.275em 0 rgba(0,0,0,0.125);}

body .x-accordion-group:last-child{margin-bottom:0;}

body .x-accordion-heading{overflow:hidden;border-bottom:0;}

body .x-accordion-heading .x-accordion-toggle{display:block;padding:10px 15px;font-family:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;font-size:114.2%;color:#272727;background-color:#fff;cursor:pointer;}

body .x-accordion-heading .x-accordion-toggle.collapsed{background-color:#fff;}

body .x-accordion-heading .x-accordion-toggle.collapsed:before{color:#ccc;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}

body .x-accordion-heading .x-accordion-toggle:hover{color:#ff2a13;}

body .x-accordion-heading .x-accordion-toggle:hover:before{color:#ccc;}

body .x-accordion-heading .x-accordion-toggle:before{content:"\f067";position:relative;display:inline-block;bottom:0.1em;margin-right:10px;font-size:74%;color:#ccc;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.3s ease;transition:all 0.3s ease;font-family:"FontAwesome" !important;font-style:normal !important;font-weight:normal !important;text-decoration:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

body .x-accordion-inner{padding:10px 15px;border-top:1px solid #ddd;border-top:1px solid rgba(0,0,0,0.15);background-color:#fff;box-shadow:none;}

body .x-accordion-inner p:last-child, body .x-accordion-inner ul:last-child, body .x-accordion-inner ol:last-child{margin-bottom:0;}

Hope that helps

[maccarenaParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please provide us with URL of page in question.

Thanks.

[maccarenaParticipant]

I had already done! It’s eurospandatabases.com (see above).

The site with your accordion example is:

http://theme.co/x/demo/integrity/1/shortcodes/accordion/

Alex

[JadeModerator]

Hi Alex,

I have checked the pages in the frontend of your site but I can’t seem to find the page that has the accordion elements. Would you mind posting the direct URL that you’re working on so that we could check this further? Thank you.

[maccarenaParticipant]

Pretty much all of my Portfolio pages have an accordion element for containing additional detail.

Here’s just a couple of examples:

http://eurospandatabases.com/product/sciam-em/

http://eurospandatabases.com/product/imf-elibrary/

Please remember that it is only this element I’d like to change the design of if possible, nothing else.

Thanks,
Alex

[ZeshanMember]

Hi Alex,

Thanks for the URL!

I checked your child theme’s style.css file and you had inserted the provided code incorrectly. I went ahead and fixed it for you. Your accordions should now display like the one in our Integrity 1 demo.

Please note that due to the nature of stacks you can’t mix them. Each and every stack is unique and on its own so it’s not possible to use the styling or feature of the one stack in the other stack. Your current stack is Ethos, and what you were trying to achieve for accordions is the layout of Integrity stack. I went ahead and added the appropriate styling, but for the future reference, if you want to use a styling or functionality of a different stack, you’ll need to switch to that stack.

Thank you!

[maccarenaParticipant]

Wow, looks fantastic! Thanks very much for all your help.

Alex

[ThaiModerator]

You’re very welcome, Alex 🙂

If you need anything else please let us know.

[Author]

Posts