KB Article 15970
2019/01/03

Close
X
Contact Tech Support

 Email Tech Support
 (250) 655-1766
 [7:30 - 5:00 PST]
Your Meeting ID will be Provided by a Rep.
Tech Support
Tech Support Home
Software Updates
Knowledge Base Search
Recent KB Articles
Product FAQs
Code Samples
Documentation
Tech Blog
System Requirements
Installation Instructions
Support Testimonials
Contact us to...
Create a Ticket
Request a Free Demo
Suggest a New Feature
Submit Feedback
Upload a Large File
Other Services
Software Training
Professional Services

How to create a User Controlled Theme Picker for Presto

Product: Presto Type: How to

User Controlled Theme Picker for Presto.

This article will explain how to create a user controlled theme picker for Presto, which is visible on every screen. It will allow the end user to change the look of any screen by allowing them to select from pre-defined color theme. If you've got a custom theme, please ensure that the div you create has an id that matches the file name of the theme without the .css at the end. 


Steps to create:

  1. Start your Presto Designer and log in.
  2. For this code to work on every page, we need to modify the 'layout.html', which is found under Tools -> Modify Skin. Please open the layout.html file.
  3. Locate the link tag for the CSS sheet. Attach an ID to the link tag like this (Shown in bold):
     <link type="text/css" id="csstheme" href="{SKIN_PATH}/theme_{THEME}.css?v={IFS_VERSION}" rel="stylesheet" data-theme>
  4. Now that the CSS tag has been identified, please add the following code directly below the opening div tag with the id="navbar-header":
    <!-- List of color boxes to change theme-->
    <div id="color-picker">
        <div class="color-box" title="Red Theme" id="theme_red" style="background-color: #ff0000;"></div>
        <div class="color-box" title="Green Theme" id="theme_green" style="background-color: #397D02;"></div>
        <div class="color-box" title="Dark Theme" id="theme_dark" style="background-color: #000000;"></div>
        <div class="color-box" title="Default Theme" id="theme_default" style="background-color: #ffffff;"></div>
    </div>
  5. To achieve the proper look of the boxes, please add the following CSS to the stylesheet.css file found under Tools -> Modify skin:

    .color-box
    {
    width: 20px;
    height: 20px;
    border: 2px solid; 
    float: left;
    margin-right: 10px;
    border-radius: 5px;
    }

    #color-picker

    width: 130px;
    height: 20px;
    display: table-row;
    float: right;
    margin-right: 50px;
    margin-top: 15px;
    }

  6. Now that the boxes are styled and the CSS sheet is tagged properly, the next step is to add the jQuery to the bottom of the layout.html page. Please add the following code to the bottom of the document, just above the closing </body> tag:
    <script>

    function Themepicker()
    {
        jQuery('.color-box').click(function()
        {
            var sSelectedTheme = jQuery(this).prop('id');
            var sSkinPath = 'skins/Pacific/' + sSelectedTheme + '.css';
            jQuery('#csstheme').attr('href', sSkinPath); 
        });
    }
    jQuery(document).one("PageComplete", Themepicker);

    </script>
  7. Save and refresh the page to see it in action!

Rate This Article

Did this example help you to achieve your goal?
 Yes  No  Don't Know

Enter additional comments below.   If you want to hear back from us, include your contact information.

Email Address:
Comments:
Please enable JavaScript in order to rate this page.