Tutorial Creating a new template from scratch

Discussion in 'Subrion CMS Templates' started by sitebee, Jun 24, 2014.

  1. sitebee

    sitebee New Member

    Hi, this is my first post on here. I`ve been impressed with the Subrion cms with it`s ease of usage. I think it`s perfect for building smaller cms based websites for clients.

    What I would like to ask is, I would like to learn the ropes of creating new themes from scratch, is there any documentation I can follow?
  2. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Greetings @sitebee ! Welcome aboard!

    Unfortunately, we do not have a detailed documentation on how to create your own templates for Subrion CMS at this moment. But we will definitely create it!
    Meanwhile, here are the steps to get started:

    First of all, read this wiki page describing Subrion Templates Standards.

    Quick overview

    Our templates are based on Bootstrap 2.3.2. We use smarty 3 as PHP Template Engine.

    What you will need

    1. Local webserver. Any WAMP platform will do.
    2. Fresh install of Subrion CMS. You can grab latest version here: http://www.subrion.com/downloads/get/latest.zip
    3. Some kind of preprocessor for compiling LESS files. We recommend PrePros. Here is a topic on our forum where you can read about working with LESS: http://www.subrion.com/forums/threads/styling-skeleton-template-with-less-css.1343/

    Tutorial
    In this tutorial I will use 'mytemplate' as a name of new template.

    1. The basics

    After installation of Subrion CMS, go to templates folder. Here you will see two folders: common and skeleton.
    Common — this folder contains all TPL files related to our system.
    Skeleton — our default template. This template is also a starting point to build your own.

    To get started, make a copy of skeleton template and name it 'mytemplate'. Now open install.xml file located in [root]/templates/mytemplate/info/. This file holds information and directives related to your template.
    Rename any mention of skeleton to mytemplate. Your install.xml file now should look like this:
    Code (Text):
    <?xml version="1.0" encoding="utf-8"?>
    <template name="mytemplate">
        <title>MyTemplate</title>
        <summary>Barebones template for Subrion CMS</summary>
        <author>Intelliants LLC</author>
        <contributor>Intelliants LLC</contributor>
        <version>3.0.9</version>
        <date>2014-06-19</date>
        <status>active</status>
        <compatibility>3.1.8</compatibility>

        <layout>
            <section name="header">
                <position width="4">header_1</position>
                <position width="4">header_2</position>
                <position width="4">header_3</position>
            </section>
            <section name="content">
                <position fixed="1">left</position>
                <position width="6">center</position>
                <position fixed="1">right</position>
            </section>
            <section name="user-blocks">
                <position fixed="1">user1</position>
                <position fixed="1">user2</position>
            </section>
            <section name="footer">
                <position width="3">footer1</position>
                <position width="3">footer2</position>
                <position width="3">footer3</position>
                <position width="3">footer4</position>
            </section>
        </layout>

        <screenshots>
            <screenshot name="index.jpg"><![CDATA[Frontend -> Home Page]]></screenshot>
            <screenshot name="2.jpg"><![CDATA[Frontend -> Blog]]></screenshot>
        </screenshots>

        <configgroup name="template_mytemplate">Template</configgroup>
        <config group="general_config" name="block_positions" type="hidden" description="position">inventory,mainmenu,header,header_1,header_2,header_3,verytop,top,left,right,bottom,user1,user2,verybottom,copyright,footer1,footer2,footer3,footer4</config>

        <config group="template_mytemplate"
                name="skeleton_divider1"
                type="divider"
                order="3000">MyTemplate</config>

        <config group="template_mytemplate"
                name="sticky_navbar"
                type="radio"
                order="3001"
                values="1,0"
                description="Sticky navbar">1</config>

        <config group="template_mytemplate"
                name="max_top_menu_items"
                type="text"
                description="Max number of items in Main Menu"
                order="3002">5</config>

        <config group="template_mytemplate"
                name="ckeditor_css"
                type="hidden"
                description="CKEditor CSS"
                order="3003">ckeditor.css</config>

        <blocks>
    ...
     
    This part <template name="mytemplate"> is very important. Name here should be exactly the same as templates' folder name.

    In this file you can add configuration for your template as well as new positions and blocks. As an extensive example, download Navi template and check its install.xml file. You can see there how to add config for colors, backgrounds and etc.

    Now we have new template available to Subrion CMS. Go to Admin Dashboard -> Extensions -> Templates and activate it.

    2. Styling

    Why we recommend using skeleton as a starter: we've tried to add all possible styles for all elements in our system. So if you will install for example Yellow Pages script, all blocks will be styled already (listings, view page, search block, tabs and etc.).

    Please read this topic on how to work with Skeleton LESS files: http://www.subrion.com/forums/threads/styling-skeleton-template-with-less-css.1343/

    Quick overview of styles located in [root]/templates/mytemplate/less/:
    variables.less, ia-variables.less — these files hold variables that are used in other files. If you need to change font size of all text, color of links or buttons, open this files and change need vars, recompile and you are done.

    ia-base.less — this file contains main styles for pages (header, navigation, footer and etc.)

    ia-boxes.less — styles for blocks. Blocks can be anywhere on the page.

    ia-items.less — styles for elements like listings, blogposts, view pages and etc.

    3. "But I want my own design! Your skeleton template sucks! I don't want to just change colors and fonts!"

    No probs here! Skeleton is just a kickstarter. Please check this page: http://demos.subrion.com. Here you can see many templates with different design (most of them are common of course). All of them are based on Skeleton which is a good starting point.

    You can easily implement for example this template: http://www.blazrobar.com/2014/free-psd-website-templates/treehouse-website-psd-template/
    When coding a new template like this, just leave our generated content (smarty tags and etc.) and style them accordingly.

    And you can always ask in case you have any questions. We are always here to help!
    Last edited: Jun 24, 2014
  3. wayne

    wayne New Member

    Thanks, I just setup my local dev environment. I'm using the web directory script and the locality template can I start with this as my base instead of skeleton?

    Now that I've got a local development platform setup can I export all the data from my server version and import it into my local setup?

    I used the database export and import feature but it didn't see to get all the members and listings?
    Last edited by a moderator: Apr 29, 2015
  4. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @wayne !

    You can use any template as a kickstarter.

    To export database, you need to do this from phpMyAdmin (select all tables). After importing, don't forget to change base url in config table.

    Thanks!
  5. wayne

    wayne New Member

    thanks, where do I change the base url?
  6. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Find table with name sbr331_config (prefix may be different). In this table find a row with NAME baseurl and edit it.
  7. wayne

    wayne New Member

    thanks just found it ;-)

    I changed the baseurl but it doesn't see some work it's still going out to my real domain
    Last edited by a moderator: Apr 29, 2015
  8. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Have you changed details in [root]/includes/config.inc.php ?
  9. wayne

    wayne New Member

    yes, I changed all that info to localhost I can get to the admin panel with localhost but when I click on go to website it still goes out to the web not my localhost
  10. Vasily_B.

    Vasily_B. Project Manager

    Just an update here in case someone else has the same issue, I suppose @wayne has got it fixed.

    Once you change the baseurl value in your config table, you also need to delete all the files in tmp/ folder. Config values are cached - so you need to cleanup your cached values. The files in tmp/ folder will be auto-generated on your first load. Hope this helps!

Share This Page