29 May 2013

Tailoring a RefineryCMS 2.0 project - Part 2

in our last episode...

In Part 1 we prepared basic RefineryCMS, pushed it to production on Heroku, then added all the several key refinery engine extensions we'd like to have.
In Part 2, we'll be tailoring the layout and stylesheets. Steps after that include adding outside jQuery plugins.

prepping view overrides

Here's some suggestions to get you started; you may need more, depending on how you want to change styling. layouts/application.rb is to establish an overall Rails-type of layout for all pages. And you may want changes to the header (menu bar) and footer.
$ rake refinery:override view=layouts/application
$ rake refinery:override view=refinery/header
$ rake refinery:override view=refinery/footer

prepping assets for your app

You may want to review the Rails Asset Pipeline Guide for how and where to add your stylesheet, javascript, and image assets. I'll just make a couple of references here to get you started thinking.
  app/assets/javascripts/jquery.colorbox.js, jquery.quovolver.js
  app/assets/images/  ...add in any as needed
You'll want application.sass to provide your own styling. You can look at the html for a typical page to know which divs you wish to style. You may want to add additional jQuery plugins to improve your user interfaces. And of course, if you have any styling images, they'll need to be included as well. I like to replace the empty favicon.ico with my own; a nice little touch.

prepping any refinery extensions & overrides

You may want or need some code differences. I wanted to have certain page parts to be included within their own div id="sidebar_content". You'll need to reference these modules within the initialization sequence (shown below).

configuration & initialization

config.autoload_paths += %W(#{config.root}/lib)
config.autoload_paths += Dir["#{config.root}/lib/**/"]
  # add video tags to sanitize permitted tags
    config.action_view.sanitized_allowed_tags = 'table', 'tr', 'td', 'iframe'
    config.action_view.sanitized_allowed_attributes = 'id', 'class', 'style', 'src', 'width', 'height', 'frameborder'
    config.after_initialize do
        require  'gardenia_extensions'

        ::Refinery::Pages::ContentPresenter.send(:include, ::GardeniaExtensions::ContentPresenterExtension)
        ::Refinery::Pages::ContentPagePresenter.send(:include, ::GardeniaExtensions::ContentPagePresenterExtension)

config.new_page_parts = true

Comments? Questions? click here »