Support » Plugin: OpenTickets Community Edition » Styling Buttons on Calendar Page

  • Resolved White Rabbit

    (@wrconsultancy)


    Is it possible to change the css styling for just the buttons on the calendar page?

    I have a conflict with my theme css that means the buttons display incorrectly above the calendar, I can resolve this by adjusting the css. But I need to only apply the changes to the buttons that display on the OpenTicket pages and not the other pages on the site that do not relate to event booking.

    Any help greatly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author quadshot

    (@quadshot)

    Good Day, please know that Opentickets is an open source plugin so you are free to make changes. Please know that any core changes will be affected if there are new versions to update. Let us know if there is any other assistance needed.

    Thread Starter White Rabbit

    (@wrconsultancy)

    I understand that thanks. I need assistance with the code required to make changes in the css that only affect the OpenTickets buttons.

    I have tried the code below but it affects every button on the site.

    button:not(.pswp__button):not(.customize-partial-edit-shortcut-button):not(.fancybox-button):not(.home), .button {
    font-size: 1rem;
    padding: 0;
    color: #000;
    }

    button:not(.home):not(.pswp__button):not(.customize-partial-edit-shortcut-button):not(.fancybox-button):disabled, button:not(.pswp__button):not(.customize-partial-edit-shortcut-button):not(.fancybox-button):disabled[disabled], button:not(.pswp__button):not(.customize-partial-edit-shortcut-button):not(.fancybox-button).disabled, .button:disabled, .button:disabled[disabled], .button.disabled {
    padding: 0;
    color: #000;
    }

    .fc-state-default:not(.home) {
    color: #000;
    }

    Plugin Author loushou

    (@loushou)

    Hey @wrconsultancy,

    You have a couple options here, which will work without using a css3 selector. The calendar page itself should have a ‘body class’ called ‘page-template-qsot-calendar-php’. Second, if your theme does not add that class for some reason (unlikely), or if you want to narrow the button styling changes to literally just those on the calendar, you can use the ‘container class’, for the container that the calendar sits in, ‘calendar-content-wrap’. Here is an example of what that might look like:

    .calendar-content-wrap .button { padding:0; color:#000; font-size:1rem; }
    .calendar-content-wrap .button.disabled,
    .calendar-content-wrap .button:disabled { padding:0; color:#000; }
    .calendar-content-wrap .button.fc-state-default { color:#000; }

    If you find that some or all of these do not seem to apply to your buttons on the calendar page, you most likely need to be more specific with the selector. You can do this by adding more parent elements to your selector, or by adding !important.

    Hope this helps,
    Loushou

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Styling Buttons on Calendar Page’ is closed to new replies.