Color of Caption in Photo Module

Beaver Builder
1

Can you tell me how I’d go about changing the color of the text in a Photo Module Caption to white (#ffffff). CSS?

2

Also, how would I go about increasing the width of the border in the Tabs Module? CSS?

3

One last question for today… How can I bold the text on the active tab for a Tabs Module. So, far I was able to make the following changes using CSS I found in the discussion forums:

.fl-tabs-panels {
color: #000000;
}

.fl-tab-active {
color: #000000;
}

.fl-tabs-labels {
color: #ffffff;
}

4

Hi Kandi,

Would it be possible for you to provide a link to the site in question, please?

Thanks,
Danny

5

Hi Danny,
Here’s the link: http://performex.monctonos.ca/index.php/research-behind-solutions/ The Tabs Module is below the two infographics. Any help you can provide would be greatly appreciated.
Kandi

6

Hey Kandi,

Try the CSS snippets below and see if it’s what you’re after. You can remove the .fl-tab-active part on your CSS above. :slight_smile:

/* Change color of the Photo module's caption */
.fl-photo-caption {
  color: #FFF;
}
/* Make active tab bold and white */
.fl-tab-active.fl-tabs-label {
  color: #000000;
  font-weight: bold;
}

Ben

7

Awesome, Ben! Looks great! Thanks so much. Just one last question from above: How would I go about increasing the width of the border in the Tabs Module? CSS snippet?

8

Hey Kandi,

Try the code below. Make sure all of the values are equal, including the top property. :slight_smile:

.fl-tabs-horizontal .fl-tabs-label.fl-tab-active {
  border-width: 2px;
  top: 2px;
}
.fl-tabs-panels {
  border-width: 2px;
}

Ben

9

Hi Ben, Your CSS snippet worked perfectly. Thanks! One more question… For the Accordion module, I figured out how to change the color of the button icon. Can you help me with changing the color of the button outline. Here’s the link to the page:
http://performex.monctonos.ca/research-behind-solutions/

I’d like to change the color of the outline of the 4 buttons to the same green as the icon (#C5D632).
Kandi

10

Hi Kandi,

To change the color of the border for all accordions. You can use the following CSS:

.fl-module-accordion .fl-accordion-item {
  border: 1px solid #C5D632;
}

Thanks,
Danny

11

Quick question: where are you putting all this css? I’m hoping to modify many of the same things.

edit: nevermind! I wasn’t sure if I was supposed to put it in global stylesheet or one of the BB plug-in stylesheets, but when I put it in my global stylesheet, it worked.

12

Hi Jacks,
I use the free plug-in called Simple CSS. When I want to add a CSS snippet, I go to:
Dashboard–> Appearance–> Customize–> Active Theme: Beaver Builder Child Theme–> Simple CSS

It’s neat because once you drop in the snippet, you can see the changes right away on the page.

I know it’s important that you add the CSS to the child theme. If you don’t, you could lose your customizations if changes are made to the parent theme.

Glad my questions helped you too :slight_smile:

Kandi

13

Hey guys,

Just to answer Jack’s question, you can place CSS lines on either Tools > Global Settings > CSS, or Tools > Layout Settings > CSS. The difference between the two is that the latter only adds the code to that page alone, while the former adds the code to all the pages.

Hope this helps! :slight_smile:

Ben

14

When I add the CSS snippets to the plugin Simple CSS, the code is added to all of the pages in the site.

15

Hi Kandi,

That is how most CSS plugins will work, they will apply that style to all your pages. If you want to apply your styling to a specific page you will need to prefix the CSS with the page-id-x (replacing x with the page id).

Alternatively, you can use the Layout Options that Ben mentioned above.

Thanks,
Danny