5.9. Adding a Bit of Style

One of the main reasons why you still can't quite call the output of the scaffold generator a blog is that it doesn't look like one. Create a couple more articles in order to have at least three of them to work with, and let's add some style.

To get a nice looking blog, you'll need a few stylesheet files and a few images. In a real-life scenario these would be provided to you by your Web designer. In order to follow along, download the code for this chapter from the wrox.com site and copy the stylesheets contained in the project_files folder, into the publicstylesheets directory of your project. Similarly, copy over the three images from the project_files folder you just downloaded into your publicimages directory. Also delete rails.png from that same directory, and publicstylesheetsscaffold.css because you won't need them anymore.

You'll start your customization by modifying the articles.html.erb layout. In this example I call the blog "The Rails Noob," so the first thing you can do is change the title tag:

<title>The Rails Noob</title>

Next, you need to link to the main stylesheet, which is going to be site.css:

<%= stylesheet_link_tag 'site' %>

You can add a logo (linked to the homepage) in plain HTML or by using the image_tag helper:

<%= link_to image_tag('logo.png', :width => '350', :alt => "The Rails Noob"), root_
path %>

You'll also need to add a few tags, and ids and classes attributes to give the blog a bit of structure and style. Listing 5-3 shows the full code of the articles.html.erb layout. Ensure that your layout looks the same by either typing the difference from Listing 5-3 or by copying the file from the downloaded directory (the file is named listing0503.html.erb).

Example 5.3. appviewslayoutsarticles.html.erb Customized
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>The Rails Noob</title>
  <%= stylesheet_link_tag 'site' %>
</head>
<body>
  <div id="header" class="container">
    <div id="logo">
      <%= link_to image_tag('logo.png', :width => '350', :alt => "The Rails Noob"),
 root_path %>
    </div>

    <ul id="nav" class="clear">
      <li><%= link_to 'Home', root_path %></li>
      <li><%= link_to 'New Article', new_article_path %></li>
    </ul>
  <!-- /header -->
  </div>

  <div id="main" class="container">
    <p style="color: green" id="notice"><%= flash[:notice] %></p>
    <%= yield  %>
  </div>

  <div id="footer" class="container clear">
    <div class="column span-6">
      &nbsp;
    <!-- /column -->
    </div>

    <div class="column span-4 last">
      <p>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
           Nullam sed lectus ut nisi hendrerit congue.</p>
      </p>
    <!-- /column -->
    </div>
  <!-- /footer -->
  </div>
</book>
</html>

Now you can tackle the index.html.erb template as shown in Listing 5-4.

Example 5.4. appviewsarticlesindex.html.erb Customized
<% for article in @articles %>
  <div class="article clear">
      <h2><%= link_to h(article.title), article %></h2>
      <div  class="column span-6">
          <div class="entry">
              <%=h article.body %>
          </div>
      <!-- /column -->
      </div>

      <div  class="column span-4 last">
          <div class="meta">
              <h3>About this article</h3>
              Published on <%= article.published_at.to_s(:long_ordinal) %>
          </div>

          <div class="tools">
              <h3>Tools</h3>
              <%= link_to 'Edit', edit_article_path(article) %>]]> ·<![CDATA[
              <%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method
=> :delete %>
          </div>
      <!-- /column -->
      </div>
  <!-- /article -->
  </div>
<% end %>

Note in the following line that the date and time format are set to appear in the long ordinal format:

Published on <%= article.published_at.to_s(:long_ordinal) %>

Time and dates can be easily formatted using one of the existing format types and you can even define your own formats as explained later on in the book.

The end result of the cosmetic changes that you've applied so far is shown in Figure 5-13.

That looks much better! But notice how the oldest post (the one that you initially created) appears first, which is the opposite of how a blog normally works. You can fix this by modifying the index action in the controller and specifying the order of the retrieved articles as follows:

def index
  @articles = Article.find(:all, :order => "published_at DESC")

  respond_to do |format|

format.html # index.html.erb
    format.xml  { render :xml => @articles }
  end
end

Figure 5.13. Figure 5-13

ActiveRecord's finders are extremely flexible and accept many options including :order. This fixes the order issue as shown in Figure 5-14.

Now that you've embellished the layout for the Articles controller and the template for the index action, you can customize the _form.html.erb partial slightly, for the new and edit actions as shown in Listing 5-5.

Figure 5.14. Figure 5-14

Example 5.5. appviewsarticles\_form.html.erb Customized
<% form_for(article) do |f| %>
  <%= f.error_messages %>
  <% field_set_tag do %>
    <div class="field">
      <%= f.label :title %>
      <%= f.text_field :title %>
    </div>

    <div class="field">
      <%= f.label :body %>
      <%= f.text_area :body %>
    </div>

<div class="field">
      <%= f.label :published_at %>
      <%= f.datetime_select :published_at %>
    </div>

    <div class="field">
      <%= f.check_box :published %>
      <%= f.label :published %>
    </div>
  <% end %>

  <% field_set_tag do %>
    <%= f.submit button_value, :class => "button" %>
  <% end %>
<% end %>

Notice how f.submit accepts a :class optional argument to specify the CSS class of the button.

Showing the articles, creating, and editing them is all good, but what about the show action? Figure 5-15 shows you a less than satisfactory default look.

Figure 5.15. Figure 5-15

You can change this by modifying the show.html.erb template as shown in Listing 5-6.

Example 5.6. appviewsarticlesshow.html.erb Customized
<div class="article clear">

  <h1><%= h(@article.title)%></h1>

  <div  class="column span-6">
      <div class="entry">
          <%=h @article.body %>
      </div>
  <!-- /column -->
  </div>

  <div  class="column span-4 last">
      <div class="meta">
          <h3>About this article</h3>
          Published on <%=h @article.published_at.to_s(:long_ordinal) %>
      <!-- /meta -->
      </div>

      <div class="tools">
          <h3>Tools</h3>
          <%= link_to 'Edit', edit_article_path(@article) %>]]> ·<![CDATA[
          <%= link_to 'Destroy', @article, :confirm => 'Are you sure?',
                                          :method => :delete %> ·
      <!-- /tools -->
      </div>
  <!-- /column -->
  </div>

<!-- /article -->
</div>

The result of this cosmetic change is shown in Figure 5-16.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.219.239.118