Skip to Content
Author's profile photo Jan Penninkhof

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

Ziggo Theme

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.

/wp-content/uploads/2015/03/ziggo_672391.png

Apologies, can’t share the CSS sources.

Qualiture theme


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 testimonials block, to be responsive the way I wanted — FlexBoxes of Grids did not cut it here
  • For rendering Markdown content. Using a custom Markdown control gave me two major benefits while authoring content:
    • It is easy to type in and store in a JSONModel
    • I have complete freedom of the look and feel of the rendered text. There is currently no (simple) way of rendering mixed markup in sap.m, and I did not want to use the rather rigid sap.ui.commons FormattedTextView.

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

q1.PNG q2.PNG
q3.PNG q4.PNG
Your theme?

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof

      Great initiative! I'm currently reworking my unresponsive, 6 year old -- but with a colorscheme quite common in the 1850's... 😐 -- website (http://www.qualiture.nl) using OpenUI5.

      One of my main goals is to have it look fresh, and avoid the "UI5-ey look and feel" as much as possible, yet still recognizable as UI5.

      For example, I use a SplitApp because its a) it's a best practice with regards to navigation on both desktop and mobile, however, you wouldn't immediately recognize it as a standard splitapp "master list / detail page" structure.

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Robin, try the Roboto font! It's nice 😉

      Author's profile photo Robin van het Hof
      Robin van het Hof

      You know what, I might even have to do so in order to have a unified UX across all browsers; not everyone has Helvetica Neue Light installed, but then again, for those who have it, it is just sooooooooo beautiful! 😀

      So I might change

      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

      to

      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Roboto"

      eventually 😉

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      Hi Robin,

      I updated my site nearly a month ago (http://www.peppieportals.nl). I am using AngularJS and tried it with UI5 also. Problems I ran into were:

      - google analytics v.s. routing (SPA application)

      - google search bots (your page will be a div with content without anything in it eventually. Javascipt is loading the page so a search bot will not see your content).

      I am not sure if there are tricks for UI5 for fooling analytics / search bots.

      Last but not least, someone told me to make the site mobile as well 🙂 .

      @Jan: nice Ziggo theme!

      Cheers,

      Noël

      Author's profile photo Robin van het Hof
      Robin van het Hof

      Hi Noël,

      A single-page application could easily be used with Google Analytics (my current site is an SPA, I have implemented it here as well), see Single Page Application Tracking - Web Tracking (analytics.js) - Google Analytics — Google Developers

      A bigger issue is indeed indexing. Until a year ago, Google would not index Javascript generated content. That has been changed (Official Google Webmaster Central Blog: Understanding web pages better), but since I don't really can rely on it's working, I hope having HTML snapshots / window.history.pushState() functionality will help me here

      Author's profile photo Noël Hendrikx
      Noël Hendrikx

      For SEO you can use https://prerender.io/. Analytics are working also, had to include Angulartics | Web analytics for AngularJS applications (this is AngularJS stuff by the way 😛 )

      You can use Prerender locally but also for free if you have less than 250 pages 🙂

      Author's profile photo Robin van het Hof
      Robin van het Hof

      This Prerender looks very solid! I will have to test if UI5 content is correctly being retrieved -- I don't care of the look and feel of the snapshots of course, as long as all the content is there 😉

      Thanks for the hint, much appreciated!

      Author's profile photo Robin van het Hof
      Robin van het Hof

      As promised, here two UI5 mockups, made entirely with SAPUI5. Some CSS changes, 2 webfonts, and no custom controls. Of course, everything is model/router driven.

      Screen Shot 2015-04-01 at 19.42.41.png

      Screen Shot 2015-04-01 at 19.41.33.png

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Great job Robin! And responsive out-of-the box I presume?

      Author's profile photo Robin van het Hof
      Robin van het Hof

      Of course! 😉

      It's all standard SplitApp, Pages, List, and the responsive sap.ui.layout.Grid for controlling content positioning on different screen sizes (3 cols vs 1 col)

      All text will more or less follow this grid layout. The testimonials will be tiles in a standard Dynamic Container, and my portfolio will be using the standard Caroussel (both will be heavily styled to match the site's L&F)

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Really nicely done! And also thanks for sharing those insights! 🙂

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Thanks for adding the final version! 🙂

      This page hasn't picked up in the way I envisioned btw...

      Author's profile photo Robin van het Hof
      Robin van het Hof

      A pity, isn't it? 😐

      I would *love* to see more designs done by others (i.e. not only on conferences like SAPPHIRENOW and TechEd)

      Author's profile photo Former Member
      Former Member

      Agreed.  I posted some similar thoughts some time ago... UI5 Inspiration Gallery - Would it be useful?

      I'm genuinely surprised we aren't seeing more and more showcases along these lines.

      Cheers,

      G.

      Author's profile photo Robin van het Hof
      Robin van het Hof

      Great twitter conversation in your blog Gareth.

      It would really help if more and more designs can be aggregated and put on a pedestal -- preferably via SAPUI5/OpenUI5 home, and not hidden in this SCN doc for none to find 😀

      Author's profile photo Former Member
      Former Member

      I think you've hit the nail on the head there Robin.  I've always liked how when you go to the D3 website, the first thing you see, before any technical information or API doc's or "How to get started" stuff, is a load of examples of what can be achieved and how good it can look.

      Having something like that at the very front of the UI5 sites would be great.

      Cheers,

      G.

      Author's profile photo Renald Wittwer
      Renald Wittwer

      Hi Jan,

      Great idea!

      Best regards

      Renald