Themes are a set of CSS files that serve the sole purpose of overriding core styles. The Ensemble core should remain untouched, and all customisation should be done through a theme, this means your site functionality will stay intact, but the look and feel of your site can be altered drastically if required.
To create a theme, enter the themes directory, there you will see a folder called BLANK_THEME, duplicate this folder and then rename it as appropriate, for example if you are creating a site for a coffee shop, you might name the theme coffee-shop-theme.
Once you have duplicated the blank theme directory, enter the directory and there you will see 6 SCSS files, 5 of which are partials. _blank-backgrounds.scss _blank-colour-scheme.scss _blank-config.scss _blank-overrides.scss _blank-text.scss and _blank-styles.scss which is not a partial.
Rename each file to the name of your theme, for example _blank-backgrounds.scss would become _coffee-shop-backgrounds.scss. The last non partial file blank-styles.scss is the file that will compile all others to create your theme so rename that file to coffee-shop-styles.scss too, make sure not to use an underscore before its name, remember you WANT this file to compile.
Once you have changed your theme file names, open up your newly named coffee-shop-styles.scss file. You will see that the other 5 files in your theme are all compiled in this one file. Rename the @import statements to match your newly named files, for example @import "blank-backgrounds"; would become @import "coffee-shop-backgrounds";.
There is no need to alter @import "../../sass/helpers/mixins"; as this will give you access to the Ensemble mixins in your theme.
/* ========================================
Theme: Blank Theme
Version: 1.0
Copyright of Vidal Themes
CONTENTS
01. Text
02. Color scheme
03. Backgrounds
04. Headers
05. Footers
06. Sidebars
07. Nav
08. Mobile Nav
09. Accordion
10. Alerts
11. Animation
12. Blog
13. Buttons
14. Draws
15. Hero Unit
16. Icon Boxes
17. Maps
18. Modal
19. Notices
20. Overlays
21. Parallax
22. Isotope
23. Preloaders
24. Pricing
25. Promo Boxes
26. Sliders
27. Social Networks
28. Tabs
29. Tags
30. Team
31. Testimonial
32. Video
33. Forms
======================================== */
@import "../../sass/helpers/mixins";
@import "blank-config";
@import "blank-text";
@import "blank-colour-scheme";
@import "blank-backgrounds";
@import "blank-overrides"
Now that you have created your theme, you are ready to override the Ensemble core. To override a core file first open the SASS directory, and locate the file you wish to override, in this instance we will use the tags.scss file located in the components directory.
Open up tags.scss and copy the contents, then return to your theme coffee-shop-theme and open up the _coffee-shop-overrides.scss file, locate the empty comment section 29. Tags and paste in the code, your tags block is now ready to be non-destructively overridden.
/* ========================================
The original Tags block taken from the
Ensemble core sass/components directory
======================================== */
/* ========================================
32. Tags
======================================== */
.tag-item {
text-decoration: none;
padding: 5px 12px;
float: left;
background-color: $tag-background-color;
color: $tag-text-color;
transition: all 0.5s ease-in-out;
&:hover {
background-color: darken($tag-background-color, 10%)
}
}
Once you have transplanted core styles into a theme, you can alter them in any way you wish and your new styles will override the core.
/* ========================================
The original Tags block taken from the
Ensemble core sass/components directory
======================================== */
/* ========================================
32. Tags
======================================== */
.tag-item {
text-decoration: underline;
padding: 8px 10px;
float: right;
background-color: $tag-background-color;
color: $tag-text-color;
transition: all 0.3s ease-in-out;
&:hover {
background-color: darken($tag-background-color, 10%)
}
}
Your theme is now ready to compile. Decide if you would like to serve your theme stylesheet from the CSS directory or from the THEMES / YOUR-THEME directory, which ever you prefer is fine. You should then have your newly created coffee-shop-styles.scss compile to coffee-shop-styles.css and link it in the head section of your page.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="themes/coffee-shop-theme/coffee-shop-styles.css">
There are 6 different files that make up a theme in Ensemble, opposite is a description of what they each do.
| Files | Description |
|---|---|
| _blank-backgrounds.scss |
This file will hold all your background images, used in blocks such as Parallax, and hero units, this file serves to centralise your background images making them easy to swap out when needed. |
| _blank-colour-scheme.scss |
This file holds all the scss for generating your site color scheme classes. it will generate the background-color-, border-color- and text-color- classes, which will be populated with the colors set in your theme config file. |
| _blank-config.scss |
The main theme config file is a duplicate of the core Ensemble config file, but for use on a per theme basis, it will act as an override for the core config file, using the config file is the fastest way to customise your site. The config file has a section of its own later on this page. |
| _blank-overrides.scss |
This file is blank except for css commented sections, outlining where your core overrides should be located. |
| _blank-text.scss |
The text file is used to override any of Ensembles typography, you can alter all aspects of your sites typographic styles with this file, and the config file. |
| blank-styles.scss |
The only file in your theme that is not a partial, this file acts as a hub to pull in the other partial theme files, and output them as your unified theme stylesheet upon compilation. |
Working with your themes config file is the simplest and fastest way to customise your site. All the main options are contained in this file, from the amount of columns used in the grid system, down to the background color of your accordions.
many of these items will be self explanatory as using the BEM naming convention makes their use obvious, however more detailed explanations will be given below on each part of the config file.
// Grid
$grid-columns: 12;
$grid-width: 100%;
$grid-container-width: 1100px;
$breakpoint-large: "(max-width: 64em)";
$breakpoint-medium: "(max-width: 48em)";
$breakpoint-small: "(max-width: 34em)";
$breakpoint-xsmall: "(max-width: 25em)";
// Typographic
$line-height: 1.65;
$text-margin-bottom: 1.5rem;
$text-base-font-size: 15px;
$text-base-heading-size: 3rem;
// Fonts
$text-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
$heading-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
$heading-font-special: "Sacramento", cursive;
$heading-weight: 400;
// Typography colors
$body-text-color: #909090;
$heading-text-color: #303030;
$footer-body-font-color: #909090;
$footer-heading-font-color: #909090;
$link-color: #000000;
$link-color-hover: #909090;
$heading-link-color: #8e8e8e;
$heading-link-hover: #000000;
$logo-color: #909090;
// Colour scheme
$color-1: $body-text-color; // Matches body font color
$color-2: $heading-text-color; // Matches heading color
$color-3: #607D8B; // Brand colour 1
$color-4: #97B6C5; // Brand colour 2
$color-5: #A3BAC5; // Brand colour 3
$color-6: #506068; // Brand colour 4
$color-7: #1F475A; // Brand colour 5
$color-8: #DCC894; // Brand colour 6
$color-9: #000000; // Solid Black
$color-10: #ffffff; // Solid white
$color-11: #f8f8fa; // Soft grey
$color-12: #e5e6eb; // Light grey
$color-13: #c0c2ce; // Mid grey
$color-14: #afafaf; // Dark grey
$button-color-1: #039BE5;
$button-color-2: #0288D1;
$button-color-3: #0277BD;
$button-color-4: #01579B;
$warning-color-red: #ed4040;
$warning-color-amber: #ffae00;
$warning-color-green: #3dd326;
// Navigation
$navbar-height: 100px;
$navbar-submenu-height: 50px;
$main-nav-text-transform: uppercase;
$main-nav-text-color: #909090;
$main-nav-text-color-hover: #cccccc;
$main-nav-submenu-text-color: #909090;
$main-nav-submenu-text-color-hover: #cccccc;
$main-nav-submenu-background-color: #303030;
$mobile-nav-text-color: #909090;
$mobile-nav-text-color-hover: #cccccc;
$mobile-nav-submenu-text-color: #303030;
$mobile-nav-submenu-text-color-hover: #cccccc;
$mobile-nav-submenu-background-color: #303030;
$mobile-nav-background-color: #ffffff;
$sub-nav-text-color: #909090;
$sub-nav-text-color-hover: #cccccc;
// Header
$header-height: $navbar-height;
$resized-header-height: $navbar-height -30px;
// Components
$accordion-background-color: $color-11;
$accordion-border-color: $color-11;
$draw-background-color: $color-11;
$draw-border-color: $color-11;
$tag-text-color: #ffffff;
$tag-background-color: $color-11;
$modal-background-color: #000000;
$map-background-color: #00b6ff;
// Image overlays
$overlay-background-color: #f8f8f8;
Here you can adjust aspects of the grid system. $grid-columns: dictates how many columns your grid system spans, by default it spans 12 columns, this can be changed as needed, but remember to adjust the amount of span areas you use accordingly.
$grid-container-width: refers to the amount of space the content area takes up.
Breakpoints are set in em's these can be changed to suit your needs, remember to update the mobile nav breakpoint when adjusting any of the media queries.
// Grid
$grid-columns: 12;
$grid-width: 100%;
$grid-container-width: 1100px;
$breakpoint-large: "(max-width: 64em)";
$breakpoint-medium: "(max-width: 48em)";
$breakpoint-small: "(max-width: 34em)";
$breakpoint-xsmall: "(max-width: 25em)";
In this section you can adjust your line height, and the bottom margin on paragraphs and headings. You can also adjust the text base size, this is used to control rem based sizing of headings too, keep in mind that you may also have to adjust media queries in the _blank-text.scss file if you opt to change the base font size. The base setting for headings is set in rems with 3rem being the starting point at h1.
In this section you can also set your primary font family for headings and paragraphs, and a secondary font for use in special circumstances.
// Typographic
$line-height: 1.65;
$text-margin-bottom: 1.5rem;
$text-base-font-size: 15px;
$text-base-heading-size: 3rem;
// Fonts
$text-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
$heading-font: "Source Sans Pro", Helvetica, Arial, sans-serif;
$heading-font-special: "Mr Dafoe", Helvetica, Arial, sans-serif;
$heading-weight: 300;
In this section you can create your sites colour palette. here you can set 14 colours for use on your site, we recommend setting color-1 to match your main font colour, color-2 to match your heading color, color-9 to be solid black, and color-10 to be solid white. This leaves colours 3 - 8 for your branding colours, and colours 11 - 14 for your grey pallette.
These colours are then assigned to various classes, that you can use to easily apply your colours in a consistent manner across your site. These classes are background-color-, border-color- and text-color-, these classes will always match like for like, for example class="background-color-3" will always match up to text-color-3.
// Typography colors
$body-text-color: #909090;
$heading-text-color: #303030;
$footer-body-font-color: #909090;
$footer-heading-font-color: #909090;
$link-color: #000000;
$link-color-hover: #909090;
$heading-link-color: #8e8e8e;
$heading-link-hover: #000000;
$logo-color: #909090;
// Colour scheme
$color-1: $body-text-color; // Matches body font color
$color-2: $heading-text-color; // Matches heading color
$color-3: #607D8B; // Brand colour 1
$color-4: #97B6C5; // Brand colour 2
$color-5: #A3BAC5; // Brand colour 3
$color-6: #506068; // Brand colour 4
$color-7: #1F475A; // Brand colour 5
$color-8: #DCC894; // Brand colour 6
$color-9: #000000; // Solid Black
$color-10: #ffffff; // Solid white
$color-11: #f8f8fa; // Soft grey
$color-12: #e5e6eb; // Light grey
$color-13: #c0c2ce; // Mid grey
$color-14: #afafaf; // Dark grey
$button-color-1: #039BE5;
$button-color-2: #0288D1;
$button-color-3: #0277BD;
$button-color-4: #01579B;
$warning-color-red: #ed4040;
$warning-color-amber: #ffae00;
$warning-color-green: #3dd326;
The majority of the navigation settings are self explanatory, with the possible exception of $nav-item-height: and $submenu-nav-item-height: these items control the height of the navigation inside the resizing fixed header. You will notice that $header-height in the header section is equal to $navbar-height and that should always be the case.
$resized-header-height: is the size you would like the header to shrink to after you have scrolled past the point the header resizes.
// Navigation
$navbar-height: 100px;
$navbar-submenu-height: 50px;
$main-nav-text-transform: uppercase;
$main-nav-text-color: #909090;
$main-nav-text-color-hover: #cccccc;
$main-nav-submenu-text-color: #909090;
$main-nav-submenu-text-color-hover: #cccccc;
$main-nav-submenu-background-color: #303030;
$mobile-nav-text-color: #909090;
$mobile-nav-text-color-hover: #cccccc;
$mobile-nav-submenu-text-color: #303030;
$mobile-nav-submenu-text-color-hover: #cccccc;
$mobile-nav-submenu-background-color: #303030;
$mobile-nav-background-color: #ffffff;
$sub-nav-text-color: #909090;
$sub-nav-text-color-hover: #cccccc;
// Header
$header-height: $navbar-height;
$resized-header-height: $navbar-height -30px;