Home arrow Ruby-on-Rails arrow Adding Style with Action Pack
RUBY-ON-RAILS

Adding Style with Action Pack


In this conclusion to an eighteen-part series on the Action Pack library for Rails, we'll take the application we've built in previous parts and give it some style. This article is excerpted from chapter six of the book Beginning Rails: From Novice to Professional, written by Jeffery Allan Hardy, Cloves Carneiro Jr. and Hampton Catlin (Apress; ISBN: 1590596862).

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
August 10, 2011
TABLE OF CONTENTS:
  1. · Adding Style with Action Pack
  2. · Highlighting the Selected Tab

print this article
SEARCH DEVARTICLES

Adding Style with Action Pack
(Page 1 of 2 )

Giving It Some Style

Our events application could use a little varnish. We’ll update the layout, apply a style sheet, and add a helper that will make it possible to highlight the tab the user has selected.

Updating the Layout

Let’s update the main layout and add in some style hooks that we can target via CSS, as shown in Listing 6-32.

Listing 6-32. Updated app/views/layouts/application.rhtml

<html>

<head> <title>Events</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <%= stylesheet_link_tag 'application' %> <%= javascript_include_tag :defaults %>

</head>

<body> <div id="application"> <div id="header"> <div class="container"> <div class="statusbar"> <div class="logo">

<strong>Eventalicious!</strong> </div> <div class="menu">

<% if logged_in? %> logged in as: <%= current_user.login %> (<%= link_to 'logout', logout_url %>)

<% else -%> <%= link_to 'signin', login_url %> <% end -%>

</div> </div> <br style="clear:both;" /> <div class="tabs">

<ul class="navigation">

<li> <%= link_to('Events', events_url) %> </li> <% if logged_in? %>

 

<li>

 

<%= link_to('New Event', new_event_url) </li> <% end -%>

</ul> </div> </div> </div>

<div id="page">

<div id="content"> <% if flash[:notice] %> <div class="flash"><%= flash[:notice] %></div> <% end -%>

<%= yield %>

</div> <hr /> </div>

<div id="footer"></div> </div> </body> </html>

Applying a Style Sheet

We’ve taken the trouble to prepare a simple CSS style sheet that you can apply to make the application look pretty. Listing 6-33 shows the application.css file, which should go in the /public/stylesheets directory.

Listing 6-33. The public/stylesheets/application.css File

/**

* Application.css*/

@media print { #sidebar { display: none; } #content { float: none; width: 90%; } }

body { background: #e1e1e1; font: normal 14px "lucida grande", arial, helvetica, sans-serif; }

h1,h2,h3,h4,h5,h6 { font-family: helvetica, arial, sans-serif; }

h1 { font-size: 28px; margin-bottom: 15px; } h2 { font-size: 18px; margin-bottom: 15px; } h3 { font-size: 17px; margin-bottom: 15px; }

input { font: normal 12px "lucida grande", verdana, sans-serif; } textarea { font: normal 12px "bitstream vera sans mono", monaco, "courier new", courier, monospace; }

code, pre { font: normal 80% "bitstream vera sans mono", monaco, "courier new", courier, monospace; }

abbr { border: none; } cite { font-style: normal; }

img { border: none; }

a { text-decoration: underline; padding: 1px; }

a:link, a:visited { color: #03c; }

a:hover, a:active { color: #fff; background: #000; text-decoration: none; }

a.cancel, a.cancel:link, a.cancel:visited { color: #c00; }

a.delete, a.delete:link, a.delete:visited { color: #990000; }

hr { visibility: hidden; clear: both; }

/*==================================================

* Definitions for layout (positioning, width, height, margin, padding)*
* #application

 

* #header

 

* #page

 

* #content

 

*#sidebar

 

* #footer ==================================================*/

 

body { text-align: center; margin: 0; padding: 0; }

#header { float: left; width: 100%; } #header .container, #footer { width: 800px; margin: auto; } #header .statusbar { margin: auto; padding: 4px 12px; height: 16px; } #header .statusbar .logo { float:left; } #header .statusbar .menu { float:right; }

#page { width: 759px; margin-left: auto; margin-right: auto; margin-bottom: 5px; padding: 16px; text-align: left; clear: both;

}

#content { min-height: 360px; }

#footer { text-align: left; clear:both; } /*==================================================

* Definitions for the tabbed interface

 

* Tab colors are meant to be customized to your liking==================================================*/

 

#header .statusbar { color: #ddd; background: #333; font-size: 11px; border-bottom: 2px solid #272727;

}

#header { background: #141414; }

/*------------------------------------------------The background color of all tabs -------------------------------------------------*/

#header .tabs li { background: #272727; }

/*------------------------------------------------The text color of all tabs -------------------------------------------------*/

#header .tabs a { color: #fff; }

/*------------------------------------------------The hover color of all tabs -------------------------------------------------*/

#header .tabs a:hover { background: #fff; color: #090;

}

/*------------------------------------------------The colors of a selected tab -------------------------------------------------*/

#header .tabs a.selected,

#header .tabs a.selected:hover { background: #fff; color: #222; font-weight: bold;

}

/*------------------------------------------------Tab dimensions and layout properties -------------------------------------------------*/

#header .tabs ul { margin: 0 16px; padding: 0; list-style-type: none;

}

#header .tabs li { float: left; margin: 0; padding: 0; display: inline;

}

#header .tabs a { float: left; margin: 0; padding: 0.5em 1.8em; text-decoration: none;

}

/*==================================================

* Main interface definitions

 

* Everything other than 'layout' and 'tabs'==================================================*/

 

/*------------------------------------------------Header -------------------------------------------------*/

#header .statusbar .menu a:link, #header .statusbar .menu a:visited { color: #ddd; text-decoration: none; } #header .statusbar .menu a:hover, #header .statusbar .menu a:active { color: #fff; } #header .statusbar .menu a.selected { color: #fff; font-weight: bold; }

#header .statusbar .logo strong { color: #fff; font-size: 12px; }

/*------------------------------------------------Page -------------------------------------------------*/

#page { background: #fff; border-bottom: 4px solid #ccc; border-right: 4px solid #ccc; border-left: 4px solid #ccc; }

/*------------------------------------------------Content -------------------------------------------------*/

#content h1 { margin-top: 0; }

#content ul { list-style: square; padding-left: 20px; }

/* list items */

#content .item { margin: 0 0 0.75em 0; padding: 0.6em; border: 1px solid #c1c1c1; background: #f6f6f6;

}

#content .item h3 { margin: 0 0 0.3em 0; padding: 0.2em 0 0 0.2em; border-bottom: 1px dotted #bbb; font-size: 20px; background: #fff;

}

#content .item h3 a { padding: 3px; }

#content .item h3 a:link, #content .item h3 a:visited { color: #000; text-decoration: none; } #content .item h3 a:hover { background: none; text-decoration: underline; }

/*------------------------------------------------Footer -------------------------------------------------*/

#footer { color: #666; font-size: 11px; }

#footer a:link, #footer a:visited { color: #666; } #footer a:hover { color: #fff; background: #333; }

/**

* Definitions for fields, buttons, and forms*

 

* Fieldsets can be nested; those containing radio buttons* or checkboxes can be given a class of 'radio' */

 

form { margin: 0; padding: 0; }

form label { color: #444; font-weight: bold; margin: 0 0.8em 0.3em 0; }

form input, form select { font-size: 14px; }

form input[type=submit] { font-size: 15px; }

form input.large { font-size: 18px; font-weight: bold; width: 80%; padding: 4px;

}

form input.huge { font-size: 22px; font-weight: bold; width: 90%; padding: 4px;

}

form textarea { width: 97%; padding: 0.3em; display: block; clear: both;

}

/**

* Rules for ActionPack's generated selectors*/

/*------------------------------------------------Error explanations -------------------------------------------------*/

div.errorExplanation { border: 2px solid #f00; padding: 7px 7px 12px 7px; margin-bottom: 20px; background-color: #fff;

}

div.errorExplanation h2 { color: #fff !important; font-size: 12px; font-weight: bold; text-align: left; background: #c00; padding: 5px 5px 5px 15px; margin: -7px;

}

div.errorExplanation p { color: #333; padding: 5px; margin-bottom: 0;

}

div.errorExplanation ul li { font-size: 12px; list-style: square;

}

/*------------------------------------------------Fields containing errors -------------------------------------------------*/

div.fieldWithErrors { display: inline; }

div.fieldWithErrors input, div.fieldWithErrors select { background: #ffc; }

/*------------------------------------------------Flash Messages -------------------------------------------------*/

div.flash { font-size: 12px; font-weight: bold; color: #390; background: #ffc;

margin: 0 0 1em 0; padding: 0.3em;

border: 1px solid #fc0; }

div.flash h2 { margin-top: 0; }

Yikes! That’s a lot of CSS! Don’t worry, though. We’ve placed all the code on the book’s web site ( http://beginningrails.com ), so you can download the CSS file and copy it into your project. We certainly don’t expect you to copy it all by hand.


blog comments powered by Disqus
RUBY-ON-RAILS ARTICLES

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials