Skip Navigation

[Resolved] Selecting background color of a post in View loop, based on a custom field

This support ticket is created 2 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 4 replies, has 2 voices.

Last updated by alexG-4 2 years, 9 months ago.

Assisted by: Waqar.

Author
Posts
#2061463

I know it is possible to select a background image to display in a view loop, as explained here
https://toolset.com/forums/topic/background-image-inview-loop/

But I wish to select a background COLOR rather than an image, based on a custom field of the post type being displayed.

I can't that this is possible using the View Block. Is that so, or am I missing something?

Thanks

Alex

#2062415

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Alex,

Your observation is correct and in the block settings, there is no option to set the dynamic background color from the custom field.

But you can use a 'Fields and Text' block to insert some custom CSS code that uses the custom field value.
(please make sure to use 'HTML' mode)

For example, suppose you have a color type custom field 'post-color', and the container block where you'd like to show this dynamic background color has a class 'special-container'.

The CSS code, in this case, will look like this:


<style>
.special-container {background: [types field='post-color'][/types];}
</style>

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#2062707

Hi Waqar

Thanks for that suggestion.

Unfortunately, I'm displaying several posts at once, so the background colour for ALL of them ends up being that of the last one to be rendered.

One option would be to create a single-colour image for each post and use the background image mechanism, but that's beginning to make it more trouble than it's worth.

Alex

#2064387

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Thanks for writing back.

In case of multiple items coming from the view, you can extend this workaround further.

1. You can wrap the contents of the individual post/loop item inside a "Container" block. And in the ID field of this container, you can insert 'special-container-[wpv-post-id]' to dynamically generate the unique ID using the current post's ID.
( screenshot: hidden link )

2. And in the loop, you can include the 'Fields and Text' block, to add the dynamic CSS code for each item's unique background, like this:


<style>
#special-container-[wpv-post-id] {background: [types field='post-color'][/types];}
</style>

This works on my test website.

#2065089

Brilliant!

Thanks so much Waqar.

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.