Hi all, now for the most exciting part! Installing a bootstrap theme. Ok, ok, you caught me, it’s not really the most exciting part but it will help our page not look like a 1990’s geocities page. If you missed that reference good for you, that also means you missed Ocarina of Time too, in which case I’m sorry.
Anyways to get back on track the free theme we’re going to be using is called the gentelella theme and can be found here . Let’s talk about this theme real quick, it’s free which is awesome, but most of the elements are built in jquery which isn’t so awesome because the way angular lazy loads templates the jquery code runs before the elements exist on the page. If you want to hack around at jquery you can convert these to angular components but none the less it serves as a good example on working with a theme in a custom webpage. If you’d like to use a custom theme where the components are made in Angular 1 the process is roughly the same but a little different, most of the themes i’ve found using Angular1 and especially Angular 4/React are all paid but if you can pay 20 dollars and save yourself an hour doing something in business it’s probably a good idea but that’s all economic opportunity cost analysis which i’ll be talking more about on my personal blog
First we download and extract the theme and poke around. We can see there are a ton of examples in the production folder. Index.html usually is a good place to start. Let’s open this up in a browser and a text editor.
Ok this looks like a pretty solid theme, we can see some type of login status, examples of lots of charts if we’re tracking metrics, a drop down email/notification system in the top right, a collapsable menu system on the left, and lots of components we can poke around with. For the scope of this tutorial the basic menu structure, the signed in status, and some kind of messaging template will be of most interest.
Under the extras section we can see a “plain_page” view. This seems like a straight forward place to start bringing stuff into our project. Let’s open plain_page.html in a text editor.
Going back into our project lets open up index.html and make those changes stated above.
If you carefully compare are index.html to the theme’s demo index.html you will see quite a bit is different. First i ripped out a lot of the button in the side navigation. There is a commented out part where I was going to move the sidebar into a partial but the jquery bug I was talking about above stuck. As much as I’d like to keep a a stripped down index.html file we will keep the sidebar here for jquery to register it’s event handlers on.
The header has been moved into a partial that angular will load on initialization. As an exercise try moving the header content from the theme’s index.html into the ‘/static/partials/header.htm’ folder and see if it renders correctly in your page. Also replace the content inside of /static/views/main.htm that we set up last time with the main content from the theme’s page.
You can find that specific content here
That sure looks a lot better then what we had before doesn’t it. Comment below if you ran into any troubles. Next time we will try to work with some AWS IAM and DynamoDB! Please follow me on twitter for that update