Cireson Portal Themer

Portal Version:

THIS TOOL IS CURRENTLY IN BETA, PLEASE PROVIDE FEEDBACK HERE.

Use this tool to easily update the settings that control the look and feel of your Cireson Portal. The settings loaded below match the default theme. Update any or all of these to custom values and select the 'Download Custom Theme' button in the footer.

To create and use your theme –

  1. Update settings and download theme, using the 'Download Theme CSS' button in the footer.
  2. Place the download custom.theme.min.css file within your Portal CustomSpace directory (the same location as custom.css).
  3. Copy and paste the following code at the top of your custom.css file (within the CustomSpace directory). 
    @import 'custom.theme.min.css';
  4. Reload Portal to see new theme settings applied (this may require clearing your web browser's cache).

Theme Settings

Page Layout

Page Content Margins Content Margin – Large Screens (Desktop) px  (left / right margin) Content Margin – Small Screens (Mobile) px  (left / right margin)

Colors

Custom Brand Colors Brand Color Brand Color – Dark Variation Create automatically
Neutral Palette Saturation
Link Colors Link Color Link Color – Hover Create automatically Link Color – Visited Create automatically Link Color – Selected BG Create automatically
Page Page Background Color
Status ColorsUsed for notification and alert text. Keep colors dark enough to be legible. Status – Information Status – Success Status – Warning Status – Error

Typography

Global Typography Base Font Size – Large Screens (Desktop) px Base Font Size – Small Screens (Mobile) px
HeadingsFont sizes below multiply the 'Base Font Size' value. Font Size – Page Heading Equals {{result('font_size_heading_page','desktop')}}px (Desktop)   {{result('font_size_heading_page','mobile')}}px (Mobile) Font Size – Section Heading Equals {{result('font_size_heading_section','desktop')}}px (Deskop)   {{result('font_size_heading_section','mobile')}}px (Mobile) Font Size – Subsection Heading Equals {{result('font_size_heading_subsection','desktop')}}px (Deskop)   {{result('font_size_heading_subsection','mobile')}}px (Mobile) Font Weight – Headings Line Height – Headings
Body TextFont sizes below multiply the 'Base Font Size' value. Font Size – Body Text Equals {{result('font_size_body_text','desktop')}}px (Deskop)   {{result('font_size_body_text','mobile')}}px (Mobile) Font Size – Featured Text Equals {{result('font_size_body_featured_text','desktop')}}px (Deskop)   {{result('font_size_body_featured_text','mobile')}}px (Mobile) Font Size – Pre-formatted Text & Code Equals {{result('font_size_pre_text','desktop')}}px (Deskop)   {{result('font_size_pre_text','mobile')}}px (Mobile) Line Height – Body Text
Grid TextFont sizes below multiply the 'Base Font Size' value. Font Size – Grid & Meta Text Equals {{result('font_size_meta_text','desktop')}}px (Deskop)   {{result('font_size_meta_text','mobile')}}px (Mobile) Font Size – Grid Header Text Equals {{result('font_size_grid_header_text','desktop')}}px (Deskop)   {{result('font_size_grid_header_text','mobile')}}px (Mobile) Line Height – Grid Text
Sidebar Navigation Font Size – Navigation Title Equals {{result('font_size_side_nav_title','desktop')}}px (Deskop)   {{result('font_size_side_nav_title','mobile')}}px (Mobile) Font Size – Sub-Panel Navigation Title Equals {{result('font_size_side_nav_subpanel_title','desktop')}}px (Deskop)   {{result('font_size_side_nav_subpanel_title','mobile')}}px (Mobile)

Icons

Body ContentThis includes icons used within form inputs. Content Icon Size – Large Screens (Desktop) px Content Icon Size – Small Screens (Mobile) px
Sidebar Navigation Sidebar Icon Size – Large Screens (Desktop) px Sidebar Icon Size – Small Screens (Mobile) px
Footer Drawer Drawer Icon Size px

Form Elements

Inputs Input Border Radius px Input Height – Large Screens (Desktop) px Input Height – Small Screens (Mobile) px

Grids

Grid Cell Padding Cell Padding – Horizontal px Cell Padding – Vertical px
Grid Pagination Pagination Button Height – Large Screens (Desktop) px Pagination Button Height – Small Screens (Mobile) px