Blokks

All CSS variables

Besides colors, fonts and sizes, there are more CSS variables that you can change. To get a list of all properties, right click anywhere on your page, open the Developer tools by clicking Inspect and select the <html> tag:

Pro-tip: Changes made to CSS variables are rendered live while adjusting them in the Developer tools. Note that these changes are temporary and will be lost when refreshing or closing the window. So don’t forget to copy and paste them in your code when you’re done.

CSS Variables Description
--blokks-default-font The default font is used for stage names, the date selector, titles and descriptions.
--blokks-secondary-font The secondary font is used for times, categories, links and buttons.
--blokks-theme-color The theme color is used for titles, the date selector, favorites, hover states, etc. The default value is #2e8cd2.
--blokks-default-background-color The default background color is the main background color used for your embed. The default value is #fff.
--blokks-dark-background-color The dark background color is used for activities. It’s also the color shown behind images before they load or if the images have opacity. The default value is #33363b.
--blokks-default-text-color The default text color is used for subtitles and descriptions. The default value is #33363b.
--blokks-light-text-color The light text color is used for text shown in activities. The default value is #fff.
--blokks-dimmed-text-color The dimmed text color is used for times, categories, buttons and links. The default value is #989da8.
--blokks-stroke-color The stroke color is used for all strokes shown in the schedule. The default value is hsla(221,8%,63%,.6).
--blokks-table-header-border The border styling used for the borders shown in the schedule header. The default value is 1px dashed hsla(221,8%,63%,.3).
--blokks-table-cell-border The border styling used for the borders on each cell in your schedule. The default value is 1px dashed hsla(221,8%,63%,.3).
--blokks-table-header-height This variable is used to adjust the height of your schedule header. The default value is auto.
--blokks-table-cell-height This variable is used to adjust the height of each cell. The default value is 100px.
--blokks-time-captions-width This variable is used to adjust the width of the content shown on the left of your schedule. The default value is 60px.
--blokks-table-column-width This variable is used to adjust the width of each column. The default value is 265px.