Layouts and Goldberg

You can customise the layouts that come with Goldberg, or integrate your own layouts. This is not hard, but you will need to know some HTML and CSS.

Essentially you need to produce a layout that contains links to any of Goldberg’s features that you require: a Suckerfish menu, breadcrumbs, login form etc. Goldberg 0.2 offers some helpers to assist with this. You also need to put any supporting files in public/.

This website demonstrates the use of a custom layout: it is a third-party template with Goldberg’s partials etc. inserted into it.

1. Start by copying your new layout’s HTML page to application.rhtml (move the existing application.rhtml file out of the way first: it will come in useful). Copy all the supporting files into public/—images, stylesheets, javascript etc.
2. Test your page: does it render correctly? (Note that we haven’t configured it to contain any Rails/Goldberg content yet.)
3. There are various tags that need to be inserted into the header. This will insert an appropriate title for the page:

     <title><%= goldberg_title %></title>
   

   You also have to include links to Goldberg’s stylesheet and Javascript files:

   <link rel="stylesheet" href="/stylesheets/goldberg.css" 
     type="text/css" media="screen" />
   <link rel="stylesheet" href="/stylesheets/layout.css" 
     type="text/css" media="screen" />
   
   <%= javascript_include_tag :defaults %>
   <script type="text/javascript" src="/javascripts/suckerfish.js"></script>
   

4. Insert the ERB (Embedded Ruby) code to display the body of the page plus any flash messages:

   <% if flash[:note] -%>
   <div class="flash_note"><%= flash[:note] %></div>
   <% elsif flash[:error] -%>
   <div class="flash_error"><h1>Error!</h1><%= flash[:error] %></div>
   <% end -%>
   <%= yield %>
   

5. Insert the helpers to include any required Goldberg partials. For the menu include this:

   <div class="navbar">
     <div class="topmenu">
       <ul id="suckerfish">
         <%= goldberg_suckerfish_menu %>
       </ul>
     </div>
   </div>
   

   For the breadcrumbs insert this:

       <div class="breadcrumbs">
         <%= goldberg_breadcrumbs %>
       </div>
   

   For the login form insert this:

       <%= goldberg_login %>
   

6. Edit your layout’s CSS to render the Suckerfish menu appropriately. This is probably the hardest part of the process. The easiest way is to start with Goldberg’s layout.css: copy & paste all the Suckerfish styles out of that into your own stylesheet. Then add your own modifications to change the colour and size etc.
7. You can include any other elements in your template, such as Google Adsense bars by inserting the code at the right point. (Additional elements like that won’t interfere with Goldberg.)

One of the most useful tools for editing your web pages is Firefox Web Developer. It lets you see the elements of your page, the styles that have been assigned to them, and much more. It’s highly recommended!

	Web goldberg.240gl.org