[Resolved] Background colors and images from custom field to css

[Author]

Posts

[Lykke Scavenius]

I've created some custom post types "Themes"(subjects) and "Methods", that will replace a lot of pages.

The pages are designed and edited individually, their design and content is similar, and the new post types uses a content template, to solve this.

I'm stuck here, I need to use images and colors defined in each custom post, for background images and background colors, "in" the content template.

This custom post:
hidden link

Has to replace this page:
hidden link

I am trying to match the design.

I've added the image and defined a background color in the custom posts.
I've added CSS classes to the rows that needs individual backgrounds. The overall design of the content template is made with Bakery Builder.

Can you help me figure out, how to make this work? There must be some way.

Kind regards
Lykke

PS. the color picker is problematic, because even though the color selection is fine, you can't see the selected color, I'm not sure my clients will be too happy about it, as they will need to save and check the page to see the color.

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi Lykke,

Thank you for contacting us and I'd be happy to assist.

If your goal is to dynamically set the background image and color for the top banner section with the class "tema-banner", you can add a text/HTML widget in the Bakery Builder and add the styles like this, making use of the "Type Fields API":
https://toolset.com/documentation/customizing-sites-using-php/functions/

Example:

<style>
.entry-content .vc_row.tema-banner {
background-size: cover;
background-repeat: no-repeat;
background-color: [types field='book-color'][/types];
background-image: url([types field='book-image' output='raw'][/types]);
background-attachment: scroll;
}
</style>

Note: Please replace "book-color" and "book-image" with the actual slugs of your fields.

About the color picker, I'm afraid, I can't think of any other way around it. If the user is setting the data in the admin area, he/she will have to check the output on the front-end.

regards,
Waqar