Skip Navigation

[Resolved] HTML class or background filled with custom filled

This support ticket is created 3 years, 10 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
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 10 replies, has 2 voices.

Last updated by stefanp 3 years, 10 months ago.

Assisted by: Nigel.

Author
Posts
#1619181

Hi,

I was wondering of it's possible to use custom fields to fill either a class or a background color. For instance, I created a custom field, a select list, with a choice of 4 colors.

Is it possible possible to use it like this?

<div style="background:[types field='couleur' output='raw'][/types]">
whatever inside
</div>

In the same spirit, would it be ok to do something like this?
<div class="[wpv-post-taxonomy type="category" format="name"]">
whatever inside
</div>

As I'm trying to apply a different color according to which category the custom post type I created is associated with.
The site is still under construction, so no worries there.

Maybe I'm trying to achieve that but going totally the wrong way: I'd be grateful if you could point me towards the right direction.
Thanks!

#1619693

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Stefan

Did you try it?

It should work, when creating templates with the classic editor in any case.

There, you have a markup editor where dynamic content comes from shortcodes. It doesn't matter where in the markup the shortcodes are, e.g.

<div>[wpv-post-id]</div>

or

<div id='[wpv-post-id]'>Whatever</div>
#1619783

Hello Nigel,

Yes, I did try: the background <div> is displayed white (or blank) if I use that piece of code:
<div style="background:[types field='couleur' output='raw'][/types]">

I also tried that : <div class="[wpv-post-taxonomy type="category" format="name"]"> but only he <div> is displayed, without the class element.

#1619865

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Check what exactly those shortcodes output just on their own to see that it makes sense to use them where you do.

I just tried this, for example, and it worked:

<div style="background-color: [types field='some-text'][/types]" class="[wpv-post-taxonomy type="colour" format="slug"]">Some text</div>

On the front-end the div had a blue background and a class of "red" added.

#1623549

Hello Nigel,

I did try to insert this into a view:
[types field='couleur' output='raw'][/types] => this works fine

However, this (in Toolset Views): <p style="color:[types field='couleur' output='raw'][/types]">test</p> is displayed as <p>test</p> on the front end.
Same thing goes for the background or class I would add, they're just stripped off.

To be more precise, I have built a view which I put inside a text module (Divi theme) using a shortcode. I don't understand why the class and styles are stripped though, unless it is running as it should.

Could you tell me where you used your code: inside a view and then using a shortcode to display it or elsewhere?

Thanks for your time and patience
Best regards,

#1623847

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2020-05-14 at 08.05.21.png

Hmmm.

I was using a content template, so I just tried this with a View, inserted into a Divi text module, and it still worked (you can see the generated markup in the screenshot).

I tried various different things in an attempt to make it not work, but couldn't, it always worked.

I'm guessing something else is in play on your site.

Can you try this with as minimal an installation as possible? Disable all plugins except Types and Views. Also try it without Divi (on a page using the classic editor, and after switching theme if necessary).

#1623923

Hello Nigel,

Yes, I figured I would have to test that on a blank WordPress installation. I'll keep you posted if I manage to find the culprit, let you know what might be causing this.

Best regards,

#1624279

Hello Nigel,

I spent most of the day to try and solve this. On a blank empty installation, I noticed that I had to comment this line in wp-config.php to make it work properly:
define( 'DISALLOW_UNFILTERED_HTML', true );

Otherwise, it strips the class and style from the div and p tags. I just found out, thought I'll let you know.

#1624283

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Thanks for sharing. That's not a standard wp-config.php entry, I'm not sure what adds it.

#1624307

"That's not a standard wp-config.php entry, I'm not sure what adds it."

=> I did, to increase website security 🙂

#1624309

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.