Okay
  Public Ticket #1678801
Button color on Individual Event Page
Closed

Comments

  •  1
    Sheryl L started the conversation

    The Google Calendar and ICal Export buttons have blue text on a dark gray background and are totally illegible. They're fine on hover (light gray w/purple text). How can I change the button or text color? This is the same whether the stylesheet is set to Full Styles or Tribe Events Styles. Skeleton Styles works, but it's ugly. :(

    Attached files:  Events_Buttons.png

  •  1
    Sheryl L replied

    Following up since I haven't received a response.

  •  115
    Charles replied

    Hi Sheryl, 

    Thanks for following up. Try this (swapping out these colors for your own): 

    /* TRIBE CAL BUTTONS */
    .tribe-events-cal-links .tribe-events-button {
        background-color: #21759b !important;
        color: white !important;
    }
    /* TRIBE CAL BUTTONS - HOVER */
    .tribe-events-cal-links .tribe-events-button:hover {
        background-color: white !important;
        color: black !important;
    }
    

    Attached files:  screenshot-polytechnic.themeisland.net-2018-08-28-18-31-06.png
      screenshot-polytechnic.themeisland.net-2018-08-28-18-30-21.png

  •  1
    Sheryl L replied

    Thanks, that worked perfectly for the export buttons on the individual events pages. But it didn't change the export events button at the bottom of the monthly view page.

  •  115
    Charles replied

    Try this, and swap out the values. I generally stay away from !important, but as long as we are being very specific and organized in the management of this, you should be fine

    .tribe-events-ical.tribe-events-button {
        color: #afafaf !important;
        background-color: #fff !important;
    }

  •  1
    Sheryl L replied

    Thanks. That works. I would like the background color to change on hover like the CAL buttons at the top of the individual event pages. So I copied the code you gave me for that and just changed ".tribe-events-cal-links" to .tribe-events-ical-links." That didn't work, so I must be missing something. Would you please correct the code:

    /* TRIBE CAL BUTTONS */
    .tribe-events-cal-links .tribe-events-button {
        background-color: #592164 !important;
        color: white !important;
    }
    /* TRIBE CAL BUTTONS - HOVER */
    .tribe-events-cal-links .tribe-events-button:hover {
        background-color: #3c5b81 !important;
        color: white !important;
    }
    /* TRIBE I-CAL BUTTON */
    .tribe-events-ical.tribe-events-button {
        background-color: #592164 !important;
        color: white !important;
    }
    /* TRIBE I-CAL BUTTONS - HOVER */
    .tribe-events-ical-links .tribe-events-button:hover {
        background-color: #3c5b81 !important;
        color: white !important;
    }
  •  115
    Charles replied

    try this

    /* TRIBE CAL BUTTONS */
    .tribe-events-ical.tribe-events-button
        background-color: #592164 !important;
        color: white !important;
    /* TRIBE CAL BUTTONS - HOVER */
    .tribe-events-ical.tribe-events-button:hover
        background-color: #592164 !important;
        color: white !important;
    

    Attached files:  screenshot-ethbcghana.com-2018-09-09-12-43-56.png

  •  1
    Sheryl L replied

    This wasn't working until I realized you left out the brackets. Once I put them in (and changed the hover color to blue), it worked perfectly. Thanks!

  •  115
    Charles replied

    Thanks for the update and I apologize for the confusion. Ticksy might have stripped those out when I submitted my post.