1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Using Yahoo! UI to Give Your Blog That "Blog Look"


6 of 10

Adding Some CSS of Your Own
Using Yahoo! UI to Give Your Blog That "Blog Look"

Now it's time to start adding some CSS of your own design. This CSS will add formatting, color and the overall "blog look" to your page. To create your own stylesheet, create a new file in public/stylesheets called blog.css. Next, add a stylesheet tag to your blog layout file like the following.

<title>Posts: <%= controller.action_name %></title>
<%= stylesheet_link_tag
'http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css' %>
<%= stylesheet_link_tag
'http://yui.yahooapis.com/2.5.2/build/base/base-min.css' %>
<%= stylesheet_link_tag 'blog' %>

Now you'll want to add some statements to your new CSS file to add color and formatting to the blog page. The following example uses some muted blue colors and adds a bit of padding to the doc, bd and ft divs to prevent crowding.

#doc {
padding: 10px;

#hd h1 {
text-align: center;
font-size: 189%;

#bd {
background-color: LightSteelBlue;
padding: 10px;

#ft {
padding-top: 10px;

body {
background-color: LightSlateGrey;
  1. About.com
  2. Technology
  3. Ruby
  4. Ruby on Rails
  5. Adding Some CSS of Your Own

©2014 About.com. All rights reserved.