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.

results matching ""

    No results matching ""