Meta Box

Applying class to output

Support › MB Settings Page › Applying class to output

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 23, 2017 at 6:37 AM #6727
    janekjanek
    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?

    August 23, 2017 at 9:08 AM #6729
    Truong GiangTruong Giang
    Participant

    Hi there,
    You can use something like this:

    
<div class="anyclass">
    [rwmb_meta meta_key="text_6" type="text"]
</div>
    August 23, 2017 at 9:21 AM #6730
    janekjanek
    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.

    August 23, 2017 at 4:41 PM #6734
    ludovic.meyerludovic.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

    August 25, 2017 at 10:43 PM #6765
    Anh TranAnh Tran
    Keymaster

    @ludovic.meyer: Cool trick! Thanks.

    August 26, 2017 at 10:32 AM #6773
    janekjanek
    Participant

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

    September 5, 2017 at 8:38 AM #6875
    janekjanek
    Participant

    That worked perfectly. Thank you. 😀

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Applying class to output’ is closed to new replies.