Skip to Content
Author's profile photo Noël Hendrikx

How to… UI Theme Designer – Locating elements

Part 2 of more to come 🙂

One of the features that is missing right now is a functionality to select the proper class. In Chrome or IE you can use the Developer Toolbar to inspect an element. In the UI Theme Designer this functionality is not present (yet?).

This blog will explain how to select the correct elements. First find out which CSS class you would like to change by selecting the Developer Toolbar (F12) in Chrome or IE. In my case I have selected the title (urPgHTTxtSmall).

/wp-content/uploads/2014/01/screenshot_4_361148.jpg

If you search in the UI Theme Designer you will not find anything. Open Notepad++ (or any text editor that can search in files as well) and press CTRL+F, select Find in Files and search for urPgHTTxtSmall. Select as source two directories (download the applications from the server):


– com.sap.portal.design.portaldesigndataless

– com.sap.portal.design.urdesigndataless

I have placed the two applications in directory c:\nwds\sap less (see below):

/wp-content/uploads/2014/01/screenshot_23_361150.jpg

There are 62 hits:

/wp-content/uploads/2014/01/screenshot_24_361152.jpg

com.sap.portal.design.urdesigndataless\servlet_jsp\com.sap.portal.design.urdesigndataless\root\theming\UR\ls\baseTheme\ie6.less

IE6 is for IE, NN7 for chrome and so on. But the most important thing is that we can look at the definition:

.urPgHTTxtSmall {

  width: @sapUrPgHTTxtWdth;

  color: @sapUrPgHTTxtColor;

  font-size: @sapUrPgHTTxtFSSmall;

/wp-content/uploads/2014/01/screenshot_25_361154.jpg

@sapURPgHTtxtWdth is a LESS variable. In the UI Theme Designer go to your theme and select Expert mode. Search for sapURPgHTtxtWdth and there is the element!

/wp-content/uploads/2014/01/screenshot_28_361155.jpg

Please note this is undocumented! Use it at your own risk!!!

Happy branding!

/*

Noël Hendrikx – SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.

UI Theming blog series

Portal theming – also waited a couple of years?

How to… UI Theme Designer – Installation

How to… UI Theme Designer – Migration

How to… UI Theme Designer – Locating elements

How to… UI Theme Designer – Transportation

How to… UI Theme Designer – Make use of the Custom CSS tab in the Portal!

Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend – Autoresponder FTW

/*

Assigned Tags

      48 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Noël Hendrikx
      Noël Hendrikx
      Blog Post Author

      Any suggestions for another topic regarding UI Theme Designer is welcome 🙂

      Author's profile photo Former Member
      Former Member

      How to transport themes from one system to another. Hint: it doesn't work, not at least in NW 731 SP09 patch 8 with UI Theme Designer 1.1.4. I have already involved SAP support but they haven't provided a solution yet.

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

      Hang on, posting it now 🙂 Link incoming....

      Author's profile photo Noël Hendrikx
      Noël Hendrikx
      Blog Post Author
      Author's profile photo Sankar Narayana Kalapatapu
      Sankar Narayana Kalapatapu

      Hi Noel,

       

      I want to install a new font (HelveticaNue) in SAP Portal for which i want to utilize in my PDK Application. Currently this particular font is not available in my sap portal server. could you please let me know how to install a new font in sap portal server 7.5

       

      Thanks,

      Sankar

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Noel

      Is this used for UI5 app too? There is a Ui5 Theme Designer, are they the same?

      Thanks

      Sandip

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

      The UI Theme Designer is also used for UI5 apps running inside the portal. If you create a theme, make sure it is based on SAP Gold Reflection. This theme is designed for UI5 applications.

      The UI5 Theme Designer is the core application. UI Theme Designer in the portal is UI5 Theme Designer + portal integration, easily said.

      Locating elements in UI5 is much easier than UR components. Also for UI5 applications the CSS tab should be available.

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Thanks Noel

      Are there plans to support Platinum & Blue Crystal themes too?

      We have plans to use Platinum for our UI5 Apps, and then hook them with Portal. So will the UI5 App Elements inherit the Portal theme you mean? or, they will continue to use the theme defined in their namespace?

      Sandip

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

      Good question, I don't know to be honest. Maybe Shani Limor knows more.

      If I understand you right, you would like to use a non-portal theme (Platinum) and use it in the portal as well. I think every theme is inherited from a base theme (don't know which one it is, could be SAP tradeshow). Adding portal elements to it is maybe unsupported.

      What you can do is compare the definitions of the themes (Platinum and a standard portal theme like tradeshow plus). Maybe you can fool the UI Theme Designer 🙂

      Author's profile photo Shani Limor
      Shani Limor

      Hello Sandip, Noel,

      The SAP_Platinum theme is not supported in the Portal and is also not supported by UR as a base for custom theme (please see note from UR: 1852400 - UI theme designer (main note) ).

      Regarding SAP BlueCrystal, it is planned to be supported in the Portal (now in development) in 7.31 SP12.

      Thanks,

      Have a wonderful day,

      Shani

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Noel, Shani

      Thanks for your replies.

      One last question, if the Ui5 Apps running inside Portal - will the portal theme (lets say gold reflection) be forced upon the Ui5 apps if they are using a theme other than gold_reflection(e.g. platinum)?

      We have plans to use Platinum for our Ui5 apps - so I just wanted to make sure the Portal theme will not effect the Ui5 apps.

      Thanks

      Sandip

      Author's profile photo Shani Limor
      Shani Limor

      Hello Sandip,

      The Portal themes blue crystal and gold reflection will work with UI5 applications running inside the portal just as any other theme works with any other technology. Meaning that the Portal theme will be the theme for all applications running in the portal. It`s one theme for Portal ontegrated applications.

      Have a wonderful day,

      Shani

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Hi Shani

      Thanks for  your reply. Appreciated..

      Regards

      Sandip

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Shani Limor N. Hendrikx

      I just came across a SAP NOte which says about how to prevent portal theme being enforced upon the UI5 applications

      1895989 - UI5 iView stylesheet rendering issues

      Author's profile photo Shani Limor
      Shani Limor

      Hi Sandip,

      This is a note published for UI5 based application integration to the portal before the implementation of the UI Theme Designer for UI5 applications.

      Once the development will be done, your UI5 applications will render with the Portal theme.

      Have a wonderful day,

      Shani

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Thanks Shani

      Author's profile photo Former Member
      Former Member

      I like these kind of tricks. Thanks for sharing.

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

      You are welcome! Pleasure to share it with everyone.

      Author's profile photo Former Member
      Former Member

      Hi Noel,

      We do not have UI Theme Designer for 7.4 sps 3. I think its in the later versions.

      Any other way of doing this. I know of Theme Class Locator that was available in 7.3 or lower versions but it does not work in 7.4.

      Can u guide me on this?

      Thanks,

      Deep Desai

      Author's profile photo Shani Limor
      Shani Limor

      Hello Deep Desai,

      The UI Theme Designer for Portal is available starting from 7.30 SP10, 7.31 SP9 and 7.4 SP4.

      Have a wonderful day,

      Shani

      Author's profile photo Former Member
      Former Member

      Hi Noel,

      We created a copy of the standard SAP Ajax framework theme and modifying it using the (old) theme designer.
      We made allmost all the changes we wanted but we don't allways have the same behaviour on each browser (Chrome, IE11, Firefox). I wondered what you suggest to resolve this?
      Is there anyway to directly modify the CSS files adding some specific browser testing code?
      Can the use of the new UI theme designer for this purpose?

      Thanks for your help,

      Good evening

      Thomas

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

      Hi Thomas,

      First check if your portal version is compatible with the browsers you use. If it is not supported, you should wait till the browser is released.

      With the old style editor I should not change the css files directly, since they will be overwritten every time.

      With the new UI Theme Designer much more is possible. But it's kinda strange that it works different in the browsers. The list of browsers/version you mention is that they support css 3. Older browsers (like IE7/8) use CSS2.1 so that might not work the same.

      Check out: Browserhacks

      Please send some examples of what goes wrong. There are several solutions 😉

      Author's profile photo Former Member
      Former Member

      Hi Noël,

      First of all thanks for your answer.

      We're working on SAP Portal 7.3 SP11. I'm checking the availability matrix but i'm getting lost on how to be sure what browser is supported. I can't find a page showing the exact browser versions supported.

      If we use the new UI Theme designer can we take over what we did with the old one? Or is there a kind of migration where we need to re-do the customizing of the theme?

      About what is not working, here is an example, with horizontal menu in respectively: IE11, Chrome and Firefox.

      Main_Menu.png

      Best regards,

      Thomas

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

      Hi Thomas,

      In the PAM go to NW 7.3 > Technical Release information > Web browser platform.

      Screenshot - 13-8-2014 , 12_36_53 002.png

      Look at the Additional information as well.


      Does the navigation work well with the standard sap_tradeshow theme? (you can use /irj/portal?theme=sap_tradeshow to find out).

      Do you have custom navigation components?

      For migrating the old css to the new UI theme designer : How to... UI Theme Designer - Migration

      Please note you can go back also! So I suggest try to use the new UI Theme Designer.

      cheers,

      Noël

      Author's profile photo Former Member
      Former Member

      Hi Noel,

      Thanks for the input. After some closer look we found the specific CSS parts for Internet Explorer that caused some troubles. So we changed them in the .LESS file.

      Now we're facing another problem when using the Web Page Composer or KM linked to the use of the New UI Theme. I found a note 2030755 - Solution for BI applications to render correctly with portal theme also in the old structure and KM document with WPC can't be edited.


      But on the version we're are currently working (PORTAL BASIS 7.30) the release note for SP013 has not been provided yet.

      As this is blocking for another project in the portal, we thought of temporarily deactivate the new UI Theme by deleting the LESS value for "Determine what will be the theme runtime provider" property and restart the portal.

      I just want to be sure that this can be done. Could you confirm this?

      Thanks a lot,

      Thomas


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

      Hi Thomas,

      Sorry for the late reply. Yes, you can go back to the old theme editor. You don't need to delete the Web Repository files, just delete the LESS value of "Determine what will be the theme runtime provider" and restart.

      Cheers,

      Noel

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      Hi Noel / Shani,

      I am using new UI Theme Designer as part of 7.4 SP7 and using SAP_GOLDREFLECTION as base theme to customize. Once the Theme is copied and published (AJAX Framework), Some of the applications (UWL, Workset Maps) are loaded using Tradeshow Plus theme instead of Gold Reflection. In WRR i see no CSS Files generated under UR/ur/<theme>

      Is this the normal behavior.

      Thanks
      Sumanth

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

      Sounds familiar. All webdynpro Java applications do display the sap_tradeshow theme, right? Check out the patches for WD-RUNTIME and portal in general. This is a bug.

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      I think i have the latest patch of WD-RUNTIME for other issues we had. Not all Java applications are having this issue. Like User Administration is coming up with Gold reflection.

      For Loading of Universal Worklist i notices Style sheets are pointing to  ls/ls..css files of Tradeshow plus.

      Where ever it is referred to UR related classes, CSS files are referenced to http://<....>/com.sap.portal.theming.webdav.themeswebdavlistener/UR/ur/sap_tradeshow_plus/sf3.css?ri…

      Thanks
      Sumanth

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

      Please check oss messages related to UR versioning and WD Java. You cannot compare User Admin with a WD Java app (iview) unfortunately. We have the same issue at 730 SP10 and we are going to upgrade to SP12 with the latest patches. Keep you posted!

      Author's profile photo Former Member
      Former Member

      SAP doesn't support the use of Gold Reflection together with the Ajax Framework, that is according to SAP support. <rant>One more combination that they don't support. First Corbu, now even Gold Reflection can't be used. It's easy to label anything that doesn't work "as not supported" rather than trying to make it work. Maybe I'll try Blue Crystal next, I'm sure that won't be supported either once I discover some problems with it.</rant>

      Author's profile photo Sandip Agarwalla
      Sandip Agarwalla

      Samuli

      Thanks for raising these points. At this point, even I am not sure what is next from SAP. What theme is supported for Portal, Web Dynpro, UI5?? Is there any theme which will support all these 3?

      Regards

      Sandip

      Author's profile photo Former Member
      Former Member

      I don't think so. I'm using my custom theme based on Gold Reflection, I worked around the restrictions meaning I didn't change any CSS that would break something for portal. I guess we have to wait for SAP to enable standards mode for portal. Any update that you can share, Aviad Rivlin? Still SPS15? Even once portal supports standards mode, I'm sure that everything won't be supported (e.g. HTMLB, JSPs, KM, ...).

      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      For standards mode FWP we already have the Fiori framework page available and we are still working on the AJAX framework page in standards mode.I agree with your comment Samuli Kaski, having a standard mode framework page does not mean that all the portal apps will be running in standards mode. But... we are working on having more and more UI technologies running in standards mode (e.g.: Web Dynpro,...). Ingo Deck can provide the full list of UI technologies running in standards mode.

      Aviad

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

      That's good news Aviad. WD already runs in standards mode fortunately. Some old technology or non-SAP applications might run in Quirks mode. You can launch the application in a new browser window without the framework - or even with a quirks mode framework if that's possible... Maybe it is a feature you can built in the framework, so here's my proposal:

      The main portal runs in standards mode (IE=Edge). All standards mode applications can be embedded like it does now. All quirks mode applications must be launched in a new browser window. As an iview propery you can define to launch the application in a new browser window with or without the framework. Just create another option to launch it in the framework - headerless - but in Quirks mode.

      Author's profile photo Shani Limor
      Shani Limor

      This is a very good discussion, but is built of two different topics which are not related to each other:

      1. SAP themes support cross technologies – It is true that SAP provides different UI Frameworks and different UI Clients. Providing one theme that supports all is a complex goal, but SAP are making an effort to provide customers with the best look and feel for the most used technologies. I recommend looking at the UX Explorer > SAP Standard Themes and SAP Note 1852400. For SAP Enterprise Portal we are currently working on supporting the SAP Blue Crystal theme.
      2. SAP Enterprise Portal support in standards mode – Starting from NW7.31 SP14 and NW7.4 SP9, the Ajax Framework Page (AFP) is supported in standards mode as well. So Noel`s proposal above will be available in around a month from today. I recommend looking at the IE and Portal – Standards/Quirks Mode Evolution (or Love-Hate Relationships).
      Author's profile photo Former Member
      Former Member

      Thanks Shani. Will Blue Crystal work with all out of the box components, e.g. KM, portal admin, wiki, forums, etc?

      Author's profile photo Shani Limor
      Shani Limor

      Unfortunately I can`t say for other technologies except the Enterprise Portal.

      Portal Admin will support the SAP Blue Crystal theme for all UI frameworks that can render with it. For example, if an editor\wizard in the Portal is written in HTMLB and HTMLB will not support SAP Blue Crystal, Portal will render the UI with a fallback theme.

      Author's profile photo Former Member
      Former Member

      Thanks, that's the answer I was expecting, unfortunately. Will the fallback theme be changeable with the UI Theme Designer? There is a fallback theme even today but it can't be changed with the UI Theme Designer (sap_standard or even sap_tradeshow_plus in later SPs).

      Author's profile photo Shani Limor
      Shani Limor

      The solution we are working on will allow to set the fallback theme for a custom theme through the UI Theme Designer for Portal.

      Author's profile photo Former Member
      Former Member

      That's great news, Thanks Shani. I will start to implement a custom theme based on Blue Crystal.

      Author's profile photo Former Member
      Former Member

      Hi Noel, Samuli

      I am using UI Theme designer in NetWeaver Portal. I changed the branding for Top level navigation using Expert tab, I would like to customizes the CSS for the Ui5 iviews created in the portal. But the CSS tab is not editable, I am unable to enter anything.

      My EP version is 7.30 SP10

      UI theme designer version is 1.1.4

      Please suggest me on how to achieve it.

      Thanks and Regards,

      Prasanna S

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

      Hi Prasanna,

      I have written a blog about that too 🙂

      How to... UI Theme Designer - Make use of the Custom CSS tab in the Portal!

      Cheers,

      Noël

      Author's profile photo Former Member
      Former Member

      Hi Noël,

      I have gone through the document before posting the query. My problem is that the custom CSS tab is not editable to enter sample code to get the custom.less file under WRR.

      Regards,

      Prasanna

      Author's profile photo Roger Beach
      Roger Beach

      Noel,

      I tried this using your example and it worked fine.  However, when trying for others, the classes are not found, for instance.  For Fiori Framework Page, the icon color, in developer tools you see the class as sapUshellTileBaseIcon.  Using the method above, the class was not found, in the theme designer, I found the element as sapUshellTileIconColor.  Is there a reason why your methodology in this blog did not find the class sapUShellTileBaseIcon?

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

      Hi Roger,

      It might be possible that your custom theme does not support the Fiori framework, which theme did you use as a default?

      Also the two less files are quite old, it might be there are new less files as well for the new frameworkpages.

      cheers,

      Noel

      Author's profile photo Roger Beach
      Roger Beach

      Noel, thanks for your reply.

      We learned a while ago to base everything on SAP_BLUECRYSTAL.  I did find a com.sap.portal.desing.ui5designdataless.war it was pretty tiny though from a size perspective.  I took a look in there but still not finding anything fiori.

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

      In the portal you can use the WRR (Web Resource Repository). Open the themes folder and download it to your local disc. Now you have all the less files belonging to the custom themes.

      In these files try to locate sapUShellTileBaseIcon or UShellTileBaseIcon, you might have luck then.

      Another way to change the icon is to locate it in the WRR and replace the icon in your custom theme.

      Last but not least, in the UI Theme Designer there is a CSS tab. You can define your own rule in it if you want.

      .sapUShellTileBaseIcon {

           background-color: yellow;

      }