[Resolved] Styling Field Labels

[Author]

Posts

[jonathanR-5]

Hello, is there a way to do this now? https://toolset.com/forums/topic/show-field-label-2/
I'm using the shortcode method and want to bold the labels like "Research and Teaching Interests:" here: hidden link

[Nigel]

That linked thread covers a few aspects of a problem, what exactly is it that you need to be able to do.

If you are outputting a Types field using a shortcode you can just preface the field with a hard-coded label using strong tags or some CSS styling.

Can you clarify where and how you are outputting the field? (If you were using the block editor, for example, you'd need a different approach when using the Single Field block to output the field value.)

[jonathanR-5]

I'm using the following shortcodes for example:
[types field='address' show_name='true'][/types]
[types field='phone' show_name='true'][/types]
[types field='email' show_name='true'][/types]

I need to bold some of the labels (i.e. "Address", "Phone" etc.) but looking at the source code, it's not possible to isolate the label field with CSS since the label and field text are both surrounded by one <p> tag. I didn't find a way to do this via block editor, to dynamically generate the labels with the field text.

[Jamal]

Hello there! If you don't mind, I'll continue with you on this ticket. What about adding a the labels manually, and hiding it from the shortcode. Something like:

<p><strong>Address:</strong>[types field='address' show_name='false'][/types]</p>
<p><strong>Phone:</strong>[types field='phone' show_name='false'][/types]</p>
<p><strong>Email:</strong>[types field='email' show_name='false'][/types]</p>

Or something like:

<dl>
      <dt><strong>Address:</strong></dt>
      <dd>[types field='address' show_name='false'][/types]</dd>

      <dt><strong>Phone:</strong></dt>
      <dd>[types field='phone' show_name='false'][/types]</dd>

      <dt><strong>Email:</strong></dt>
      <dd>[types field='email' show_name='false'][/types]</dd>
</dl>

Notice the  show_name='false' attribute in the types shortcode.

I hope this helps. Let me know if you have any questions.

[jonathanR-5]

I don't want to do it that way because if a field is empty, I don't want the label to show up. So, the labels need to be dynamically generated with the field value.

[Jamal]

Unfortunately, that's the only way to have more control over the generated markup. You can wrap it inside conditional shortcodes to only display it when the field has a value.

<p>
    [wpv-conditional if=( ( $(wpcf-address) ne '' ) )]
        <strong>Address:</strong>
        [types field='address' show_name='false'][/types]
    [/wpv–conditional]
</p>

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-conditional
Notice the prefix "wpcf-" inside the conditional shortcode.

[jonathanR-5]

Thanks but it doesn't seem to be working, the word Address shows up even when there is no address and the closing shortcode tag is also appearing [/wpv–conditional]. See this page as an example: hidden link

I'm using the code you provided:

[wpv-conditional if=(( $(wpcf-address) ne ''))]
Address:
[types field='address'][/types]
[/wpv–conditional]

[jonathanR-5]

I still need assistance!

[Jamal]

I would say, there is a copy/paste issue. Otherwise, the closing shortcode [/wpv–conditional] would not appear on the frontend.

Can I log in to your website and check this further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[jonathanR-5]

Thank you! It was a copy paste issue.