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).
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):
I have placed the two applications in directory c:\nwds\sap less (see below):
There are 62 hits:
IE6 is for IE, NN7 for chrome and so on. But the most important thing is that we can look at the definition:
@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!
Please note this is undocumented! Use it at your own risk!!!
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!
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
Any suggestions for another topic regarding UI Theme Designer is welcome 🙂
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.
Hang on, posting it now 🙂 Link incoming....
How to... UI Theme Designer - Transportation
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
Is this used for UI5 app too? There is a Ui5 Theme Designer, are they the same?
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.
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?
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 🙂
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.
Have a wonderful day,
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.
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,
Thanks for your reply. Appreciated..
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
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,
I like these kind of tricks. Thanks for sharing.
You are welcome! Pleasure to share it with everyone.
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?
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,
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,
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 😉
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.
In the PAM go to NW 7.3 > Technical Release information > Web browser platform.
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.
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,
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.
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.
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.
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…
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!
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>
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?
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, ...).
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.
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:
This is a very good discussion, but is built of two different topics which are not related to each other:
Thanks Shani. Will Blue Crystal work with all out of the box components, e.g. KM, portal admin, wiki, forums, etc?
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.
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).
The solution we are working on will allow to set the fallback theme for a custom theme through the UI Theme Designer for Portal.
That's great news, Thanks Shani. I will start to implement a custom theme based on Blue Crystal.
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,
I have written a blog about that too 🙂
How to... UI Theme Designer - Make use of the Custom CSS tab in the Portal!
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.
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?
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.
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.
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.
Thanks for the nice blog.
We are trying to change the Fiori launch pad theme for our application which is built on Enterprise portal Java system, NW 7.5.
I have rebuilt the existing theme and made my personalization on the theme using UI theme designer and performed save & build option. But unable to make the new one as default.
Can you suggest me how to activate this theme as the default one?
Didn't know there are still customers that are using Enterprise Portal (Java), thought it was deprecated but I could be wrong...
For me it is more than 6 years ago I worked with EP, so this is a bit a lucky guess.
I remember that you can set the basic theme in your Portal Desktop. Please check this link:
Hope that will help you a bit 🙂
Thanks much for your valuable inputs Noel,
I have checked the mentioned link and assigning my theme to the portal desktop has helped us to resolve the issue 🙂
But I have a query and please help me with this, post assigning my theme to portal desktop, I can see my new theme in the list of themes in the fiori launchpad (user profile> user preferences>Themes).
But when I log into the fiori launchpad, I could see the default theme as the old one only and once I go to the user preferences and select the new theme, the new one is being applied. Even if we log off and log in, I could see my new theme only as the default one.
Is this the usual behavior & shall we suggest all the users to change the theme for the very first time (or) do we need perform any other settings change in the portal for theme to apply as the default one without changing it in the FLP?
Many thanks for your help 🙂
What you can do also is adding the theme to the url (?sap-theme=yourtheme). This will push the theme to all users that use that link.
Check out this blog from Masayuki Sekihara: https://blogs.sap.com/2014/05/16/how-to-set-a-theme-parameter-to-sap-fiori-launchpad/
I think your current settings with theme are stored as personalization. Maybe there is something where you can clear personalization, but keep in mind it will remove other personalization (if there is any) as well.
Thanks for the suggestion Noel,
When we were trying to apply my new theme to the fiori desktop in the quality system, the theme has been set as default without any additional steps. I assume this not being applied properly to the dev system because of two desktops being present for our application.
Anyways the query, I have raised is resolved, thanks to you 🙂
I am really glad that you have helped us with this context.
Have a lovely day ahead 🙂