X
335751

Change look of tooltip

Hi there,

I like to change the look (font, colors and paddings) of the tool-tip in FulCal.
Could you please let me know the right CSS code for this?
Unfortunately I cannot get the correct css-selector.

Many thanks.

Br
Jens

BY: Jens Greeb - Jan 8,2024 AT 3:40PM - 1 year ago
    • Rito Karim Romo de Velasco Jan 8,2024 AT 10:17PM - Posted 1 year ago - #335771

      Hi there, try this.


      /* Calendar: ToolTip. (Addon option) */
      .evoFC_tip {
      border-radius: 2px;
      background-color: #151515 !important; /* Calendar: Force Bg. */
      padding: 3px;
      color: #ffcc00 !important; /* Calendar: Force Color. */
      font-weight: 600;
      font-size: 14px;
      line-height: 1.5714285714285714em;
      }


      /* EventOn: Filter ToolTip (Global option: Event filtering options to show on the calendar). */
      .evo-filter-btn em.o {
      right: 0;
      margin-top: -10px;
      border-radius: 2px;
      background-color: #151515 !important; /* Calendar: Force Bg. */
      padding: 0 5px;
      color: #ffcc00 !important; /* Calendar: Force Color. */
      font-weight: 600;
      font-size: 14px;
      line-height: 1.5714285714285714em;
      }

    • Jens Greeb Jan 8,2024 AT 11:25PM - Posted 1 year ago - #335779

      Hi,

      thanks for reply. Unfortunately this doesn’t fix the problem. Both styles don’t change anything.
      Just to make sure: please have a look on the attached image. This is the tooltip I’m talking about.

      Thanks for help.

      Br
      Jens

    • Rito Karim Romo de Velasco Jan 9,2024 AT 12:58AM - Posted 1 year ago - #335782

      This is your style.


      /* Check this: name */
      .evofc_title_tip {
      max-width: 100%;
      pointer-events: none;
      position: absolute;
      background-color: #fff;
      color: #7a7a7a;
      line-height: 110%;
      font-size: 10px;
      font-style: italic;
      z-index: 999;
      -webkit-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.06);
      -moz-box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.06);
      box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.06);
      }


      /* Check this: Tooltip number */
      .evofc_title_tip .evofc_ttle_cnt, .evofc_title_tip.topper.lefter .evofc_ttle_cnt {
      position: absolute;
      text-align: center;
      font-style: normal;
      margin-top: 5px;
      background-color: #949393;
      border-radius: 15px;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      padding: 10px;
      top: 0;
      left: 0;
      right: auto;
      margin-top: -15px;
      margin-left: -15px;
      z-index: 5;
      }


      /* Check this: Tooltip position number */
      .evofc_title_tip.topper .evofc_ttle_cnt {
      left: auto;
      right: 0;
      margin: -15px;
      }

    • Artem Jan 9,2024 AT 4:14AM - Posted 1 year ago - #335827

      Hello,

      Please try this code:

      .eventon_fullcal ul.evofc_ttle_events li { background: red; border-color: red !important; color: red !important; }

      Add it to wp-admin > Appearance > Themes > Additional CSS.

      You can add padding as well.

You must login to reply to this ticket

HelpDesk

Welcome to EventON helpdesk.

EventON is the #1 Best selling event calendar plugin for WordPress websites in envato marketplace.

Checkout EventON