Project Design Customization

Although your project may look snazzy out-of-the-box and we provide basic color configuration for our various tools, you may want to make additional changes to your project's look-and-feel. We provide basic ways to add customization to the project's styles and scripts.

Custom Styles

You can override default css styles by editing this file:

my_project/
+-- assets/
|  +-- css/
|    +-- styles.css

You can also load custom images and fonts via CSS if you put the image/font files in your project's directory:

my_project/
+-- assets/
|  +-- images/
|     +-- my_logo.svg
|  +-- fonts/
|     +-- MyFont.eot
|     +-- MyFont.woff

And you can refer to these assets in your styles.css file like so:

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont.eot');
  src: url('/fonts/MyFont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/MyFont.woff') format('woff');
}

.home-page .logo:before {
  content: ' ';
  background-image: url('/images/my_logo.svg');
}

Custom Javascript

In some cases, you may want to load arbitrary javascript on your project's pages such as analytics or external fonts. You can do this by editing the following javascript file:

my_project/
+-- assets
|  +-- javascript
|    +-- custom.js

For example, you can load your Google Analytics code by adding this to custom.js:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  
ga('create', 'UA-12345678-9', 'auto');
ga('send', 'pageview'); 

Or you could dynamically load a custom Google Font like so:

WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif:bold']
  }
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);

---

Next step: Load Your Project