> For the complete documentation index, see [llms.txt](https://railsgirlskc.gitbook.io/workshop-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://railsgirlskc.gitbook.io/workshop-guide/part-9-add-more-design-elements.md).
# Part 9: Add more Design Elements
## 1. Design your header
In `app/views/layouts/application.html.erb` change
```markup
```
to
```markup
```
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`:
```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：
```css
.navbar-custom a { font-size: 18px; }
.navbar-custom a:hover {
color: #4a4a54;
background-color: transparent;
text-decoration: none;
}
```
## 2. Design your background and find the `Create Idea` button.
edit the bottom of your `app/views/ideas/_form.html.erb` file and change the submit button line to:
```ruby
<%= form.submit 'Save', :class => 'btn btn-info' %>
```
Since our app uses bootstrap, we can use built in styles to quickly improve the look of our app. Learn more here:
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!