Schedule Styling

Overview

How your public schedule and event pages look is decided in one place, the Style section of the schedule form. Everything in it is free on every plan except two things: Custom CSS, which needs Pro, and the AI Style Generator, which needs Enterprise.

1. Choose the schedule in the sidebar and click Edit Schedule at the top of its page.
2. Choose Style in the section list on the left (or from the accordion on mobile).
3. Set the branding at the top, then open the rows under it, watching the preview beside the form.
4. Click Save, in the bar at the bottom of the page. Nothing is applied to your public page until you do.

Open full size

Open full size

The Style section opens on its branding fields, with three rows under them that open in place. Each row says its current choice, so most never need opening. This page follows the same order:

Profile Image

Upload a logo, photo or avatar that represents your schedule under Edit Schedule → Style → Square Profile Image. It does three jobs:

It becomes your favicon too Pro - Requires the Pro plan

On Pro, your profile image also becomes the icon in the browser tab on your public pages, including ticket pages. On every plan it becomes the home-screen icon when a visitor saves your schedule to their phone, and a schedule that has uploaded no image gets a plain calendar glyph there rather than the Event Schedule logo. Nothing to configure: upload a profile image and it is used automatically. This is the same reason a square image matters, since a tab icon is cropped to a square either way.

Accent Color

One Accent Color picker at the top of the Style section drives every highlighted element on your public pages. New schedules start on a standard blue.

Font Family

The Font Family dropdown at the top of the Style section offers more than 230 Google Fonts. It sets the typeface your schedule's name is written in: in the header of your schedule page, and on the cards that name you on event pages. The rest of the page keeps the standard font.

Event Animation

The Event animation row of the Style section, the first one under the branding fields, brings your events to life as visitors scroll your schedule: each event card animates into place as it comes into view, then its details follow one after another: the title, the date (which flips down like a tear-off calendar page), the venue, the price and the performers. The first screen plays as an entrance when someone opens your link. It is off (None) until you pick a style, and it is available on every plan.

After you save a new style, the Schedule tab shows your link with a Copy button (and Share, where the device supports it), ready to send to your audience.

Background

The Background row starts with a Background Type choice of Gradient, Solid or Image. Picking one reveals its own controls and hides the others.

Gradient

Pick a preset from the searchable Colors dropdown, or choose Custom at the top of it to mix your own.

Solid

A single Background Color picker. Use your operating system's color picker or type a six-digit hex code such as #1a1a2e.

Image

Header Style

Choose how the header appears at the top of your public schedule page under Edit Schedule → Style → Header and layout → Header Style. Schedules use Banner unless you change it, and the live preview updates as you switch between the two.

Open full size

Open full size

Header Image

The Header Image dropdown, under Header Style in the Header and layout row, creates the visual banner at the top of your schedule page. It offers four kinds of option, in this order:

Default Layout

Choose how your events are displayed on your schedule page, under Edit Schedule → Style → Header and layout → Default Layout. Two layouts exist:

A new schedule starts on List. Either way this is only the default: visitors can switch between the two with the layout toggle in the header, and their choice is remembered in their own browser for that schedule. It never changes what anyone else sees, and it does not change your setting. On a phone, events are always shown as a list.

Custom CSS Pro - Requires the Pro plan

When the built-in controls do not reach far enough, write your own CSS under Edit Schedule → Style → Header and layout → Custom CSS, the last field of that row. It is added to every public page drawn in your schedule's own style: your schedule page, event pages, embeds, and the pages visitors reach from them such as booking, event requests and gift cards. Ticket, order and installment payment pages use the app's standard layout, so your CSS does not reach them.

• Override any of the built-in styles for complete control
• Fine-tune spacing, borders, radii and shadows
• Add your own animations and effects
• Up to 10,000 characters per schedule

Hiding Sections Pro - Requires the Pro plan

Every panel on your schedule page and on your event pages carries a stable id that starts with gp-. To remove one from the public page, add a display: none rule for that id in Edit Schedule → Style → Header and layout → Custom CSS. Nothing else has to change, and you can put back what you hid by deleting the line.

#gp-talent-list { display: none; }

A common example

The performer list is the compact list of names under the Talent heading, for acts that were typed in or picked up by AI import and have no page of their own. If the names on your events are often wrong or incomplete, hide the list and let the event description carry the lineup instead.

#gp-talent-list { display: none; }

Rules can be combined, and one rule can hide several panels at once:

#gp-upcoming-events,
#gp-talent-list,
#gp-reviews {
    display: none;
}

Schedule page sections

Event page sections

Styling, not just hiding

The same ids work for any rule, not only display: none. #gp-about { padding: 3rem; } gives the description panel more room, and #gp-venue { order: -1; } moves the venue card to the top of the sidebar. See Custom CSS for what the sanitizer removes and where your rules land in the cascade.

A rule on the panel itself always wins, because an id outranks the styling the page already puts on that element. Text is the exception: headings and body copy carry their own size on an inner element, and a size inherited from the panel never beats one set directly. So #gp-about { font-size: 1.125rem; } changes nothing, while #gp-about p { font-size: 1.125rem; } does. If a rule seems to be ignored, check whether you are styling the panel when you meant to style what is inside it.

Smaller hooks inside the calendar

A few elements inside the calendar carry older names that do not start with gp-: #calendar-app, #month-year-title, #events-carousel and #event-popup. They are useful for small adjustments, but they are internals rather than sections, and unlike the gp- ids above they may change. Prefer a gp- id whenever one covers what you want.

Live Preview

A Preview panel sits beside the Style form on wide screens and below it on narrow ones. It stays visible whichever row is open and redraws as you change the header style, images, background, accent color and font, so you can experiment freely without publishing anything half-finished.

AI Style Generator Enterprise - Requires the Enterprise plan

Let AI put together a coherent look for your schedule from its name, type and description, so the color, font and images belong to each other rather than being chosen one at a time.

1. Click AI Generator, at the end of the Style section's title row.
2. Tick which of the five elements to generate: profile image, header image, accent color, font, or background image. The dialog marks the ones you have already set with a dot, so you can leave them alone.
3. Optionally add Style instructions, for example "modern and minimal with blue tones", and tick Save as default for this schedule to keep them for next time. View/edit AI prompt shows the prompt that will be sent and lets you adjust it for this run.
4. Click Generate, then review the previews in the dialog. Regenerate redoes one item, Accept drops the results into the Style form, Discard throws them away, and nothing reaches your public page until you click Save on the form itself.

Remove Branding Pro - Requires the Pro plan

Free schedules on eventschedule.com carry a small "Event Schedule" credit chip in the corner of their public pages. There is no switch for it: it is removed automatically the moment the schedule is on Pro or Enterprise, and it returns if the plan lapses. The one exception is an Enterprise plan an admin granted by hand, which keeps it.

A single-tenant selfhosted install has no plan tiers at all, so the event-page card, the embed and newsletter lines and ads are all absent by default, with nothing to buy. If instead you run your own multi-tenant platform on Event Schedule, those surfaces follow each tenant's tier exactly as they do on eventschedule.com, and your free tier also carries a footer strip pointing at your own marketing site, because that strip is the growth prompt of whoever runs the platform.

On every install that is not eventschedule.com itself, upgrading never removes that corner chip. It is the attribution the Attribution Assurance License asks for in return for the application, so there is no setting that removes it. On a single-tenant selfhost it is on every page. On a platform of your own it is on every schedule you charge for, and a free schedule there carries the operator's footer strip in its place, because a page never shows both credits at once.

See Also

• Creating Schedules - Configure details, settings, sub-schedules, and integrations
• Managing Schedules - Plans, team members, and booking requests
• Event Graphics - Generate shareable images for social media
• Sharing Your Schedule - Embed and share your schedule
• Creating Events - Add events to see your styling in action