Skip to Content

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

/*

To report this post you need to login first.

47 Comments

You must be Logged on to comment or reply to a post.

    1. Samuli Kaski

      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.

      (0) 
    1. Noël Hendrikx 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.

      (0) 
      1. 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

        (0) 
        1. Noël Hendrikx 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 🙂

          (0) 
          1. 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

            (0) 
            1. 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

              (0) 
                1. 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

                  (0) 
  1. Deep PIYUSH DESAI

    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

    (0) 
    1. 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

      (0) 
  2. Thomas Pary

    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

    (0) 
    1. Noël Hendrikx 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 😉

      (0) 
      1. Thomas Pary

        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

        (0) 
        1. Noël Hendrikx 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

          (0) 
          1. Thomas Pary

            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


            (0) 
            1. Noël Hendrikx 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

              (0) 
  3. 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

    (0) 
    1. Noël Hendrikx 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.

      (0) 
      1. 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://&lt;….>/com.sap.portal.theming.webdav.themeswebdavlistener/UR/ur/sap_tradeshow_plus/sf3.css?ri…

        Thanks
        Sumanth

        (0) 
        1. Noël Hendrikx 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!

          (0) 
    2. Samuli Kaski

      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>

      (0) 
      1. 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

        (0) 
        1. Samuli Kaski

          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, …).

          (0) 
          1. 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

            (0) 
            1. Noël Hendrikx 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.

              (0) 
              1. 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).
                (0) 
                  1. 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.

                    (0) 
                    1. Samuli Kaski

                      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).

                      (0) 
  4. Prasanna Seesala

    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

    (0) 
      1. Prasanna Seesala

        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

        (0) 
  5. 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?

    (0) 
    1. Noël Hendrikx 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

      (0) 
      1. 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.

        (0) 
        1. Noël Hendrikx 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;

          }

          (0) 

Leave a Reply