Learn Ruby on Rails For Web Development (2015)

Chapter 9. TWEAKING THE LOOK AND FEEL AND FINISHING UP

Our app is basically done, but we can play around with the look and feel a little bit to make it feel a little more pinteresty.

We talked about customizing bootstrap earlier in the book. Head over to GetBootstrap.com and click the "Customize" link to search through the different variables that you can play with.

There are really only a few minor changes I'd like to make.

First, I'd like to make the general theme color red, like at Pinterest. So I'd like the links on the site to be red; I'd like the buttons of the site to be red; and I'd like the title text on the Navbar to be red.

Specifically, I'd like to use this color of red: #cb2027;

Searching through the bootstrap customization variables, I see that links are controlled by:

1 $link-color: #cb2027;
2

And to change the title color of the Navbar to red we need:

1 $navbar-default-brand-color: #cb2027;
2

And finally, to change the colors of our buttons, we need to tweak the "primary" button color using this variable:

1 $brand-primary: #cb2027;
2

Next, I'd like to swap out the background color of our site and the Navbar background color.

I'd like our site's basic background color to be a light grey in color, and I'd like the Navbar to be white.

1 $body-bg: #e9e9e9;
2 $navbar-default-bg: #ffffff;
3

What else can we tinker with? How about the color of the pagination thing at the bottom of the screen; let's highlight that with the same red color:

1 $pagination-active-bg: #cb2027;
2 $pagination-active-border: #cb2027;
3

Let's see...why don't we tinker with the Navbar height and make it a little shorter:

1 $navbar-height: 40px;
2

Looking good! Now let's put all of these together on our bootstraply.css.scss file:

/app/assets/stylesheets/bootstraply.css.scss
1 $navbar-default-bg: #ffffff;
2 $navbar-height: 40px;
3 $body-bg: #e9e9e9;
4 $navbar-default-brand-color: #cb2027;
5 $link-color: #cb2027;
6 $pagination-active-bg: #cb2027;
7 $pagination-active-border: #cb2027;
8 $brand-primary: #cb2027;
9
10 @import "bootstrap-sprockets";
11 @import "bootstrap";
12
13 .center {
14 text-align: center;
15 }
16

And I think we'll call this thing finished! Remember to put the variables ABOVE the @import lines in the CSS file, and the actual CSS (like our center class) BELOW the @import lines.

Let's save our work one last time!

1 $ git add .
2 $ git commit -am 'tweaked bootstrap ui'
3 $ git push
4 $ git push heroku master
5

ADDING A CUSTOM URL

So our app is done, now let's add a custom URL to our heroku production app. We don't really want people coming to oursite.herokuapp.com when it could just as easily be oursite.com or custom.oursite.com

Creating a custom URL is pretty easy. If you don't have a domain name, purchase one at any domain registrar like godaddy.com or namecheap.com (either of those is good; domain names tend to cost around $10 bucks a year).

You have a couple of options, you can either point an actual domain name to your new Rails app, or you can point a sub-domain.

SUB-DOMAINS

I'll start out with a Sub-Domain because it's the easiest to explain. For our app, I want to use the sub-domain http://rails.codemy.com

So when someone goes to rails.codemy.com, I want our app to show up.

Easy as can be!

Just head over to Heroku, log in, then click on your app. On the screen that pops up, click the "Settings" link at the top of the screen.

Scroll down the screen and you'll see a section titled "Domains", click the "Edit" button in the Domains section.

A little form field should pop up where you can enter your sub-domain (or regular domain). So let's enter our:

rails.codemy.com

Click the little green plus sign after you type it in, then click the "Save" button.

What we've just done is tell Heroku that you'll be using rails.codemy.com as your apps URL. They just need a heads up.

Next, you'll need to log into your web host or domain registrar and create a CName that points to your heroku app URL (yourURL.herokuapp.com).

Every webhost and domain name registrar is different, so I can't really tell you how to do this step. You'll have to contact the support department of your specific host and ask them how to add a CName. It's usually pretty straight forward.

ADDING A CUSTOM DOMAIN

So that was how to add a sub-domain (rails.codemy.com) but how do you point a regular domain towards your app (like yoursite.com)??

It's the exact same process as before; log into Heroku, click "Settings" navigate down to the "Domains" section, and add your domain. But instead of typing in whatever.yoursite.com just type in yoursite.com

Note, you can't point www.yoursite.com to your app, it has to be yoursite.com (without the www).

Then like before, you need to contact your domain registrar and ask them how to add a CName to your domain. They'll tell you. Point that CName to your heroku URL (yourURL.herokuapp.com).

Heroku has an article about it that you can read if you're confused:

https://devcenter.heroku.com/articles/custom-domains

That's that!