How to create or use a theme in Spina

This example will show you how to use a single page bootstrap theme as a template for Spina. The following steps are required

Install and setup the theme

1. Download a theme that includes the HTML template and all the assets. I picked http://startbootstrap.com/template-overviews/grayscale/

2. unzip the file somewhere - outside of your spina folder.

3. We are going to replace the default theme in this example.

4. From the downloaded bootstrap theme - copy the index.html file over on top of the default page layout.
   [spina-project-folder]/app/views/layouts/default/application.html.erb

5. edit application.html.erb and replace all the lines that include stylesheets and Javascript with the following
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>

6. from your bootstrap folder take each of the following folders 'img', 'js' and 'css' and move them to the following locations 'app/assets/images/default/', 'app/assets/javascripts/default/', 'app/assets/stylesheets/default' respectively.

7. rails s and go over to your website. You should have the theme displayed.

Modify the theme

We will now modify the theme pages so your content gets displayed. Before we being read up on how Spina does page layout and contents first from the Spina Readme. To summarize

How Spina pages are defined - setup Spina to have the areas and fields you need.

1. Page Layouts are defined in config/initializers/themes/default.rb for the default theme.
2. Each Page in Spina is based on a view template defined in this file under self.view_templates = {...}
3. Each view template includes multiple content fields (page_parts) defined under self.page_parts = [...]. Think of these as fields in a WP custom post type if you are coming from Wordpress.
4. Each content field can be added to a view template in the file with the page_parts:[...] setting.
5. When you create a new page in Spina, you pick the view template under the Advanced tab of the page editor using the Page Template field. IMHO this should not be an advanced setting but likely available upfront for selection.

Display the content in your theme

1. edit the app/views/layouts/default/application.html.erb that you had copied over.
2. find and replace the main content in this page with <%= yield %> since the actual rendering of the page content will be done elsewhere.
3. edit the content layout under app/views/[default]/pages/[homepage].html.erb. Note that default and homepage are the names of your theme and view template.
4. Assuming we are still changing the homepage layout under the default theme continue on.
5. Edit the file above and add the HTML you removed from application.html.erb in step 2 above into this file.
6. Within this homepage.html.erb file find the location where you need to display your page content and insert the following <%= @page.content(:content).try(:html_safe) %>
7. If you have added multiple page_parts or fields to your page then you can print them the same way by replacing :content with the :page_part_name

Reload your website and you should be able to see your new theme.

Other items

1. The page title is available as <%= @page.title %> for you to display
2. The menu is available as <%= render 'spina/shared/navigation' %> as a list. If you need to render this differently you can look up the navigation partial and change it as required.
3. You can add other variables to your view template as page_parts such as color, photo, gallery, line of text. These you can then insert into your view by using @page.content(:page_part_name) where page_part_name is the name of page part in the configuration file.