Theme Options

The main strength of WoodPecker is the ability it gives to the developer to customize the theme by just changing the values of a few Sass variables. Once you change the value it generates a new CSS files and hence providing you with a new unique version of WoodPecker to work with, each time for each of your projects.

Overriding SASS Variables

Every Sass variable in WoodPecker includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying the source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come BEFORE you import WoodPecker's Sass files as explained in the above section.

How to know which variables to override?

While building WoodPecker we made sure that we document each and every variable and there are 2 easy ways you can determine which variable needs to be changed.

1. Sass API Documentation: We have documented each and every variable and the WoodPecker Sass Variable Documentation can be checked for the same.
2. Inline Documentation: When overrding variable values there are only 2 files that need to be checked. Even Bootstrap itself has been abstracted and overridden by the values in these files.

                
├── WoodPecker
│   ├── dist                    -   (Main Folder To Start Working With)
│       ├── sass                -   (Contains all scss files)
│           ├── variables       -
│               ├── _variables-wdpk.scss    -   (Primary Variables File Containing All Variables)
│               └── _variables-wdpk-dark.scss      -   (Dark Version Variables)
                
            

The _variables-wdpk.scss is the main file that contains all the variables. Each component of WoodPecker® has its own variables defined in this file. You can look out for the component that you want to change and based on that you can make a change to the required variable to make the change to the final component. This is a sample code from the inline comments that explains what each of the variable does.

                

// Navigation Variables
//
// Variables impacting the Header Navigation for the theme.
//
// | Variable | Options |
// |----------|:-------:|
// | $wdpk-menu-height          | Sets the height of the header default `60px` |
// | $wdpk-menu-logo-width      | Sets the width of the header default `200px` `flex-start` `flex-end` `center`|
// | $wdpk-menu-logo-align      | Set the alignment for the logo in the header |
// | $wdpk-menu-align-items     | Align menu items `flex-start` `flex-end` `center` |
// | $wdpk-padding-menu-items   | Sets the padding between the primary menu items |
//
// Styleguide Theme.Navigation

$wdpk-menu-height: 60px !default;

$wdpk-menu-logo-width: 200px !default;

$wdpk-menu-logo-align: flex-start !default;

$wdpk-menu-align-items: flex-end !default;

$wdpk-padding-menu-items: 10px !default;