How to Customize the Layout of Applications Created with IntelliWarp in 5.1

How to Customize the Layout of Applications Created with IntelliWarp in 5.1

  
As you might know, from version 5.1 the Style Guide is built-in inside Service Studio and its patterns are automated with drag-and-drop IntelliWarp magic. For instance if you need to create a list page with pagination, search, sort, export to excel, and an entry in the application menu, you just need to drag an entity to a web flow and Intelliwarp does it all for you.
 
But what about when you want to change the style of your application (or in other words, what if you need a custom style guide)?
 
Your applications can have almost any look you like.
 
 
To create a different template for your applications you can:
  1. Create a new application from Style Guide (Ctrl+N)
  2. Change the logo by going to the Header_Title web block and replacing the image
  3. Change the color by doing find and replace in the eSpace Style Sheet (e.g. replace #1E5AA3 by #FF7A00)
  4. Add a new header background image and replace it in the Header Style Sheet (e.g. replace url(/RichWidgets/img/Header_Background_Blue.jpg) by url(img/New_Header_Background.png) )
  5. Save this eSpace to work as a template and whenever you need a new application just clone and start from it
You can read more tips and find some examples on changing the CSS on the eSpace Style Sheet itself.