How to get Accent Color variable

BB Theme
1

I’d like to use the accent color in other parts of my child theme. What’s the best way to do that? Is it a simple CSS class? Or do I need to access it via PHP? In the latter case, what’s you preferred convention for doing so?

Thanks!

2

Hey Skyler,

Thanks for getting in touch! The only way to style all the other elements in your site would be via custom CSS.

Ben

3

That’s fine, but is there a way for me to at least access the color and put it in a PHP variable?

4

Thanks for your reply by the way :slight_smile:

5

Hi Skyler,

All of the settings are stored in the database as theme mods. You can access the accent color (or any setting for that matter) by using…

$mod = get_theme_mod( 'fl-accent' );

Let me know if you have any questions about that.

Justin

6

Hello guys!

I am trying to accomplish the same thing here. I am interested in having some custom CSS that uses the accent color.

With this approach, Do I need to create a PHP file and use it as a CSS? I am not to savvy of this stuff :S

Thank you!

7

I used some styles in the header to create a class for the accent color, which I could then apply to the necessary elements throughout the body of the site. There are more elegant solutions, but it’s a great stop gap for now.

8

Hello Skyler!

Thank you for your reply! This sounds good. Are you using a Child Theme?

I am trying to figure out how to add this to the header without loosing the header options or loosing the chagned when updating.

Thank you!

9

Hey Carlos,

Yes, you’ll need to use a child theme to accomplish this. Here’s an example of what you can add to your child theme’s functions.php file (untested)…

<?php
    
function my_custom_css()
{
    $accent = get_theme_mod( 'fl-accent' );
    
    ?>
    <style>
    
    .my-css-class {
        color: <?php echo $accent; ?>
    }
            
    </style>
    <?php
}

add_action( 'wp_head', 'my_custom_css' );

Justin

10

What Justin said is exactly what I did. Next time I’ll post my code too :slight_smile:

I actually always use a child theme, so that I can make modifications later without erasing current theme settings. It’s kind of like, “why not?”.

11

Awesome! Don’t be shy, we love when people share their code :wink:

Justin

12

Hello Guys!

Thank you for your help. It is working nicely.

13

Hello!

I am back.

I already tried the code and it working great for ‘fl-accent’. However, I tried using the same code with ‘fl-body-text-color’ with no luck. I shows as if thet field was empty, but it is not.

Here is a copy of my code:

function wr_custom_css()
{
    $accent = get_theme_mod( 'fl-accent' );
    $colordecontenido = get_theme_mod( 'fl-body-text-color' );
    
    ?>
    <style>
    
    .wr-bg-accent  {
        background-color: <?php echo $accent; ?>
    }
    
    .wr-border-accent .fl-col-content {
    	border-color: <?php echo $accent; ?> !important
    }
    
    .wr-content-accent, .wr-h3-accent h3 {
    	color: <?php echo $accent; ?>
    }
    
    .contact-callout-row h3 {
    	color: <?php echo $colordecontenido; ?>
    }
    
    .contact-callout-row .fl-icon i {
    	background-color: <?php echo $accent; ?>;
    	color:white;
        line-height: 52.5px;
        height: 52.5px !important;
        width: 52.5px !important;
        text-align: center;
    }
            
    </style>
    <?php
}

add_action( 'wp_head', 'wr_custom_css' );

Please advice.

Thank you!

14

Hey Carlos,

I just tried using your function on my local dev and it works just fine. Changing the Text Color under General > Text changes the color of text on modules having the class name.

Ben