Applying class to output

This topic has 6 replies, 4 voices, and was last updated 7 years, 3 months ago by janek.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
August 23, 2017 at 6:37 AM #6727

janek
Participant

Hi all,

Trying to style an output that uses the Metabox shortcode:

[rwmb_meta meta_key="text_6" type="text"]

I tried the class value in advanced but my understanding is that this only applies a class to the backend metabox not the output on the frontend.

Is there any way to style a shortcode output on the frontend in settings or elsewhere?

Add New Note to this Reply

August 23, 2017 at 9:08 AM #6729
Truong Giang
Participant
Hi there,
You can use something like this:
```
<div class="anyclass">
    [rwmb_meta meta_key="text_6" type="text"]
</div>
```
Add New Note to this Reply
August 23, 2017 at 9:21 AM #6730

janek
Participant

Hi Truong,

Is it possible to make it so the class CSS styling doesn't apply when the shortcode value is empty.

For example I have multiple shortcodes for metaboxes sitting in a widget, without assigning a class to apply padding above each shortcode the outputs run into each other. However if I apply a class and style it with padding above the problem then is if I dont have a value/output for one of the metaboxes it still applies the css padding which leaves a gap between the shortcodes.

I've taken a screenshot of the backend and the frontend metaboxes I'm using

http://imgur.com/a/f8FAg

You can see I haven't populated the Videos metaboxs and thats causing a huge gap to appear between the forms and the links due to the padding I've added to the shortcode.

Add New Note to this Reply

August 23, 2017 at 4:41 PM #6734
ludovic.meyer
Participant
Hello Janek,

I think you can use Truong solution in addition with the :empty css selector
```
.anyclass {
    padding: 10px;
}
.anyclass:empty {
   padding: 0;
}
```
That should work.

Or you can create your own shortcode which verify the content of rwmb_meta before display it.

Hope it helps

Add New Note to this Reply
August 25, 2017 at 10:43 PM #6765

Anh Tran
Keymaster

@ludovic.meyer: Cool trick! Thanks.

Add New Note to this Reply

August 26, 2017 at 10:32 AM #6773

janek
Participant

Thanks Ludovic, I'll try this when I'm back at work on Monday. 🙂

Add New Note to this Reply

September 5, 2017 at 8:38 AM #6875

janek
Participant

That worked perfectly. Thank you. 😀

Add New Note to this Reply
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Applying class to output’ is closed to new replies.