Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 27, 2017 at 2:13 pm #857502
    milanissimo85

    Hello

    Recently I deployed another website using Enfold (Based on Enfold Medical demo) and I have been trying to integrate The Events Calendar notifications into the front page.

    I’ve put both Upcoming events and Events countdown widgets into a color section in order to separate it from other content (image 01). However, when the event has passed or there are no scheduled events, there is a empty thick blue strip (image 02). I’ve tried to hide the color section using :empty css selector and looked through the Support forum but the solutions I found didn’t work. My desired look is to display nothing in case no event is scheduled (image 03).

    Since this is a live website, I pulled the entire color section with the Events Calendar widgets so unfortunately I can only provide pictures.

    I have some other questions about styling, but I will open separate threads for them.

    Thank you for any assistance

    September 27, 2017 at 4:00 pm #857564
    Jordan Shannon

    Hey milanissimo85,

    This would have to be handled via JavaScript if/else logic which goes beyond the scope of support here in the forums. We do offer freelance services which would be able to help you http://kriesi.at/contact/customization

    Best regards,
    Jordan Shannon

    September 27, 2017 at 4:55 pm #857615
    milanissimo85

    Hello Jordan

    Thanks for quick reply. I have a follow up question then. Is it possible to reduce the height of empty color section to around 5px via CSS? The best I could do was to set padding to “small” as is shown on Image 02 and it’s too tall. If it was around 5px, I would keep it as a separator between the slider and main content.

    Thank you

    September 27, 2017 at 11:09 pm #857736
    Jordan Shannon

    Hi,

    Will the color section always be empty? If so you can target this class (you can user browser inspector to get it) and simply use css to adjust the height. If you have a link to the site/page/section in question I can give you the appropriate class and css to do so.

    Best regards,
    Jordan Shannon

    September 28, 2017 at 9:08 am #857894
    milanissimo85

    Hi Jordan

    No, the section won’t be always empty. If there is an event scheduled, there will be a timer and the icon, just like it’s shown on image 01. Otherwise I’d like to keep it around 5-10px max so it doesn’t draw as much attention. If it’s too complicated, I might set it the same height as the menu above the slider and leave it like that.

    September 28, 2017 at 10:49 am #857934
    Victoria

    Hi milanissimo85,

    It’s very hard to provide you with any solutions without seeing the actual html.
    Would be much easier if you could give us a link to the website with the element in question.

    Best regards,
    Victoria

    September 28, 2017 at 10:59 am #857938
    milanissimo85

    Hello Victoria

    I have recreated the element (currently without The Events Calendar shortcodes) and named it “evcal”. It’s right under the slider on the front page I provided in private content.

    September 28, 2017 at 1:00 pm #858006
    Victoria

    Hi,

    Best regards,
    Victoria

    September 29, 2017 at 9:23 am #858362
    milanissimo85

    Hello Victoria, I’d like it to be around 5px, but if it would be too complicated, I can live with the current height.

    September 29, 2017 at 6:08 pm #858561
    Jordan Shannon

    Hi,

    Yes, apologies, but that would require additional JS scripting to produce and unfortunately that goes beyond the scope of support here in the forums. Essentially you need an if/else statement to be written.

    Best regards,
    Jordan Shannon

    October 2, 2017 at 9:13 am #859149
    milanissimo85

    Thank you Jordan, I will leave it as is for now. You can close the thread.

    October 2, 2017 at 12:52 pm #859207
    Rikard

    Hi,

    Thanks for the feedback. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Hide color section if empty’ is closed to new replies.