Custom Fields
Support Meta Box Conditional Logic Can I add custom CSS for a post based on a Meta Box field state?

  • Creator
  • #13314

    Using: Genesis theme, Beaver Builder, All-in-One-Calendar and Meta Box.

    I've created a MB field group that lets one select an Event post as a repeating event and then display the Day of the week and time. But the default Event display also shows the first instance date when the Event is created and I want to hide that on repeating events.

    Currently I'm using custom CSS to hide that selector based on postid, but I have to add that manually for every new repeating event. e.g.

    .postid-5460 .ai1ec-time.ai1ec-row,
    .postid-5564 .ai1ec-time.ai1ec-row {display:none;}

    Is there a way using MB to add the CSS .ai1ec-time.ai1ec-row {display:none;} automatically to each page where the conditional logic is set to a repeating Event?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
  • #13324
    Anh Tran

    Can you please give a screenshot on what you're trying to do? Is the event datetime a repeating group?


    single instance of a repeating Event post with the initial date hidden

    This is what the default format looks like with the initial event date displayed

    The MB fields are not repeating fields
    MB fields

    Here's the UI when editing an Event
    MB fields when editing an Event


    To be clear, the custom post type is an Event type created by All-in-One-Calendar plugin not a MB custom post type. I'm just trying to tweak it because I'm using Beaver Builder to display these posts in a post grid in addition to the normal calendar views the calendar plugin offers.

    But to generalize, it would be useful if I could insert CSS styles on a page based on MB Conditional Logic, not just for these Calendar Events, but anywhere I would use MB I could hide or override CSS styles on any element on the page with a CSS selector.

    If for example the MB selection is #1 then the #section-heading might be set to blue, if #2 - red, if #3-yellow, etc. So using MB to invoke CSS to style non-MB elements on a page.


    duh! Just remembered I can set custom CSS for the Beaver Themer singularpost template

    I put the CSS code .ai1ec-time.ai1ec-row {display:none !important;}
    in the Themer Singular template that I use to display all the Events, so that solves the immediate problem. But to make this work I had to make 2 Themer templates, one applied to Events with category = repeating and one that excludes category = repeating (without the css in the template)

    Still it would be great if MB had a CSS "field" that could insert custom CSS onto a page to style elements based on MB conditional logic.


    I was able to make this work, but not perhaps most elegantly, by using the textarea field and defaulting to:

    <style>.ai1ec-time.ai1ec-row {display:none !important;}</style>

    Then with conditional logic I hide that field in the metabox if the user chooses that this is a "repeating" event.

    I then use Beaver Tbemer to insert an html module at the top of the content area for the repeating events Themer Layout so that <style> code gets inserted before the target selector gets called on the page.

    I was not able to get this css style to work on an existing MB field if I put it into the html before or after field for other fields that appear at the top of a repeating event post.

    Anh Tran

    I think your solution is great. It might be a little bit tricky, but it works. While working with BB, I also did some tricks like that.

    I'm thinking about another (similar) solution that might not need an textarea. I'd insert an HTML module with the CSS code, and use BB's Conditional Logic to hide it when the event is not repeatable. I think it's shorter than your solution.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.