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 "Marketing" in the top menu navigation and from the drop-down select "Views".
  2. Find the view you would like to edit and click the "Edit View" button.
  3. Click on the "Display Options" tab.
  4. You can add custom CSS in the "Custom CSS" field. 

Here are some CSS properties to use

  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%);

    }

Still need help? Contact Us Contact Us