The Pageflow default theme provides a rich set of SCSS variables that can be used to build custom themes. Instructions on how to setup a custom theme can be found in the themes guide.
Custom Page Type Pictograms
By default, each page type brings its own set of pictogram images for display inside navigations bars and overviews. Default pictograms are usually located in a directory named app/assets/images/pageflow/<page_type_name>/themes/default/pictograms
inside the page type gem.
To supply custom pictograms, add the following line to your theme file:
# pageflow/themes/<theme_name>.scss
$custom-page-type-picotgrams: true;
This causes pictograms to be looked for in pageflow/themes/<theme_name>/page_type_pictograms/<page_type_name>/
inside your apps image directory. Each directory must contain the following variants:
wide.png
sprite.png
Classic Player Controls
variables
classic-player-controls-icons
$classic-player-controls-icons: "icon-font" !default;
Description
Type of icons to use:
"icon-font"
: Circular buttons with font awesome icons."sprite"
: Use sprite image for play controls.
classic-player-controls-images
$classic-player-controls-images: "default" !default;
Description
Image to use if $classic-player-controls-icons
is "sprite"
:
"default"
: Use sprite from default image."custom"
: Custom sprite fromplayer_controls_sprite.png
in theme directory.
classic-player-controls-typography
$classic-player-controls-typography: $player-controls-typography !default;
Description
Base typography settings for player controls.
classic-player-controls-background-color
$classic-player-controls-background-color: #191919 !default;
Description
Background color of the control bar.
classic-player-controls-border-color
$classic-player-controls-border-color: #505050 !default;
Description
Color of the border around the control bar.
classic-player-controls-separator-color
$classic-player-controls-separator-color: $classic-player-controls-border-color !default;
Description
Color of the vertical separator right from the play button.
classic-player-controls-border-width
$classic-player-controls-border-width: 3px !default;
Description
Width of the border around control bar
classic-player-controls-separator-border-width
$classic-player-controls-separator-border-width: 2px !default;
Description
Width of the border between play button and progress bar
classic-player-controls-font-size
$classic-player-controls-font-size: 15px !default;
Description
Font size of control bar text, current time and duration.
classic-player-controls-text-color
$classic-player-controls-text-color: #ddd !default;
Description
Color of control bar text, current time and duration.
classic-player-controls-progress-bar-background-color
$classic-player-controls-progress-bar-background-color: #333333 !default;
Description
Backgrund color of the progress bar.
classic-player-controls-progress-bar-color
$classic-player-controls-progress-bar-color: $main-color !default;
Description
Color of the part of the progress bar indicating the play progress.
classic-player-controls-progress-bar-load-progress-color
$classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.4) !default;
Description
Color of the part of the progress bar indicating the load progress.
classic-player-controls-progress-bar-border-radius
$classic-player-controls-progress-bar-border-radius: 4px !default;
Description
Border radius of the progress bar.
classic-player-controls-handle-width
$classic-player-controls-handle-width: 24px !default;
Description
Width of the handle element. Can be used to ensure correct positioning of the handle when sprite images are used.
classic-player-controls-timestamp-position
$classic-player-controls-timestamp-position: "left" !default;
Description
Position of current time and duration.
"right"
: Both on the right separated by a slash."split"
: Left and right of the progress bar.
classic-player-controls-info-box-background-color
$classic-player-controls-info-box-background-color: rgba(39, 39, 39, 0.95) !default;
Description
Background color of the info box.
classic-player-controls-info-box-text-color
$classic-player-controls-info-box-text-color: #fff !default;
Description
Color of the text inside the info box.
classic-player-controls-info-box-header-color
$classic-player-controls-info-box-header-color: null !default;
Description
Text color of the info box header.
classic-player-controls-info-box-typography
$classic-player-controls-info-box-typography: () !default;
Description
Typography settings for the info box.
classic-player-controls-info-box-header-typography
$classic-player-controls-info-box-header-typography: () !default;
Description
Typography settings for the info box header.
classic-player-controls-info-box-border-radius
$classic-player-controls-info-box-border-radius: 4px !default;
Description
Display rounded corners at the top of the info box.
Default Navigation Bar
Indicators
variables
indicator-icons
$indicator-icons: "icon_font" !default;
Description
Type of icons to use:
"default"
: Use images from default theme."sprite"
: Custom icons fromicon_sprite.png
in theme directory."icon_font"
: Use font icons for icon.
display-scroll-indicator
$display-scroll-indicator: true !default;
Description
Display the scroll indicator at the bottom of the page.
indicator-text-color
$indicator-text-color: #e6e6e6 !default;
Description
Text color of indicators.
indicator-active-text-color
$indicator-active-text-color: $indicator-text-color !default;
Description
Text color of hovered indicators.
indicator-text-shadow-color
$indicator-text-shadow-color: rgb(43, 43, 43) !default;
Description
Text shadow color of indicators.
indicator-inverted-text-color
$indicator-inverted-text-color: #0a0a0a !default;
Description
Text color of indicators on inverted page.
indicator-inverted-active-text-color
$indicator-inverted-active-text-color: $indicator-inverted-text-color !default;
Description
Text color of hovered indicators on inverted page.
indicator-inverted-text-shadow-color
$indicator-inverted-text-shadow-color: #fdfdfd !default;
Description
Text shadow color of indicators on inverted page.
indicator-typography
$indicator-typography: () !default;
Description
Typography of indicators.
indicator-phone-typography
$indicator-phone-typography: () !default;
Description
Typography of indicators on phone.
Logo
variables
logo-variant
$logo-variant: "first-page" !default;
Description
Variant of logo to display:
"first-page"
: Background image on first page."all-pages"
: Background image on all pages."watermark"
: Use.header_logo
element as logo.
logo-top
$logo-top: 30px !default;
Description
Top position of logo.
logo-phone-top
$logo-phone-top: null !default;
Description
Height of the logo. (Non-watermark variants only)
logo-width
$logo-width: 100px !default;
Description
Width of the logo. (Watermark variant only)
logo-relative-width
$logo-relative-width: 13% !default;
Description
Width of the logo in percent. (Non-watermark variants only)
logo-min-width
$logo-min-width: 100px !default;
Description
Min Width of the logo. (Non-watermark variants only)
logo-max-width
$logo-max-width: 221px !default;
Description
Max Width of the logo. (Non-watermark variants only)
logo-height
$logo-height: 50px !default;
Description
Height of the logo.
logo-mobile-height
$logo-mobile-height: 35px !default;
Description
Height of the logo. (Non-watermark variants only)
logo-phone-height
$logo-phone-height: null !default;
Description
Height of the logo in phone layout. (Defaults to 24px for watermark variant)
logo-image-file-extension
$logo-image-file-extension: "png" !default;
Description
File extension of logo_header and logo_header_invert image files
Mobile Navigation
Overview
variables
overview-icons
$overview-icons: $standard-icons !default;
Description
Type of icons to use:
"icon-font"
: Circular buttons with font awesome icons."sprite"
: Custom icons fromicon_sprite.png
in theme directory.
overview-icon-font-options
$overview-icon-font-options: () !default;
See
- [variable]
default-widget-icon-font-options
overview-chapter-border-images
$overview-chapter-border-images: "default" !default;
Description
Images to use to draw outline of chapter columns.
Possible values:
"default"
: Use images from default theme."none"
: Do not use background images."custom"
: Use images from current theme directory.
Custom border images have to placed in a overview_chapter_borders
directory inside the theme's image directory. Five images have to be supplied:
top.png
(width: 265pxm height: 10px): Used as the upper border of each column.bottom.png
(width: 265px, height 10px): Used as the lower border of each column.start.png
(width: 265px, height: 10px): Used as the upper border of the first column.end.png
(width: 265px, height: 10px): Used as the lower border of the last column.tile.png
(width: 265px): Repeated in the background of each column to draw the left and right borders.
See
- [variable]
overview-chapter-background-color
overview-chapter-border-opacity
$overview-chapter-border-opacity: 1 !default;
Description
Opacity of the border images.
overview-backdrop-color
$overview-backdrop-color: rgba(0, 0, 0, 0.4) !default;
Description
Color of the backdrop used to fade out the current page.
overview-text-color
$overview-text-color: #fff !default;
Description
Default text color for overview elements.
overview-header-text-color
$overview-header-text-color: $overview-text-color !default;
Description
Color of the overview's main header.
overview-chapter-number-text-color
$overview-chapter-number-text-color: $overview-text-color !default;
Description
Color of the chapter tagline containing the chapter number.
overview-chapter-background-color
$overview-chapter-background-color: transparent !default;
Description
Background color of the chapter columns.
overview-page-border-color
$overview-page-border-color: #505050 !default;
Description
Color of the borders around the page thumbnails.
overview-current-page-border-color
$overview-current-page-border-color: $main-color-dark !default;
Description
Color of the border around the thumbnail of the current page.
overview-page-description-background-color
$overview-page-description-background-color: $main-color-dark !default;
Description
Background color of the panel which slides above the page thumbnail to reveal a page description.
overview-page-description-text-color
$overview-page-description-text-color: $overview-text-color !default;
Description
Text color of the panel which slides above the page thumbnail to reveal a page description.
overview-close-button-text-color
$overview-close-button-text-color: #fffefe !default;
Description
Text color of the close button label.
overview-active-close-button-text-color
$overview-active-close-button-text-color: $overview-close-button-text-color !default;
Description
Text color of the hovered close button label.
overview-close-button-text-shadow-color
$overview-close-button-text-shadow-color: #2b2b2b !default;
Description
Text shadow color of the close button label.
overview-active-close-button-text-shadow-color
$overview-active-close-button-text-shadow-color: $overview-close-button-text-shadow-color !default;
Description
Text shadow color of the hovered close button label.
overview-pictogram-visibility
$overview-pictogram-visibility: $standard-page-pictogram-visibility !default;
Description
Pictogram visiblity.
overview-typography
$overview-typography: () !default;
Description
Base typography for widget.
overview-header-typography
$overview-header-typography: () !default;
Description
Typography for overview header.
overview-chapter-number-typography
$overview-chapter-number-typography: () !default;
Description
Typography for chapter number tagline.
overview-chapter-title-typography
$overview-chapter-title-typography: () !default;
Description
Typography for chapter title.
overview-close-button-typography
$overview-close-button-typography: () !default;
Description
Typography for close button label.
Page Colors
variables
page-anchor-color
$page-anchor-color: #fff !default;
Description
Color of links inside the text
page-anchor-inverted-color
$page-anchor-inverted-color: #000 !default;
Description
Color of links inside the text on inverted pages
page-anchor-typography
$page-anchor-typography: () !default;
Description
Typography settings of links in page content text
page-text-color
$page-text-color: #fff !default;
Description
Color of text
page-inverted-text-color
$page-inverted-text-color: #000 !default;
Description
Color of text on inverted pages
page-background-color
$page-background-color: #000 !default;
Description
Background-color of pages
page-inverted-background-color
$page-inverted-background-color: #fff !default;
Description
Background-color of inverted pages
page-title-color
$page-title-color: null !default;
Description
Color of title
page-inverted-title-color
$page-inverted-title-color: null !default;
Description
Color of title on inverted pages
page-shadow-color
$page-shadow-color: #000 !default;
Description
Color of the gradient
page-shadow-inverted-color
$page-shadow-inverted-color: #fff !default;
Description
Color of the gradient on inverted pages
Page Typography
variables
page-typography
$page-typography: () !default;
Description
Base typography for page.
page-content-text-typography
$page-content-text-typography: () !default;
Description
Typography for content text.
page-content-text-phone-typography
$page-content-text-phone-typography: () !default;
Description
Typography for content text in phone layout.
page-content-font-size
$page-content-font-size: 1em !default;
Description
Base font size for page content
page-content-phone-font-size
$page-content-phone-font-size: 0.7em !default;
Description
Base font size for page content in phone layout
page-header-typography
$page-header-typography: () !default;
Description
Typography for header.
page-header-tagline-typography
$page-header-tagline-typography: () !default;
Description
Typography for header tagline.
page-header-tagline-phone-typography
$page-header-tagline-phone-typography: () !default;
Description
Typography for header tagline in phone layout.
page-header-title-typography
$page-header-title-typography: () !default;
Description
Typography for header title.
page-header-title-phone-typography
$page-header-title-phone-typography: () !default;
Description
Typography for header title in phone layout.
page-header-first-page-title-typography
$page-header-first-page-title-typography: () !default;
Description
Typography for title on first page.
page-header-first-page-title-phone-typography
$page-header-first-page-title-phone-typography: () !default;
Description
Typography for title on first page in phone layout.
page-header-chapter-beginning-title-typography
$page-header-chapter-beginning-title-typography: () !default;
Description
Typography for title on first page of chapter.
page-header-chapter-beginning-title-phone-typography
$page-header-chapter-beginning-title-phone-typography: () !default;
Description
Typography for title on first page of chapter in phone layout.
page-header-subtitle-typography
$page-header-subtitle-typography: () !default;
Description
Typography for header subtitle.
page-header-subtitle-phone-typography
$page-header-subtitle-phone-typography: () !default;
Description
Typography for header subtitle in phone layout.
page-scroller-padding-top
$page-scroller-padding-top: 15% !default;
Description
Space around page text inside scroller.
page-scroller-mobile-padding-top
$page-scroller-mobile-padding-top: 25% !default;
Description
Space around page text inside scroller.
page-scroller-mobile-landscape-padding-top
$page-scroller-mobile-landscape-padding-top: 10% !default;
Description
Space around page text inside scroller.
page-scroller-padding-bottom
$page-scroller-padding-bottom: 5% !default;
Description
Space around page text inside scroller.
page-scroller-padding-left
$page-scroller-padding-left: 8% !default;
Description
Space around page text inside scroller.
page-scroller-padding-right
$page-scroller-padding-right: 8% !default;
Description
Space around page text inside scroller.
page-scroller-mobile-padding-right
$page-scroller-mobile-padding-right: 8% !default;
Description
Space around page text inside scroller.
page-scroller-first-page-padding-top
$page-scroller-first-page-padding-top: null !default;
Description
Space for logo on first page.
page-scroller-first-page-mobile-padding-top
$page-scroller-first-page-mobile-padding-top: 110px !default;
Description
Space for logo on first page in mobile layout.
page-scroller-first-page-mobile-landscape-padding-top
$page-scroller-first-page-mobile-landscape-padding-top: 100px !default;
Description
Space for logo on first page in mobile landscape layout.
page-scroller-first-page-phone-padding-top
$page-scroller-first-page-phone-padding-top: null !default;
Description
Space for logo on first page in phone layout.
Classic Player Controls
variables
slim-player-controls-typography
$slim-player-controls-typography: $player-controls-typography !default;
Description
Base typograpy settings.
slim-player-controls-color
$slim-player-controls-color: #fff !default;
Description
Color of player icons and text.
slim-player-controls-loading-spinner-color
$slim-player-controls-loading-spinner-color: rgba(255, 255, 255, 0.5) !default;
Description
Color of the loading spinner circle around the play button.
slim-player-controls-progress-bar-background-color
$slim-player-controls-progress-bar-background-color: rgba(255, 255, 255, 0.2) !default;
Description
Backgrund color of the progress bar.
slim-player-controls-progress-bar-color
$slim-player-controls-progress-bar-color: $main-color !default;
Description
Color of the part of the progress bar indicating the play progress.
slim-player-controls-progress-bar-load-progress-color
$slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2) !default;
Description
Color of the part of the progress bar indicating the load progress.
slim-player-controls-control-bar-text-typography
$slim-player-controls-control-bar-text-typography: () !default;
Description
Typography for text displayed next to play button
slim-player-controls-control-bar-text-desktop-typography
$slim-player-controls-control-bar-text-desktop-typography: () !default;
Description
Typography for text displayed next to play button in desktop layout
slim-player-controls-control-bar-text-phone-typography
$slim-player-controls-control-bar-text-phone-typography: () !default;
Description
Typography for text displayed next to play button in phone layout
slim-player-controls-info-box-background-color
$slim-player-controls-info-box-background-color: rgba(17, 17, 17, 0.9) !default;
Description
Background color of info box.
slim-player-controls-info-box-text-color
$slim-player-controls-info-box-text-color: #fff !default;
Description
Color of text in info box.
slim-player-controls-info-box-separator-line-color
$slim-player-controls-info-box-separator-line-color: #888 !default;
Description
Color of separator line between info box header and info box text.
slim-player-controls-info-box-typography
$slim-player-controls-info-box-typography: () !default;
Description
Typography settings for the info box.
slim-player-controls-info-box-header-typography
$slim-player-controls-info-box-header-typography: () !default;
Description
Typography settings for the info box header.
Defaults
variables
main-color
$main-color: #53adb8 !default;
Description
Color to use for highlighted elements.
main-color-dark
$main-color-dark: #3b5159 !default;
Description
Background color to use for highlighted elements.
standard-typography
$standard-typography: (
font-family: $standard-font,
font-size: $standard-font-size
);
Description
Default typography settings.
standard-icons
$standard-icons: "icon-font" !default;
Description
Default type of icons to use.
"icon-font"
: Circular buttons with font awesome icons."sprite"
: Custom icons fromicon_sprite.png
in theme directory.
standard-page-pictogram-visibility
$standard-page-pictogram-visibility: visible !default;
Description
Pictograms visibility values to use.
"visible"
: All pictograms should be visible."hidden"
: All pictograms should be hidden.
General
variables
anchor-icon-color
$anchor-icon-color: null !default;
Description
Color of the caret icon displayed in front of links. Same as text color by default.
consent-bar-background-color
$consent-bar-background-color: rgba(20, 20, 20, 0.95);
Description
Color of the cookie notice bar
consent-bar-text-color
$consent-bar-text-color: #fff;
Description
Color of the text inside cookie notice bar
cookie-notice-bar-background-color
$cookie-notice-bar-background-color: rgba(20, 20, 20, 0.9);
Description
Color of the cookie notice bar
cookie-notice-bar-text-color
$cookie-notice-bar-text-color: #fff;
Description
Color of the text inside cookie notice bar
custom-loading-spinner
$custom-loading-spinner: false !default;
Description
Let theme define its own loading spinner.
loading-spinner-logo
$loading-spinner-logo: "default" !default;
Description
Logo to display as loading spinner.
Possible values:
"default"
: Use images from default theme."custom"
: Use images from theme directory.
Custom logo image has to be named loading_spinner/logo.png
.
loading-spinner-logo-width
$loading-spinner-logo-width: 130px !default;
Description
Width of the loading spinner image.
loading-spinner-logo-height
$loading-spinner-logo-height: 112px !default;
Description
Height of the loading spinner image.
loading-spinner-logo-mobile-width
$loading-spinner-logo-mobile-width: null !default;
Description
Width of the loading spinner image for mobile.
loading-spinner-logo-mobile-height
$loading-spinner-logo-mobile-height: null !default;
Description
Height of the loading spinner image for mobile.
loading-spinner-background-color
$loading-spinner-background-color: #3b5159 !default;
Description
Spinner background color.
loading-spinner-background
$loading-spinner-background: "glow" !default;
Description
What to display behind the logo:
"glow"
: Display radial gradient (default)."custom"
: Displayloading_spinner/background.png
image."none"
: Nothing
loading-spinner-background-size
$loading-spinner-background-size: "auto" !default;
Description
Background size to apply to background image:
"auto"
: Do not apply background size (default)."logo"
: Apply same size as for logo image. Allows using background image as an animated layer of the logo.
loading-spinner-glow-color
$loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;
Description
Radial gradient color.
loading-spinner-animate-background
$loading-spinner-animate-background: true !default;
Description
Apply opacity animation to glow or background image.
loading-spinner-glow-size
$loading-spinner-glow-size: 140px !default;
Description
Size of the actual glowing area
loading-spinner-image-file-extension
$loading-spinner-image-file-extension: "png" !default;
Description
File extension of background and logo
loading-spinner-background-position
$loading-spinner-background-position: 50% 50% !default;
Description
Background position for background image
logo-alignment
$logo-alignment: "left" !default;
Description
Alignment of the logo in desktop layout. In phone layout, logos are always displayed left aligned.
"left"
: Left align logo."right"
: Right align logo in desktop layout.
logo-background-image-variant-first-page-opacity
$logo-background-image-variant-first-page-opacity: null !default;
Description
Opacity of the logo on the first page
logo-background-image-variant-mobile-padding-top
$logo-background-image-variant-mobile-padding-top: 1% !default;
Description
For some reason there has always been a default padding top for logo in mobile layout.
logo-background-image-variant-banner
$logo-background-image-variant-banner: false !default;
Description
Display logo_banner.svg behind logo
logo-watermark-variant-fade-in-near-top
$logo-watermark-variant-fade-in-near-top: "first-page" !default;
Description
Fade in logo when scroller is near top
"first-page"
: only on first page"all-pages"
: on all pages
logo-watermark-variant-fade-in-with-header
$logo-watermark-variant-fade-in-with-header: false !default;
Description
Fade in logo when header is active. If the header logo is inverted on the current page, the non-inverted logo variant is displayed while the header is active.
logo-watermark-variant-opacity
$logo-watermark-variant-opacity: 0.3 !default;
Description
Set opacity value of watermark logos
logo-watermark-mobile-height
$logo-watermark-mobile-height: null !default;
Description
Height of the logo in phone layout.
sprite-icon-active-as-pressed
$sprite-icon-active-as-pressed: false !default;
Description
Use pressed state instead of hover state as acitve state.
page-hyphenate-header
$page-hyphenate-header: "narrow" !default;
Description
Let browser break words in header.
"narrow"
: Only allow hyphenating words when header is narrow, i.e. in portrait phone layout."always"
: Always break words"never"
: Never break words
page-content-max-width
$page-content-max-width: 500px !default;
Description
Max width for tagline and subtitle and content text.
page-header-title-max-width
$page-header-title-max-width: 700px !default;
Description
Max width for header title when text is positioned on the left. For right positioned text the max width has to match the max width of tagline and subtitle to ensure the title is left aligned with those elements.
page-content-position-right-max-width
$page-content-position-right-max-width: 500px !default;
Description
Maximal width for right positioned headlines and content text.
page-content-position-center-max-width
$page-content-position-center-max-width: $page-content-max-width !default;
Description
Maximal width for center positioned headlines and content text.
page-header-title-min-width-for-split-layout
$page-header-title-min-width-for-split-layout: 525px !default;
Description
Min width the header title is supposed to have in a split layout (i.e. when the page has two columns and some kind of embed is displayed on the right) with text positioned on the left.
page-content-width
$page-content-width: 60% !default;
Description
Relative width of tagline, subtitle and content text
page-shadow-image
$page-shadow-image: null !default;
Description
Name of image file in theme directory to display behind the shadow
page-shadow-image-opacity
$page-shadow-image-opacity: null !default;
Description
Opactiy of shadow image
page-shadow-image-position
$page-shadow-image-position: right bottom !default;
Description
Background position of shadow image
page-shadow-image-size
$page-shadow-image-size: contain !default;
Description
Background size of shadow image
page-shadow-mobile-image-size
$page-shadow-mobile-image-size: null !default;
Description
Background size of shadow image in mobile layout.
classic-player-controls-custom-play-button-icon-color
$classic-player-controls-custom-play-button-icon-color: #000 !default;
Description
Color of of the custom icon displayed inside the play button.
Widget Defaults
variables
widget-background-color
$widget-background-color: $basic-background-color-transparent !default;
Description
Default background color of widgets.
widget-text-color
$widget-text-color: #fff !default;
Description
Default text color in widgets.
widget-icons
$widget-icons: $standard-icons !default;
Description
Default type of icons to use in widgets.
default-widget-icon-font-options
$default-widget-icon-font-options: (
button-background-color: #dbdbdb,
active-button-background-color: $main-color,
button-icon-color: rgba(0, 0, 0, 0.75),
active-button-icon-color: rgba(255, 255, 255, 0.9),
deactivated-button-icon-color: rgba(120, 120, 120, 0.8)
);
Description
Default options used for icon font based icons in widgets.
widget-icon-font-options
$widget-icon-font-options: () !default;
See
- [variable]
default-widget-icon-font-options