Part 9: Add more Design Elements
1. Design your header
In app/views/layouts/application.html.erb
change
to
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
:
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 https://www.w3schools.com/colors/colors_picker.asp
Then put these lines at the bottom to style the link colors; pick your own colors to compliment your header color:
2. Design your background
We simply use the twitter Bootstrap to polish our website.
You can change the background color by adding this to the application.css
file
You can use a pattern as the background, too. Reference to http://subtlepatterns.com/ for some patterns.
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
3. __Add style to footer
add the lines to bottom of app/assets/stylesheets/application.css
:
try put more things into footer
, then adjust its position.
4. Add style to the buttons
open http://localhost:3000/ideas/new 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:
Since our app uses bootstrap, we can use built in styles to quickly improve the look of our app. Learn more here: http://getbootstrap.com/2.3.2/base-css.html#buttons
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!
Last updated