Templating

 

Default ISL Conference Proxy user web pages look like this:

ISL Conference Proxy 4.3.0 has introduced an improved templating system, allowing you to make branding changes quickly and easily, without having to create page overrides. This new templating system is currently the only recommended and supported way of user web pages customization.

This topic will show you how simple it is to replace the company logo image, change primary button and link colors, as well as remove the "Administration" link in the bottom right corner.

Before proceeding you need to decide on a few parameters, basically desired colors and the logo image. You can check the list below, along with placeholder names and values for this example:

  • Company logo image (maximum width X, maximum height 40 pixels - we will use webspace__mycompany_logo.png shown below)

  • Primary button background color (BUTTONBACKGROUNDCOLOR, we will use #ff0000)
  • Primary button border color (BUTTONBORDERCOLOR, we will use #ff0000)
  • Primary button text color (BUTTONTEXTCOLOR, we will use #ffffff)
  • Primary button hover background color (BUTTONHOVERBACKGROUNDCOLOR, we will use #cc0000)
  • Primary button hover border color (BUTTONHOVERBORDERCOLOR, we will use #cc0000)
  • Primary button hover text color (BUTTONHOVERTEXTCOLOR, we will use #ffffff)
  • Text link color (TEXTLINKCOLOR, we will use #ff0000)
  • Text link hover color (TEXTLINKHOVERCOLOR, we will use #cc0000)

This new templating method uses the hooks approach to allow you to change exactly the desired part without touching the rest of the page. There are a lot of hookable points in the template, some are really basic while the other are for advanced users only. You are welcome to check the default template in order to see all available hooks, it is located at the following link: http://localhost:7615/default_templates/Base/web_template.html

Let us start with a few simple examples to illustrate this:

  • If you wish to change the logo image, simply set the logo image source hook to the desired value:
{{hook|logo:src|/webspace/mycompany_logo.png}}
  • If you wish to remove the links to configuration and the manual, simply set the appropriate hooks to empty:
{{hook|footer.conf|}}

{{hook|footer.help|}}
  • If you wish to add custom CSS, just add the appropriate head css hook:
{{hook|head#css|

<style>

/* your custom styles here */

</style>

}}


You should get the general idea, now let us proceed to a working example based on the parameters set above (company logo and colors).

Please follow these steps:

Step 1

Save web_template_hooks.html to your machine.


Step 2

Go to "Configuration - Advanced - Web server". 


Step 3

Change the setting "Use custom web template" to "Yes" and click "Save" at the bottom.


Step 4

Go to "Configuration - Advanced - File storage".


Step 5

Go to "Private".


Step 6

Upload two prepared files:

  • Company logo (prepared as webspace__mycompany_logo.png)
  • Custom template (prepared as web_template_hooks.html)


Step 7

If you now proceed to check your ICP join page, it will look like example above.

This was just a simple example to get the general idea and help you get started. You can open web_template_hooks.html in a text editor and you will see how we applied the parameters from the top to the actual template.

 

{{hook|logo:src|/webspace/mycompany_logo.png}}

{{hook|logo:alt|MyCompany}}

{{hook|head.title|<title>MyCompany Support - {{html_xpp|title}}</title>}}

{{hook|navbar-brand:href|http://www.example.com/}}

{{hook|footer.conf|}}

{{hook|footer.help|}}



{{hook|head#css|

<style>

a {color:/*TEXTLINKCOLOR*/#ff0000;}

a:focus, a:hover {color:/*TEXTLINKHOVERCOLOR*/#cc0000;}



.button.scta, .btn-cta, .ui-dialog .ui-dialog-buttonset button:first-child {color:/*BUTTONTEXTCOLOR*/#ffffff;background-color:/*BUTTONBACKGROUNDCOLOR*/#ff0000;border-color:/*BUTTONBORDERCOLOR*/#ff0000;}



.button.scta:hover, .btn-cta:hover, .btn-cta.hover, .ui-dialog .ui-dialog-buttonset button:first-child:hover {color: /*BUTTONHOVERTEXTCOLOR*/#ffffff;background-color:/*BUTTONHOVERBACKGROUNDCOLOR*/#cc0000;border-color:/*BUTTONHOVERBORDERCOLOR*/#cc0000;}



@media (min-width:768px){

 .navbar-nav > li > a:hover, .navbar-nav > li > a:focus, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {border-bottom:2px solid /*TEXTLINKCOLOR*/#ff0000;}

 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {border-color:/*TEXTLINKCOLOR*/#ff0000;}

}



input[type="text"]:focus, input[type="password"]:focus, textarea:focus, .search-bar:focus, .focused-input, .form-control:focus {border:1px solid /*BUTTONBORDERCOLOR*/#ff0000;box-shadow:0 0 5px /*BUTTONBORDERCOLOR*/#ff0000;outline:0;}



#join-content > div.form-group.row.form-input-wrapper.nomargin.float-label > label {color:/*TEXTLINKCOLOR*/#ff0000;}



#product-navigation-menu > li > a.active, #product-navigation-menu > li > a:hover, #product-navigation-menu > li > a:active, #product-navigation-menu > li > a:focus, #product-navigation-menu > noscript > li > a.active, #product-navigation-menu > noscript > li > a:hover, #product-navigation-menu > noscript > li > a:active, #product-navigation-menu > noscript > li > a:focus {color:/*TEXTLINKCOLOR*/#ff0000;}

</style>

}}

 

Was this article helpful?