Themes

Themes permit you to create and customize content visualizations for all devices like: Desktop, Mobile and Tablet. This themes can be assigned for multiples sites at the same time without affecting the other sites.


Camaleon CMS manage multiple levels for themes to avoid rebuild or clone all theme files, i.e. the missing files will be inherit from default theme of Camaleon CMS and also you don't need to duplicate themes with small variations between sites, you can customize a theme file for a specific site.

All themes are located in app/apps/themes and the structure can be auto generated by the following command (the result of this generator is a clean theme with basic files, where you can add or edit the files without affecting the core):

rails g camaleon_cms:theme my_theme

Console result:

Structure:

Installation:
Go to admin -> appearances -> themes -> And choose your theme to install it for current site and then go to frontend.

Note: my_theme is the name of your theme.

Description:

  • assets
    This folder is similar to rails assets folder, that include all assets for the theme. For .sass and .scss files, you can use:
    background: #ffffff asset-theme-url('img/patterns/pattern1.jpg');
    background: #ffffff asset-theme-path('img/patterns/pattern1.jpg');
  • views/layouts (layouts)
    this folder contains layouts for the theme (default: index.html.erb). you can create several layouts for each of content and select it in post editor. To enable this, you need to edit your post_type and check layout support (admin -> settings -> post types -> edit).
    categories
    : looks for: layouts/categories/:category.the_slug if not, render index.html.erb
    post_type: looks for: layouts/post_types/:post_type.the_slug if not, render index.html.erb
    post_tag:
    looks for: layouts/post_tags/:post_tag.the_slug if not, render index.html.erb
    search: looks for: layouts/search if not, render index.html.erb
    profile: looks for: layouts/profile if not, render index.html.erb


  • views/ (templates)
    categories: looks for: categories/:category.the_slug if not, render category.html.erb
    post_type: looks for: post_types/:@post_type.the_slug if not, render post_type.html.erb
    post_tag:
    looks for: post_tags/:post_tag.the_slug if not, render post_tag.html.erb
    search:
    looks for:  search.html.erb
    profile:
    looks for: render profile.html.erb

  • views/admin/settings.html.erb
    This permit you to manage your custom settings for the theme. The content is included on admin->settings->site settings form (tab "Theme Settings"). Note: To save your custom values you will need on_theme_settings hook.
    Sample: https://gist.github.com/owen2345/10eecb77a9adce02dca2b5b8321cf280

  • views (post template)
    This folder include layouts and views for the theme.

    Templates:

    index.html.erb: view for render home page (default), you can change this on settings admin panel for a custom page
    page_10.html.erb: template for page with id = 10
    post_types/my_postype_slug.html.erb: template for post_type with slug = my_posttype_slug
    post_types/my_postype_slug/single.html.erb: template for pages within post_type with slug my_posttype_slug
    post_types/my_postype_slug/post_tag.html.erb: template for post tags within post_type with slug my_posttype_slug
    post_types/my_postype_slug/category.html.erb: template for categories within post_type with slug my_posttype_slug
    template_<my_template_name>.html.erb: templates listed on content editor if it accept templates. To enable this, you need to edit your post_type and check template support.
    single.html.erb:
    rendered for all post contents that not exist or not defined a template (default template)
    profile.html.erb:
    template for profile page
    search.html.erb:
    template for search page (support for param "post_type_slugs") to search in specific content groups
    post_tag.html.erb:
    template for all post tags
    post_type.html.erb:
    template for all posttypes
    category.html.erb:
    template for all categories
    category_cat_slug.html.erb:
    template for category with slug = cat_slug


    View verification structure:

    First: Check if a view is present in: app/apps/sites/{current_site.id}/views     ==>  (Permit to personalize theme for specific site)
    Second: Check if a view is present in: app/apps/themes/{current_theme}/views   ==>  (Current theme views)
    Third: Check if a view is present in: app/views/default_theme   ==> (default views)
    Note: all templates path of the views can be changed by the hooks, please check hooks for frontend.

    Content verification structure:
    1:
    verify page_<page.id>.html.erb
    2: verify for template defined in post editor or defined default template in (admin->settings->content groups -> edit -> default template)
    3: verify if current page is defined as home page => index.html.erb
    4: verify <post_type_slug>.html.erb =>Sample: page.html.erb
    Else: render single.html.erb
    Note: You can change this (template and layout) by hook "on_render_post"

    Layout verification:
    Use custom layout defined by post editor or defined default layout in PostType configuration (admin->settings->content groups -> edit -> default layout), else will use "index.html.erb"
    layouts/profile.html.erb: layout for profile page
    layouts/profile.html.erb: layout for profile page
    layouts/search.html.erb: layout for search page
    layouts/post_types/my_posttype_slug.html.erb: Layout for posttype with slug = my_posttype_slug
    layouts/post_types/my_posttype_slug/post_tag.html.erb: layout for posttags within post_type with slug = my_posttype_slug
    layouts/post_types/postttype_slug/category.html.erb: Layout for categories within posttype with slug = postttype_slug
    layouts/post_tag.html.erb: layout for all posttags
    layouts/categories/cat_slug.html.erb: layout category with slug = cat_slug


    Note:
    layout and template can be customized by hooks (on_render_profile, on_render_post, on_ajax, on_render_search, on_render_post_tag, on_render_post_type, on_render_category, on_render_index)
     

  • config (folder)
    This folder include all configuration files for the theme
    • locales
      This directory include all locales for the theme (read more)
    • config.json
      This file include the theme configurations:
      • name: Title of the theme
      • key: Key for the theme
      • description: Description of the theme
      • thumb: thumbnail for the theme, sample: images/image.png
      • helpers: Array of helpers for the theme that will be included on the app once installed.
      • hooks: Array of hooks to be executed depends of each case, sample: [{"front_before_load": ["my_theme_action"], "app_before_load": ["my_theme_action2"]}]
        <hook_name>: [array of methods name]
        hook_name: is a name of the hook
        array of methods name: methods name located in your helper file
        Please check all available hooks here.
      • domain: (String) This template will be listed only for this domain or site slug.
    • custom_models.rb
      This file include all customizations for default models, like add attributes, add relationships or add methods, sample:
      
      # Extending Site Model
      Rails.application.config.to_prepare do
      CamaleonCms::Site.class_eval do
        attr_accessible :my_id
        has_many :my_models, class_name: "Plugins::MyPlugin::MyModel"
        def my_custom_title
          "#{self.title} - #{self.id}"
        end
      end
      
      # Overwriting a method of a Decorator
      CamaleonCms::PostDecorator.class_eval do
        def the_excerpt
          "#{self.content.translate..strip_tags.truncate(200)} #{link("Read more", the_link) }"
        end
      end
      end
      
    • <my_theme>_helper.rb:
      This file include helper methods of the theme. Also this include methods for the hooks configured in config.json.
      All your extra helper files added you need to register in config.json, if you don't register, then never will be loaded by the app.

Customize theme for sites:

Camaleon 2.3.x added directions like wordpress:
https://github.com/owen2345/camaleon-cms/pull/441

Video: how to create your theme in one hour.

How to create a complete theme in Camaleon CMS in one hour.
Template used:
https://p.w3layouts.com/demos/perspective/web/index.html

Source code here: https://github.com/owen2345/camaleon_perspective_theme_app
Sample of one click installation: https://gist.github.com/owen2345/c3217f0e6e5567b332f8dabbfbe634a6