Styling visual composer accordion boxes

Support
#1

Hi,

I am looking to edit/style the Visual composer accordion boxes. Have tried inline css to no avail.

Specifically looking to edit the font and make the boxes transparent

As always your help is greatly appreciated

Brent

#2

Hi Brent,

You can try adding a class to your accordion element.

Then use that class to customize that element.

eg. Add the code below in Theme Options > CSS

/* change accordion content background to transparent and text color to blue  */
.my-accordion .vc_tta-panel-body {
       background-color:transparent;
       color:blue;
}

Hope that helps.

#3

HI paul,

Unfortunately that did not work.

This is for the mobile version of the site. Does that make a difference?

I am using the VC visibility element to define the section as only visible to phones.

thanks

Brent

#4

Hey Brent,

If you’ve added the class my-accordion to your Accordion element (see screenshot) then please replace the previous code with the following code:

/* To make the accordion header transparent and change the font colot */
.my-accordion .x-accordion-heading a {
       background-color:transparent;
       color:#5eaff1;
}

/* To make the accordion body transparent and change the font colot */
.my-accordion .x-accordion-body .x-accordion-inner {
       background-color:transparent;
       color:red;
}

I tried to check your setup but you site requires password to enter the admin panel I guess. Let us know how this goes!

#5

Hi Nabeel,

that works once the accordion is open.

Is there a way to have this work while the accordion is closed?

Thanks,

Brent

#6

Hello Brent,

Please have the css code updated and use this:

/* To make the accordion header transparent and change the font colot */
.my-accordion .x-accordion-heading a,
.my-accordion .x-accordion-heading .x-accordion-toggle {
       background-color:transparent;
       color:#5eaff1;
}

/* To make the accordion body transparent and change the font colot */
.my-accordion .x-accordion-body .x-accordion-inner {
       background-color:transparent;
       color:red;
       border: none;
}

We would loved to know if this has work for you. Thank you.

#7

Hi,

That has worked out great!! thanks for the help.

I am wondering how the font is defined? It is not using the body or heading fonts i have denied in the theme options.

Is there a way that i can set what the font is?

thanks

Brent

#8

Hi again,

To change the font, you can replace the previous code with this:

/* To make the accordion header transparent and change the font colot */
.my-accordion .x-accordion-heading a,
.my-accordion .x-accordion-heading .x-accordion-toggle {
  background-color:transparent;
  color:#5eaff1;
  font-family: Arial,
  font-size: 15px;
}

/* To make the accordion body transparent and change the font colot */
.my-accordion .x-accordion-body .x-accordion-inner {
  background-color:transparent;
  color:red;
  border: none;
  font-family: Arial,
  font-size: 15px;
}

Let us know how this goes!

#9

Hi Nabeel,

Will this work for google fonts as well

In particular i need to use Neem Rufi

Thanks

brent

#10

oops. that should be Reem Kufi

#11

Hi Brent,

Yes that will work, you just need to Change Arial with your own font.

eg.

font-family: 'Reem Kufi', sans-serif;

Make sure to add google web font first by adding the code below in your child theme’s functions.php file.

function wpb_add_google_fonts() { 
    wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Reem+Kufi&subset=arabic', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

For more information kindly refer to this link

Hope that helps

#12

Hi,

That worked great! thanks again for the fantastic support!!

brent

#13

You’re welcome! :slight_smile:

#14

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