Part 9: Add more Design Elements

Last updated 6 years ago

1. Design your header

In app/views/layouts/application.html.erb change

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<body>
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">

now that the navbar has a new class, we can design the style ourselves.

put the following code to the bottom of app/assets/stylesheets/application.css:

.navbar-custom {
 background-color: #BBBDDD;
 border-color: #E7E7E7;
}

Now refresh the page and check the changes. You can try change the color or font of the header. You can check the color reference from

Then put these lines at the bottom to style the link colors; pick your own colors to compliment your header color：

.navbar-custom a { font-size: 18px; }
.navbar-custom a:hover { 
  color: #4a4a54; 
  background-color: transparent; 
  text-decoration: none;
}

You can change the background color by adding this to the application.css file

body {  background-color: rgba(200, 255, 255, 50);}

Put your desired image file in app/assets/images/ and add body { background-image:url('your_image_name.png');} to your application.css file.

For the image to work on heroku, edit the config/environments/production.rb file and change config.assets.compile = false to

config.cache_classes = true
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true

add the lines to bottom of app/assets/stylesheets/application.css:

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

try put more things into footer, then adjust its position.

edit the bottom of your app/views/ideas/_form.html.erb file and change the submit button line to:

  <%= form.submit 'Save', :class => 'btn btn-info' %>

Go and find the button for the comments form and update its style, too.

Let your imagination go wild, adding more style your custom website!