Custom UI5 themes showcase
Informal document to show off your custom UI5 theme. Including screen shots are highly appreciated and may be a inspiration for others. Including the theme itself as an attachment grants you super honour! More info on the why and how of this blog post Custom UI5 themes showcase
Note: please make sure you have permission before pasting screen shots and that your screen shots don’t contain confidential information.
|UI Custom themes|
Let me kick it off with a theme I have created for Ziggo, a Dutch cable operator. We use OpenUI5 to manage the back-end of the IP-video platform in the operations department. The UI gives us quick insights devices statusses and allows us to quickly troubleshoot and resolve issues.
The theme is essentially a rebrand from blue to orange and uses the Roboto webfont by Google as it’s main font, to make the interface a bit more snazzy and aligned with other systems. Charts were made using Google’s Material Barcharts. Apart from that, just tiny, hardly visible tweaks were carried out.
At the time the theme was created, the theme designer wasn’t really working properly yet, so that theme has been made using css hacks.
Apologies, can’t share the CSS sources.
This is a theme I created for my public facing website http://www.qualiture.nl/ created with OpenUI5
The site itself is not real fancy since it is a simple Master/Detail application, with inline (static) JSON model data — so no dynamic OData or other backend connectivity.
I created two custom controls:
The overall theme was heavily modified, to cater for the gradient masterlist, rounded icons, modified headers, etc. The font’s used are HelveticaNeue, Georgia and Oswald. The social media icon font is ‘Socicon‘. Inside the CSS there are some @media and min-width queries to adapt some controls to a specific viewport size.
The CSS creation (as well as all the coding) was done using using JetBrains WebStorm