Source: variables/_variables-wdpk.scss, line 1144
Variables impacting the Bottom Bar
| Variable | Options |
|---|---|
| $wdpk-bottom-bar-enabled | Whether Bottom bar is enabled or not |
| $wdpk-bottom-height | Height for the bottom bar |
| $wdpk-bottom-bar-background | Background properties for the bottom bar |
| $wdpk-bottom-bar-menu-shadow | Shadow properties for the bottom bar |
| $wdpk-bottom-bar-menu-border-map | Bottom bar border properties |
Source: variables/_variables-wdpk.scss, line 392
For each of buttons, define text, background, and border color.
| Variable | Options |
|---|---|
| $wdpk-btn-padding-y | Y-axis padding for buttons |
| $wdpk-btn-padding-x | X-axis padding for buttons |
| $wdpk-btn-font-family | FOnt fmaily for buttons |
| $wdpk-btn-font-size | Font size for buttons |
| $wdpk-btn-line-height | Line height for buttons |
| $wdpk-btn-padding-y-sm | Y-axis padding for sm buttons |
| $wdpk-btn-padding-x-sm | x-axis padding for sm buttons |
| $wdpk-btn-font-size-sm | Font Size for sm buttons |
| $wdpk-btn-line-height-sm | Line Height for sm buttons |
| $wdpk-btn-padding-y-lg | Y-axis padding for lg buttons |
| $wdpk-btn-padding-x-lg | X-axis padding for lg buttons |
| $wdpk-btn-font-size-lg | Font size for lg buttons |
| $wdpk-btn-line-height-lg | Line height for lg buttons |
| $wdpk-btn-border-width | Border width for buttons |
| $wdpk-btn-font-weight | Font weight for buttons |
| $wdpk-btn-box-shadow | Box shadow for buttons |
| $wdpk-btn-focus-width | Focus border width for buttons |
| $wdpk-btn-focus-box-shadow | Box shadow for buttons |
| $wdpk-btn-disabled-opacity | Disbaled opacity for buttons |
| $wdpk-btn-active-box-shadow | Active state shadow properties for buttons |
| $wdpk-btn-link-disabled-color | Link Disabled color for buttons |
| $wdpk-btn-block-spacing-y | Y-axis spacing for block buttons |
| $wdpk-btn-border-radius | Border radius for buttons |
| $wdpk-btn-border-radius-lg | Bordeer radius for lg buttons |
| $wdpk-btn-border-radius-sm | Border radius for sm buttons |
| $wdpk-btn-transition | Transition properties for buttons |
| $wdpk-btn-shadow | Shodow properties for buttons |
Source: variables/_variables-wdpk.scss, line 201
Define common padding and border radius sizes etc for various components. All the components use values from these variables to calculate the values.
| Variable | Options |
|---|---|
| $wdpk-line-height-lg | 'lg' Line height for text used in components such as buttons |
| $wdpk-line-height-sm | 'sm' Line height for text used in components such as buttons |
| $wdpk-border-width | Border width used in components |
| $wdpk-border-color | Border color used in components |
| $wdpk-border-radius | Border radius used in components |
| $wdpk-border-radius-lg | 'lg' Border radius used in components |
| $wdpk-border-radius-sm | 'sm' Border radius used in components |
| $wdpk-box-shadow-sm | 'sm' Box Shadow used in components |
| $wdpk-box-shadow | Box Shadow used in components |
| $wdpk-box-shadow-lg | 'lg' Box Shadow used in components |
| $wdpk-component-active-color | Active color used for components |
| $wdpk-component-active-bg | Active background color used for components |
| $wdpk-caret-width | Caret width used for components |
| $wdpk-transition-base | base transition properties for components |
| $wdpk-transition-fade | fade transition properties for components |
| $wdpk-transition-collapse | collapse transition properties for components |
Source: variables/_variables-wdpk.scss, line 250
Variables for font sizes use throught the theme. We use rem values for the fonts. By Overriding these variables various fonr sizes can be set through the theme. Can directly use rem, px, em values in these variables.
| Variable | Options |
|---|---|
| $wdpk-font-size-base | default font size applied to <body> rem value only |
| $wdpk-font-family-sans-serif | The default Sans Serif font family |
| $wdpk-font-family-secondary | Secondary font family used in various components |
| $wdpk-font-weight-light | Font weight for light font |
| $wdpk-font-weight-normal | Font weight for regular font |
| $wdpk-font-weight-bold | Font weight for bold font |
| $wdpk-line-height-base | Base line height for all fonts |
| $wdpk-h1-font-size | default font size applied to <h1> rem value only |
| $wdpk-h2-font-size | default font size applied to <h2> rem value only |
| $wdpk-h3-font-size | default font size applied to <h3> rem value only |
| $wdpk-h4-font-size | default font size applied to <h4> rem value only |
| $wdpk-h5-font-size | default font size applied to <h5> rem value only |
| $wdpk-h6-font-size | default font size applied to <h6> rem value only |
| $wdpk-headings-margin-bottom | Bottom margin given to each heading rem values |
| $wdpk-headings-font-family | Font family assigned to headings |
| $wdpk-headings-font-weight | Font Weight assigned to headings |
| $wdpk-headings-line-height | Line height assigned to headings |
| $wdpk-headings-color | Color assigned to headings |
| $wdpk-display1-size: | display1 Font Size |
| $wdpk-display2-size: | display2 Font Size |
| $wdpk-display3-size: | display3 Font Size |
| $wdpk-display4-size: | display4 Font Size |
| $wdpk-display1-weight: | display1 Font Weight |
| $wdpk-display2-weight: | display2 Font Weight |
| $wdpk-display3-weight: | display3 Font Weight |
| $wdpk-display4-weight: | display4 Font Weight |
| $wdpk-paragraph-margin-bottom | Margin below the tag |
| $wdpk-link-color | Assign a color for links |
| $wdpk-link-decoration | Default link decoration |
| $wdpk-link-hover-color | Link Hover Color |
| $wdpk-link-hover-decoration | Link Hover Decoration |
Source: variables/_variables-wdpk.scss, line 473
Variables used for modifying the look of the form input fields in forms.
| Variable | Options |
|---|---|
| $wdpk-label-font-size | Form label font size |
| $wdpk-label-line-height | Form label line height |
| $wdpk-label-font-weight | Form label font weight |
| $wdpk-label-font-color | Form label font color |
| $wdpk-input-checkbox-size | Form Checbox input size |
| $wdpk-form-group-margin-bottom | Form group bottom margin |
| $wdpk-input-bg | Input field backgrodun color by default |
| $wdpk-input-disabled-bg | Input field background color in disabled state |
| $wdpk-input-color | Input field font color |
| $wdpk-input-border-color | Input field border color |
| $wdpk-input-border-width | Input field border width |
| $wdpk-input-box-shadow | Input field box shadow |
| $wdpk-input-border-radius | Input field border radius |
| $wdpk-input-border-radius-lg | Input field border radies of lg |
| $wdpk-input-border-radius-sm | Input field border radius for sm |
| $wdpk-input-focus-bg | Input field focus background color |
| $wdpk-input-focus-border-color | Input field focus border color |
| $wdpk-input-focus-color | Input field focus font color |
| $wdpk-input-focus-width | Input field focus border width |
| $wdpk-input-focus-box-shadow | Input field focus box shadow |
| $wdpk-input-placeholder-color | Input field placeholder font color |
| $wdpk-input-plaintext-color | Input field plaintext color |
| $wdpk-input-transition | Input field placeholder transition properties |
| $wdpk-label-margin-bottom | Input field placeholder bottom margin |
| $wdpk-input-padding-y | Y-axis padding for input fields |
| $wdpk-input-padding-x | X-axis padding for input fields |
| $wdpk-input-font-family | Input field font family |
| $wdpk-input-font-size | Input field font size |
| $wdpk-input-font-weight | Input field font weight |
| $wdpk-input-line-height | Input field line height |
| $wdpk-input-padding-y-sm | Y-axis padding for sm input fields |
| $wdpk-input-padding-x-sm | X-axis padding for sm input fields |
| $wdpk-input-font-size-sm | Font size for sm input fields |
| $wdpk-input-line-height-sm | Line height for sm input fields |
| $wdpk-input-padding-y-lg | Y-axis padding for lg input fields |
| $wdpk-input-padding-x-lg | X-axis padding for lg input fields |
| $wdpk-input-font-size-lg | Font size for lg input fields |
| $wdpk-input-line-height-lg | Line height for lg input fields |
Source: variables/_variables-wdpk.scss, line 14
| Variable | Options |
|---|---|
| $wdpk-orientation | 'ltr' for Left To Right Text And 'rtl' For Right To Left Text |
| $wdpk-sm-breakpoint | Break for Breakpoint Slicer for Small Devices |
| $wdpk-md-breakpoint | Break for Breakpoint Slicer for Medium Device |
| $wdpk-lg-breakpoint | Break for Breakpoint Slicer for For Desktop Resolutions |
| $wdpk-xl-breakpoint | Break for Breakpoint Slicer for Xtra Large Screens |
| $wdpk-enable-on-desktop | Set this to true if offCanvas menu needs to be wna |
| $wdpk-mobile-header-breakpoint | '1' for xs, '2' for sm, '3' for md, '4' for lg set ot 5 to display on desktop only if $wdpk-enable-on-desktop is set to true else sass compiler will throw an error |
| $wdpk-code-block-style: light | Select the style of the code block light or dark |
| $wdpk-global-transition-duration | Transition duration set for theme animations |
| $wdpk-global-transition-function | Transition function used for animations for the theme |
| $wdpk-global-element-margin | Bottom margin used Globally for shortcodes |
| $wdpk-lightness-value | Lightness value used Globally throughout the theme. Needs to be negativ in case of a light theme and positive in case of a dark theme |
Source: variables/_variables-wdpk.scss, line 1397
Variables impacting the behaviour of animated page transitions
| Variable | Options |
|---|---|
| $wdpk-page-trans-enabled | true if you want the page transitions to work false if you want to disable the page transitions |
| $wdpk-page-trans-bg-color | Background color map for animated page transistions |
| $wdpk-page-trans-spinner-type | Option of .spinner-grow and .spinner-border . Ensure the classes are passed as it iss else Sass compiler will throw an error |
| $wdpk-page-trans-spinner-color | Page transitions spinner color |
Source: variables/_variables-wdpk.scss, line 1367
Variables impacting the Sidebar
| Variable | Options |
|---|---|
| $wdpk-sidebar-type | 1 - Clean, 2 - Sectioned, 3 - Outlined |
| $wdpk-sidebar-padding | The inner padding that is applied to the sidebar |
| $wdpk-margin-sections | The margin between the sidebar section |
| $wdpk-sidebar-background-color | Background color for sidebar |
| $wdpk-side-border | Set to true to enable tyhe divider else set to false |
| $wdpk-side-border-color | The color of the sidebar border |
| $wdpk-sidebar-shadow | Shadow map for Sidebars |
Source: variables/_variables-wdpk.scss, line 1051
Variables impacting the Top Bar
| Variable | Options |
|---|---|
| $wdpk-topbar-item-padding | left and right padding for the elements in the topbar |
| $wdpk-topbar-font-color | Font color |
| $wdpk-topbar-font-color-hover | Mouse over font color |
| $wdpk-topbar-height | Total height Of The Topbar |
| $wdpk-topbar-hover-transition-duration | Transition Duration On Mouseover |
| $wdpk-topbar-font-size | Font size for Topbar |
| $wdpk-topbar-font-family | Font family for Topbar |
| $wdpk-topbar-font-weight | Font weight for the Topbar |
| $wdpk-topbar-text-transform | Text Tranform properties for menu items 'uppercase' 'lowercase' 'capitalize' 'none' |
| $wdpk-topbar-font-line-height | Default line height for Topbar |
| $wdpk-topbar-background | All settings for the topbar background |
| $wdpk-topbar-border-map | Map for styling the borders of the topbar |