[envato6283Participant]

Hi,

Thank you for all your supports and your amazing theme.

I wanna customize accordions like changing the header color, making them 3d, add icon to the title or add image next to the title.
But I don’t know how to do that. It’s grateful if you’d mind helping me to find out the solution.

Thank you in advance
Amir

[Nabeel AModerator]

Hi Amir,

Thanks for writing in!

1. To add an image next to title you can do this:

accordion_item title="Accordion Title <img src='http://path/of/your/image' />" parent_id="my-accordion"

Just replace the path in img tag.

2. To change the background color, you can add the following CSS code via Appearance > Customize > Custom > CSS

.x-accordion-heading .x-accordion-toggle {
background-color: red !important;
}

Let us know how this goes!

[envato6283Participant]

Thank you so much, I’m gonna try it.
Would you please help me to find out the same thing about tab nav.

Thank you advance

[ZeshanMember]

Hi there,

To do it for tab nav, you can use following CSS code:

/*** Normal State ***/
.x-nav-tabs>li>a {

   /* Your Styles here */

}

/*** Hover State ***/
.x-nav-tabs>li>a:hover {

   /* Your Styles here */

}

/*** Hover & Active State ***/
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {

   /* Your Styles here */

}

Hope this helps. 🙂

Thank you.

[envato6283Participant]

Hi
Thank you for your help.
I tried accordion and it worked.
I need more helps, how can I make accordion style 3D and change the color when hover?

Thank you So much in advance

[ChristianModerator]

Hey there,

Please add the code below in the Appearance > Customize > Custom > CSS.

.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #E85546;
color: white;
}

.x-accordion-heading .x-accordion-toggle.collapsed:hover {
background-color: #F58B7F;
color: white;
}

.x-accordion-group {
box-shadow: 0 0.25em 0 0 #b22617, 0 4px 9px rgba(0, 0, 0, 0.75);
background: #b22617;
}

Adjust the color values as per your needs.

Hope that helps. 🙂

[envato6283Participant]

Thank you so much.
Worked perfectly amazingly good like always.

[envato6283Participant]

The only thing is, I couldn’t change the border color! Maybe I don’t know which one belongs to border!

[Nabeel AModerator]

Hey Amir,

To change the border of the tabbed content, try this code:

.x-tab-content {
border-color: red !important;
}
.x-nav-tabs>li {
border-color: red !important;
}

Just change the red color as per your need.

If this doesn’t help, would you mind providing a URL of your site so we can suggest you a solution accordingly.

[envato6283Participant]

I don’t wanna change border color of tabbed content, it’s accordion that I wanna change the border color.
Thank you

[Paul RModerator]

Hi,

To change the border color of accordion, you can add this under Custom > CSS in the Customizer.

body .x-accordion-inner {
    border-top:1px solid red;
}

body .x-accordion-group
   border:1px solid red;
}

Change red with the color that you like.

Hope that helps. 🙂

[MaParticipant]

Hi!

I’ve been following this board and tried the css provided:

.x-accordion-group {
box-shadow: 0 0.25em 0 0 #b22617, 0 4px 9px rgba(0, 0, 0, 0.75);
background: #b22617;
}

I would like to change the bottom border from red to gray but the css you provided just above this reply does not work for me. Maybe it has something to do with the css? I would be most grateful for your advice. Thank you!!

Edited: P.S. NEVERMIND! I figured it out. I just have to change the color hex code here

“background: #b22617”

Thanks anyway!

[NicoModerator]

You’re most welcome.

Have a great day! 🙂

[Caleb CParticipant]

Hey there! So I have decided that I want to use the accordion for my sign up forms since the staff here has told me that pop-up forms aren’t available with the x theme as of yet. I was wondering if you guys could tell me how I can make my accordion options large to appear almost like a button.

For instance:
A large accordion item centered on the page that says “HEAR ABOUT IT FIRST” (or something like that)
Then when clicked I will include the shortcode for a mailchimp form

Can you tell me how I can edit the size and color of the accordion item to appear larger and more like a button?

Thank you!

[Caleb CParticipant]

This reply has been marked as private.

[Author]

Posts