Where to create shortcode and change accordion style

Hi,

From this forum I know that I can put accordion inside a tab with a shortcode, but I don’t where should I put the shortcode.

Another thing is how to change the accordion style, I’d like everything to be transparent for the background and the font is white with bold style for the title.

Here’s the link to my web https://www.internationalprsummit.com/past-event/iprs2012bali/

Thank you.

You would need to add a tab element to the page, then add accordion shortcodes inside the content one of the tab items. With the classic accordion, regretfully there isn’t a way to change the styling from the Element options. You’ll need to do that with custom CSS.

Our V2 Accordion Element was just released in X 6.0 and Cornerstone 3.0. It’s not on automatic updates yet but you can download the latest versions from the Dashboard. With the V2 Accordion you’ll fine all the styling options you need to achieve your desired effect without custom CSS.

However, because V2 elements don’t have shortcodes, you won’t be able to directly place them inside of a Tab’s content. It’s a bit of a workaround, but you could use the new Global Blocks feature to setup your accordions. Each Global Block has it’s own shortcode which can be placed in a tab.

Hi,

Thank you for explaining. I’ve tried the custom CSS taken from several discussions, it’s working. But not exactly like I want, where can I learn the code for CSS in X, or is it possible for you to help explain it to me.

Font for tab and accordion headline (family, size, style, weight)
Background, border and shadows set to transparent or none.
Padding for accordion inside the tab.

So far I managed to change some for the tab but haven’t found for the accordion. Thank you.

Hi there,

I suggest that you check the articles below regarding the helper classes that you can use and also few points about the classes in V2 elements:

Regarding the particular question:

1-a) Font Family for the Tab:

.x-nav-tabs > li > a {
    font-family: "Lato", sans-serif;
    font-size: 20px;
    font-weight: normal;
}

1-b) Font Family for the accordion:

.x-accordion-heading .x-accordion-toggle {
    font-family: "Lato", sans-serif;
    font-size: 20px;
    font-weight: normal;
}

Change “Lato” with the name of the font you want to have. And you can have the same code to change the other aspects of the font.

  1. Background, border and box shadow:
.x-accordion-group {
    box-shadow: none;
    border: none;
    background-color: transparent;
}
  1. Padding:
.x-tab-content .x-tab-pane {
    padding: 10px;
}

You can add the suggested codes above to X > Launch > Options > CSS.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.