CSS Render Bug in Title

  • Resolved Patrick

    (@uentooser)


    3 months, 2 weeks ago

    As shown in the screenshot, the event title is rendered with mixed text colors. Within the same title, some characters are grey while others are black.

    This only happens when using the Sugar Calendar widget inside Elementor. The issue does not appear to be intentional styling, but rather inconsistent CSS being applied to different parts of the title markup.

    Do you know why the title is split into elements with different text colors, and whether this is expected behavior or a known issue?

    • This topic was modified 3 months, 2 weeks ago by Patrick.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Patrick

    (@paddyam)

    3 months, 2 weeks ago

    Hi @uentooser,

    Thanks for reaching out, and sorry to hear about the challenge with the events title styling.

    I reviewed the widget display on your site, and it appears that you have some styling from the Elementor end that’s overriding the event title styles on the widget. I, however, tested this on my end with no luck replicating it.

    To prevent this, could you please try adding the following CSS snippet?

    /* Override global heading styles for Sugar Calendar event titles */
    .sugar-calendar-event-list-block__plainview h1,
    .sugar-calendar-event-list-block__plainview h2,
    .sugar-calendar-event-list-block__plainview h3,
    .sugar-calendar-event-list-block__plainview h4,
    .sugar-calendar-event-list-block__plainview h5,
    .sugar-calendar-event-list-block__plainview h6 {
      font-family: inherit !important;
      text-decoration: none !important;
      color: inherit !important;
      -webkit-text-fill-color: currentColor !important;
    }

    /* Ensure event title links render uniformly */
    .sugar-calendar-event-list-block__event__title a,
    .sugar-calendar-event-list-block__event__title a:link,
    .sugar-calendar-event-list-block__event__title a:visited,
    .sugar-calendar-event-list-block__event__title a:hover,
    .sugar-calendar-event-list-block__event__title a:focus {
      font-family: inherit !important;
      text-decoration: none !important;
      color: inherit !important;
      -webkit-text-fill-color: currentColor !important;
    }

    /* Normalize nested inline elements inside the link */
    .sugar-calendar-event-list-block__event__title a * {
      font-family: inherit !important;
      color: inherit !important;
      -webkit-text-fill-color: inherit !important;
    }

    I hope this helps.

    Thread Starter Patrick

    (@uentooser)

    3 months, 2 weeks ago

    Thanks @paddyam it’s fixed with your work around.

    Thread Starter Patrick

    (@uentooser)

    3 months, 1 week ago

    @paddyam unfortunately I have the same problem in the overview: https://madojo.de/termine/ can you send me the custom css for these as well?

    Plugin Support Patrick

    (@paddyam)

    3 months, 1 week ago

    Hi @uentooser,

    Thanks for the follow-up, please add the following snippet to fix the issue on the second shared page. 

    /* Override global heading styles for Sugar Calendar event titles */
    .sugar-calendar-event-list-block__listview h1,
    .sugar-calendar-event-list-block__listview h2,
    .sugar-calendar-event-list-block__listview h3,
    .sugar-calendar-event-list-block__listview h4,
    .sugar-calendar-event-list-block__listview h5,
    .sugar-calendar-event-list-block__listview h6 {
      font-family: inherit !important;
      text-decoration: none !important;
      color: inherit !important;
      -webkit-text-fill-color: currentColor !important;
    }

    I hope this helps.

Viewing 4 replies - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.