Meta Box

Can I add custom CSS for a post based on a Meta Box field state?

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 14, 2019 at 8:12 AM #13314
    hartsook@gmail.com[email protected]
    Participant

    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?

    February 14, 2019 at 3:52 PM #13324
    Anh TranAnh Tran
    Keymaster

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

    February 14, 2019 at 5:26 PM #13340
    hartsook@gmail.com[email protected]
    Participant

    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

    February 14, 2019 at 5:33 PM #13341
    hartsook@gmail.com[email protected]
    Participant

    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.

    February 17, 2019 at 9:02 AM #13377
    hartsook@gmail.com[email protected]
    Participant

    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.

    February 19, 2019 at 10:06 AM #13402
    hartsook@gmail.com[email protected]
    Participant

    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.

    February 22, 2019 at 4:31 PM #13434
    Anh TranAnh Tran
    Keymaster

    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.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.