[Resolved] Custom field color to change element background

Hi there,

Unfortunately that’s not what custom field is for.

You’d need to create a header element/page hero for each category.

Where did the color picker come from?

A third party plugin?

You would need to output the Custom Fields value into your own CSS that can hooked into wp_head:

See this topic here for an example using regular Custom Fields:

https://generatepress.com/forums/topic/using-custom-field-page-values-in-element-header/#post-985694

The principles are exactly the same for ACF – you would just need to use ACF to get the variable in place of this:

$css = get_post_meta(get_the_ID(), 'css', true);

I would set your fallback color in the Header Element, so if the ACF field is empty it will still have a color.

Then that code you have just needs hooking into the wp_head. And it should grab the ACF colors from wherever you set them.

I want it to retrieve the category_background_color custom field, either when on the category page or post page.

In that case, you’ll have to add in an if condition within your snippet.

Example:

<?php
$css = get_field("category_background_color", $category_id);
if( is_single() && in_category( $category_id ) ){
    if (!empty($css)) { ?>
        <style type="text/css">
            <?php echo '.page-hero {background_color: ' . $css .';}'; ?>
        </style>
        <?php }
    }
?>

The if( is_single() && in_category( $category_id ) ) condition basically checks if the page is a single post and is in the category specified by $category_id.

And as David mentioned, you should hook it to wp_head with the Hook Element or by adding it on your functions.php which will look something like this:

<?php
add_action( 'wp_head', function(){ 
$css = get_field("category_background_color", $category_id);
if( is_single() && in_category( $category_id ) ){
    if (!empty($css)) { ?>
        <style type="text/css">
            <?php echo '.page-hero {background_color: ' . $css .';}'; ?>
        </style>
        <?php }
    }
});
?>

Your original request was for changing the background color ? Did that work ?
If so then we can use the same method to output the CSS for the cat-first-letter element.

Let me know

Hi,

.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];

Since they’re both within the Header element:

For the first link, you can add this within the Header Element’s code area in this manner:

<style>
.cat-first-letter {
	font-size: 3rem;
	background: [category_background_color];
}
</style>

As for the second link, its basically the same procedure, except you just change the CSS selector to wps-dropcap as it is the selector the second link is using.

example:

<style>
.wps-dropcap {
	font-size: 3rem;
	background: [category_background_color];
}
</style>