Advanced Styling for Your Views Using CSS

You can easily change the color of tiles and texts from the Display Options tab of the Edit View screen, however with our advanced styling guide you can do a lot more in terms of custom design.

Advanced styling only works for the [OLD] Calendar, [OLD] Agenda and [OLD] Stacks views.

Please note this is for advanced users only with knowledge of basic CSS styling.

  1. After logging into your account, Click "Settings" in the top right menu navigation and from the drop-down select "Public Views".
  2. Find the view you would like to edit and click the "Edit View" button.
  3. You can add custom CSS in the "Custom CSS" field.
  1. Calendar
    • Calendar Border: fc-day-grid-container {}
    • Listing Tile: fc-event-container {}
    • Listing Border: .fc-content {}
    • Time: span.fc-time {}
    • Listing Name: span.fc-title{}
    • Picture: .product-picture{}
  2. Agenda
    • "More Information" Button: .panel-body p button {}
    • Text: .panel-body h3 {}
    • "Purchase" Button: .panel-body .btn-primary {}
    • Title: .panel .panel-heading {}
    • Row: .agenda .row .col-lg-3 {}
  3. Stacks
    • Image: .image {}
    • Title: .text.text-1 {}
    • Description: .text.text-2 {}
    • Call to action button: a._button {}
    • Call to action "hover-over" button: ._button:hover{}
    • Date/time field: .text.text-3 {}

Some common use cases

  1. Hide title of the view on the Agenda layout
    .page-header {
    display:none;
    }
  2. Change the font of the text in the Stacks layout
    .p .text text-1 {
    font-family: arial
    }
  3. Change the color of button when you hover over it 
    ._button:hover {
    background-color: hsl(93, 37%, 75%);

    }
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.