What are themes

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.

Theme files

To create a theme, enter the themes directory, there you will see a folder called BLANK_THEME_CSS, 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 CSS theme directory, enter the directory and there you will see a file called blank-styles.css rename this file as appropriate, for example coffee-shop-styles.css

Link your theme

Your theme is now ready to be used. To use your theme you will need to reference it under your Ensemble framework core file of style.css 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">

Overrides

Upon opening your newly created theme file coffee-shop-theme.css you will notice that it is largely empty, except for text, and color scheme styles (These styles have been removed in the example opposite for brevity), the rest of the file is full of CSS comments, outlining where code should be located, these empty sections are where your overrides will be created.

The text and color scheme styles are included by default as they will be the areas most likely to be changed by the majority of users. In the text and color scheme CSS you will be able to change, font sizes, fonts, line height, brand background colors, brand text colors, brand border colors and lots more besides.

/* ========================================

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

======================================== */
/* ========================================
01. Text
======================================== */
/* ========================================
02. Colour Scheme
======================================== */
/* ========================================
03. Backgrounds
======================================== */
/* ========================================
04. Headers
======================================== */
/* ========================================
05. Footers
======================================== */
/* ========================================
06. Sidebars
======================================== */
/* ========================================
07. Nav
======================================== */
/* ========================================
08. Mobile Nav
======================================== */
/* ========================================
09. Accordion
======================================== */
/* ========================================
10. Alerts
======================================== */
/* ========================================
11. Animations
======================================== */
/* ========================================
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. Testimonials
======================================== */
/* ========================================
32. Video
======================================== */
/* ========================================
32. Forms
======================================== */

Creating an override

Once you decided which core block you wish to override, you should open up the styles.css file in the css directory, this is the core Ensemble stylesheet. For example lets override the Tags block, in the styles.css style sheet locate item 32 (locate a block in the contents, then use your text editors search feature to locate the item quickly). Once you have located the item copy the css and go back to your theme stylesheet coffee-shop-styles.css in your theme stylesheet find the empty tags location and paste the CSS into it. you can now non-destructively alter the appearance of the Tags block.

/* ========================================
The original Tags block taken from the
Ensemble core
======================================== */
/* ========================================
32. Tags
======================================== */
.tag-item {
  text-decoration: none;
  padding: 5px 12px;
  float: left;
  background-color: #dddddd;
  color: #ffffff;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.tag-item:hover {
  background-color: #c4c4c4;
}

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 overridden Tags block in the
coffee-shop-styles.css file
======================================== */
/* ========================================
29. Tags
======================================== */
.tag-item {
  text-decoration: none;
  padding: 8px 10px;
  float: left;
  background-color: #cccccc;
  color: #000000;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.tag-item:hover {
  background-color: #dddddd;
}