Customizing the landing page
First of all, open the file app/views/pages/landing.html.erb
and use the Find -> Find...
menu (or Ctrl + F
) to find the text or component you'd like to replace. Then, replace it!
Same goes for the images. As long as you put them somewhere in the app/assets/images
, you can reference them using an image_tag
.
If you need to add a link, here's what you can do. First, open your terminal and run:
$ rails routes
Then identify the page you want to link to. For instance, I'd like to link to /users/sign_up
. I see that the path name is new_user_registration
. So I will replace the social network links from the header from this:
<a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span></a>
to this:
<%= link_to("Register now", new_user_registration_path, class: "btn btn-default btn-lg")%>
And
<a href="https://github.com/IronSummitMedia/startbootstrap" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i><span class="network-name">Github</span></a>
I will replace with login button
<%= link_to("Sign in", new_user_session_path, class: "btn btn-default btn-lg")%>
I completely removed the third button.
In order to update the cover image, download it and save it to app/assets/images/img
folder. After that go to app/assets/stylesheets/pages/landing.css
, find class .intro-header
on line 33, and replace the background image path with the one of that you need, like that:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
color: #f8f8f8;
background: url(../img/ocean.jpg) no-repeat center center;
background-size: cover;
}
Do the same for .banner
class and update the footer image
.banner {
padding: 100px 0;
color: #f8f8f8;
background: url(../img/banner-bg.jpg) no-repeat center center;
background-size: cover;
}
Feel free to make any changes you want - get creative and don't hesitate to ask your mentors for help.