Customer Success Portal

            Theme Overview

            Creating a truvi theme is fairly simple if you have the html/layouts already developed. A truvi theme is a php theme that is structured similarly to a Wordpress theme. 

            Download the Sample & Simple theme that is attached to this article. We will reference files and details based on this theme in this article.

            A theme is deployed by uploading the theme folder to the root of the truvi website. Once it is uploaded, you can then switch the theme for the website by going to Settings > Portal Settings > General Settings and then selecting your theme in the Default Theme dropdown on the General Tab. 

            Theme Structure

            Within a truvi theme, you have 2 top level folders under the theme name folder:
            1. assets: Sub folders contain CSS, JS and Images and any other asset directory you want to include
            2. views: Sub folders are layouts and site. These folders make up the layouts of the site. 

            This is what the site structure looks like for a truvi theme 

            Dynamically Added Files

            By default, truvi will add the following stylesheets and JavaScripts to the markup when the pages are loaded on the website.
            1. <link rel="stylesheet" type="text/css" href="/assets/36392dde/jui/css/base/jquery-ui.css" />
              <link rel="stylesheet" type="text/css" href="/css/common.css" />
              <link rel="stylesheet" type="text/css" href="/assets/af721490/css/jquery.fancybox.css" />
              <link rel="stylesheet" type="text/css" href="/js/banner/nivo-slider.css" />
              <script type="text/javascript" src="/assets/36392dde/jquery.min.js"></script>
              <script type="text/javascript" src="/assets/36392dde/jui/js/jquery-ui.min.js"></script>
              <script type="text/javascript" src="/js/jquery.mask.js"></script>
              <script type="text/javascript" src="/js/banner/jquery.nivo.slider.js"></script>

            Theme Layouts

            Website Template Tags

            Here are the tags you can add to templates and the explanation for what they output. View Template Tags Article >

            Overall Theme Templates

            You can create an overall theme template file that includes the overall markup of your site. This allows you to create layout files that control the look and feel of the website and then you can add tags to pull in different data, files and dynamic content from truvi. In the theme provided, this file is main.php. 

            Standard Layouts

            Within the layouts folder, are your standard layouts and also any custom layouts you want to add. 

            blog.php - This layout will control the content area of the blog. 
            cart.php - This is the content area of the cart page.
            checkout.php - This is the content area of the checkout page.
            club.php - This is the content area of the club pages. This includes the club listing page and the club signup pages. 
            events.php - This is the content area of the events page.
            home.php - This is the content area of the home page.
            news.php - This is the content area of the news page.
            store.php - This is the content area of the store/category/product pages.
            user.php - This is the content area of the my account sections.

            Your standard layouts and custom layouts will include a beginContent call that will pull in the overall theme layout (main.php in our example).

            This example below is the blog.php layout file. You can see we call in the main.php file as the main overall theme template and then we add the markup and tags we want to display on this page. 

            1. <?php $this->beginContent('//layouts/main'); ?>
            2. <div id="banner-heading">
            3.     <div class="container">
            4. [innerPageBanner]
            5. <h1><span>[page_title]</span></h1>
            6.     </div>
            7. </div>
            8. <div class="row-fluid inner-page-contents blog-page-contents">
            9.     <div class="container">
            10.      <div class="row-fluid">
            11.             <div class="span3">[includeFile filename='tpl_blog_sidebar.php']</div>
            12.             <div class="span9"><?php echo $content; ?></div>
            13.         </div>
            14.     </div>
            15. </div>
            16. <?php $this->endContent(); ?>

            Where we want the dynamic content for the blog, we include <?php echo $content; ?>  which will pull in all the blog content for that particular section/page. 

            We also end this layout with <?php $this->endContent(); ?>  to close the content area of this layout. 

            The layout files in the layout folder will show in the Design Options tab in the Layout drop down of a website page when editing or creating a new website page in truvi.

            Attachments (1)
            Updated: 05 Mar 2019 06:59 AM
            Help us to make this article better
            1 0