Recent Enterprise portal versions include the new UI Theme designer, the official documentation can be found at:

http://help.sap.com/saphelp_nw73ehp1/helpdata/en/8e/a763272dcd4b4ba6ea347050b1f3fc/content.htm?frameset=/en/4e/81a626a87744dbaaad8c837d37f0b4/frameset.htm

Also before you start using it I strongly recommend to read the official limitation note 1890375,

In addition, before starting to use this solution. you need to apply the following note:

Note 1839261 – Application displayed without theme (UI Theme Designer)

In this blog I wanted to share with you a hands on experience, in the part 1 I will show simple branding of the portal with the UI Theme Designer and on part 2 I will show advanced branding using the Web Resource Repository: http://scn.sap.com/community/netweaver-portal/administration-and-development/blog/2013/10/15/customizing-the-portal-using-the-new-ui-theme-designer–part-2

So let’s begin 🙂 The prerequisite for this blog is that you already configured the portal to work with the new theming (this can be easily found in the documentation).

Step 1

launch the new UI Theme Designer

/wp-content/uploads/2013/10/1_293747.png

Step 2

Select the base theme you would like to customize

2.JPG

Step 3

Select the Portal Control Previews and then select the AJAX Framework Page preview

/wp-content/uploads/2013/10/3_293749.png

This step is very important since you can select additional previews to work on simultaneously, as you can see you have not only portal previews but also Unified Rendering previews!

/wp-content/uploads/2013/10/4_293768.png

Now Let’s start customizing 😎

Step 4

Quick theming is the first thing you would usually change, this will affect the basic coloring in few clicks.

Currently the quick theming is not supported for portal controls (it is planned to be supported in the future) and because of that we will use the quick theming to change Unified Rendering controls.

/wp-content/uploads/2013/10/5_293769.png/wp-content/uploads/2013/10/6_293770.png

Step 5

Expert theming is the next step, here you will see all the existing parameters and once you change them you will see it reflected in the preview.

Since there are a lot of parameters in the expert view my tip is to work with the categories:

/wp-content/uploads/2013/10/7_293849.png/wp-content/uploads/2013/10/8_293850.png

Lets’s change the logo image in the Masthead category, the property is: sapPrtAFPMastheadLogoImage:

/wp-content/uploads/2013/10/9_293851.png

Looks tight up there, let’s give it some space 😉 the properties are: sapPrtAFPMastheadLogoImageHeight and sapPrtAFPMastheadLogoImageWidth

/wp-content/uploads/2013/10/10_293867.png

Now lets play with the Top Level Navigation, select the Top Level Navigation category:

Change the parameter: sapPrtAFPTlnFirstLevelTabStandardTextColor

/wp-content/uploads/2013/10/12_293868.png

Change the parameter: sapPrtAFPNewTLNFirstLevelTabDownColor

/wp-content/uploads/2013/10/13_293869.png

Now lets play with the Detailed Navigation, select the Detailed Navigation category:

Change the parameter: sapPrtAFPNewDTNTreeTextStandardColor

/wp-content/uploads/2013/10/14_293897.png

Step 6

That’s it, now what’s left to do is to publish the new theme 😏

/wp-content/uploads/2013/10/15_293899.png/wp-content/uploads/2013/10/16_293900.png

The new theme is in the portal now and you can use it the same way as in the past (Assign it to your desktop). If you want to see your changes quickly just add the following parameter to the portal’s URL: theme=<new theme id>

Good Luck 😎

Itzik


To report this post you need to login first.

34 Comments

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

  1. Sumanth Thunga

    Hi Itzik,

    Nice Blog…

    Are you using 7.3 EHP1 or 7.3 SPS10?

    I enabled after i updated my portal to SPS10 and I am having issues with UI Theme designer 7.3 SPS10 in publishing and have a OSS Message running with SAP.

    In fact, this blog is referenced in OSS Message. in 7.3 SPS10, Quick Tab is empty and also mentioned in limitations.

    Also what browser version are you using for UI Theme Designer.

    Other problem i have is after enabling UI Theme designer, all BEX reports are rendering without any themes and crapy… Did you noticed any sort of these issues?

    Appreciate your inputs.

    Thanks
    Sumanth

    (0) 
    1. Itzik Feldman Post author

      Hi Sumant,

      The same solution is available both in 7.3 SPS10 and 7.3 EHP1 SPS9.

      Can you please tell me the OSS message number so I can have a closer look on the issue you mentioned?

      Regarding the browser version you can use chrome, FF, IE9 or above.

      Regarding the BEX reports, I am not aware of such an issue, can you please open OSS message with all the details and send me the number? I promise to handle it as quick as possible.

      Thanks,

      Itzik

      (0) 
      1. Sumanth Thunga

        Hi Itzik,

        Thanks for the response. I use all three different browsers and got in to different kind of issues. Also my Theme screens when framework is loaded are little different from the screen shots in this blog.

        Below are my two OSS Message:

        Portal Error after Creating a theme using UI Theme Designer ( 921625 / 2013 )

        BEx BI Reports are not rendered correctly with new UI Theme ( 953809 / 2013 )


        For BEx Issue, i disabled the new UI Theme desiner in Producer Portal (BI Java) so we can continue with testing of functionality. Reports load with SAP Tradeshow plus default theme. The  moment i enable the UI theme designer, standard themes are also not getting rendered correctly for BI Reports.

        Please let me know if more information is needed in Messages.


        Thanks

        Sumanth

        (0) 
        1. Itzik Feldman Post author

          Hi Sumanth,

          Thanks for the information, we will look into the issues and get back to you.

          Regarding the browsers the recommended browser is chrome.

          Thanks,

          Itzik

          (0) 
          1. Sumanth Thunga

            Hi Itzik,

            Thanks for the Help on messages. I saw the Part 2 Blog and these were the things i was researching from a month when i updated SPS10.

            Will there be part 3 on Export and Transport of themes and what folders to be selected for transport.

            Other question i have and noticed:

            1. There are significant differences i see with SAP_CORBU with out UI Theme Desinger  and with Theme Designer. May be differences because of LESS Files generation. Is this a known difference?

            2. DO we need to publish the Standard Themes when new UI Theme Designer is enabled?

            Thanks
            Sumanth

            (0) 
            1. Itzik Feldman Post author

              Hi Thunga,

              I am glad you find my blogs helpful 🙂

              I didn’t have a plan to release an additional blog but I will be happy to answer any question you have here (or you can send me an email with additional details).

              In general the migration is covered in the official documentation:

              http://help.sap.com/saphelp_nw73ehp1/helpdata/en/6f/8f28eba0d446c29336d51b3f51edc9/content.htm?frameset=/en/4e/81a626a87744dbaaad8c837d37f0b4/frameset.htm

              Regarding Themes transport, it can be done only with the standard portal transport (EPA). This is the same functionality as in SP09 with the old theme editor. All you need to do is to create a transport package and add the theme object to it (under System Administration->Transport->Transport Packages). Note – the old Transport themes UI is used now only for migration from old theme structure and not for transporting themes.

              Regarding your questions:

              1. I am not a ware of the differences, can you please send me the main differences? maybe an OSS message should be opened?

              2. No, this is done automatically out of the box.

              Thanks,

              Itzik

              (0) 
              1. Sumanth Thunga

                Hi Itzik,

                Thanks for your help. I created another message for the Differences i noticed.

                Theme Differences with New UI Theme Designer ( 996024 / 2013 )

                Thanks
                Sumanth

                (0) 
  2. Ricardo Fuzeta

    Hi Itzik Feldman,

    I think i have the same problems as Sumanth Thunga,

    I’m trying to change the theme in an application using theme designer. I do all the steps, change colors and all that stuff, but when i try to check the changes, doesn’t show me nothing, just the default theme used by the App.

    Also when i save the changes as draft, theme designer doesn’t let me change nothing on my previous draft.

    I’m using chrome the check it.

    Thanks,

    Ricardo Fuzeta

    (0) 
      1. Ricardo Fuzeta

        Hello Itzik,

        Thank you for your answer.

        I was changing the application view.

        I think there we were facing two problems:

            – One of them was because there was more than one person making changes on the theme designer with the same user. (Not sure if that’s a real problem, but it only works correctly when there’s only access per user)

            – The other problem was with the templates. We were changing a mobile app, and we can only make it work with the blueCrystal template. All the other templates don’t work.

        Once again thank you for your help.

        Greetings,

        Ricardo Fuzeta

        (0) 
        1. Itzik Feldman Post author

          Hi Ricardo,

          In which technology is the mobile app written? Is it UI5? if yes then it is still not supported to customize UI5 applications through the portal (see the limitations note 1890375). If not please let me know which technology are you using?

          Thanks,

          Itzik

          (0) 
  3. Samuli Kaski

    Thanks Itzik. I assume you were using NetWeaver 7.4 while creating these blogs? I’m asking because most of the steps you describe in these blogs, can’t be done with NetWeaver 7.31 SPS09, at least without errors. Even changing the masthead logo results in a null reference in the UI Theme Designer when publishing the theme. I was able to cheat the tool by manually creating the directories in the repository, changing the base.less file directly and then generating & publishing the theme in UI Theme Designer. I hope SAP will release fixes soon, there is already SAP note 1927550 but it is not accessible to mere mortals.

    (0) 
  4. Srikanth Chandru

    Itzik,

    Great Info. Thanks for the article.

    I was trying to launch the new UI Theme Designer from Portal to theme the “Ajax Framework Pages’. When I launch it, the tool loads completely but gives an error ‘Theme Repository Could not be Read’ and gives me no option to continue any further.

    Do you think I have missed any pre-req configuration or any OSS Notes.

    Thanks,

    Srikanth

    (0) 
    1. Antonin Tesacek

      Hi Srikanth,


      I have the same problem.

      I have NW7.30 SPS11 Portal and when I start UI Theme Designer I get message “Theme Repository could not be read!” and I can’t do nothing more with UI Theme Designer.

      Have you already found some solution for this problem?


      Or could someone help with it?

      Do we miss some configuration?


      Thanks,

      Antonin

      (0) 
      1. Srikanth Chandru

        Hi Antonin,

        No luck at all. We have raised an incident with SAP for the same now.

        Let me know, if you find any solution in the meanwhile.

        Thanks,
        Srikanth

        (0) 
        1. Noël Hendrikx

          There are a few ways to find out what is going wrong in the meantime.

          1) Check out the default trace in the portal.

          2) Check out the UI Theme Designer log (if you can open it). Open the Theme menu and select “View Log”.

          3) Use an http watcher or developer toolbar to examine http connection problems (403,404,302).

          4) Use another browser (is the problem browser related)?

          Good luck!

          Noël

          (0) 
  5. navya shetty

    Hi Itzik,

    We have recently upgraded to NW 7.31 SP9 and we did enable theme designer but we are facing few issues.

    1) I have imported the theme created using theme editor but I am unable to edit those in theme designer.

    2) I am unable to add background image in theme created using theme designer. As per the steps mentioned in your blog , when I drag a image from desktop it doesnt show me the image on screen and to save it as shown in screen-shot below. Can you please guide me where i might be going wrong.

    UploadBgimage.jpg

    Regards,

    Navya

    (0) 
      1. navya shetty

        Hi Noel,

        The drag and drop of image works fine in google chrome but doesn’t work in Internet Explorer 9.

        The themes that were generated using theme editor , I am unable to edit it using theme designer. The themes created using theme editor are visible in theme designer but when i edit it , it doesn’t show me the AFP contents in those three tabs.

        Regards,

        Navya.

        (0) 
        1. Samuli Kaski

          As I remember it the UI Theme Designer developers told in TechEd last year that Chrome is preferred. If you have to use IE, it has to be IE10 or higher.

          (0) 
          1. navya shetty

            Hi Samuli,

            Any idea what might be wrong as we are not able to edit themes created using theme editor in theme designer even in chrome.

            Regards,

            Navya

            (0) 
            1. Samuli Kaski

              Create a discussion thread about it and share all relevant technical information and what you are trying to achieve. You should really update to either SPS10 with latest patches or SPS11. The UI Theme Designer in SPS09 isn’t very functional.

              (0) 
  6. Durga Rao Vaddadi

    Hi Itzik,

    Thanks for the article.


    in this article Step 4

    “Quick theming is the first thing you would usually change, this will affect the basic coloring in few clicks.Currently the quick theming is not supported for portal controls (it is planned to be supported in the future) and because of that we will use the quick theming to change

    Unified Rendering controls. ”

    This quick theming pane as show above in your screen is not available in my server and we are using the 7.4 version  and also please help me in solving the same as we have already raised this earlier .

    UI Theme Designer Doubts..

    Regards

    Durga Rao

    (0) 
  7. Deepak Ramani

    Hi Folks,

    I uploaded a new logo for fiori framework page and it shows up fine for me (Super Admin User).

    But for end users the image does not display the logo, seems to be permission issue.

    I tried opening the image directly as end user.

    Image URL

    /irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/Base/baseLib/custom_bluecrystal_V1/img/misc/sapCompanyLogo.gif

    I get the below error

    Error

    Error component failed , reason : Access is denied: com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener – user: Test User1 Original Exception : Access is denied: com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener – user: Test User1

    Permission

    Have given end user permission to everyone group for below folder.(Still same issue)

    Content Administration > Web Resource Repository > Web Resources

    Has anyone faced this issue? any pointers on how to resolve this?

    Thank you,

    Regards,

    Deepak.

    (0) 
    1. Joris Mermans

      Deepak,

      I’m facing the same issue (NW 7.4 sp 9) (UI theme designer  1.6.1.)

      If i try to access the uploaded image using the repo: com.sap.portal.resourcerepository/repo/theming/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png

      there is no problem.

      But running the portal flp it accesses the image via /irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png

      the testuser gets access denied..

      I also gave end user permission for the web resources map.

      ——————————————————

      update: solved the issue by modifying the image path in theme designer from

      url(“./img/misc/sapCompanyLogo.png”)

      to

      url(“/com.sap.portal.theming.webdav.themeswebdavlistener/Base/baseLib/kul_bluecrystal_fiori/img/misc/sapCompanyLogo.png”)

      so the image becomes ‘public’ by accessing it using /com.sap.portal.theming.webdav.themeswebdavlistener/ and not using the /irj/servlet/prt/prtrw/prtroot/com.sap.portal.theming.webdav.themeswebdavlistener.ThemesWebDavListener/

      Regards,

      Joris

      (0) 
  8. Sandip Agarwalla

    Hi Itzik Feldman

    I need to change the iView Tray Background and Font COlor. Can not seem to find the properties in the UI Theme Designer.

    I am creating a custom theme for the AJAX Framework Page.

    Could you please share the  properties that need to be change?

    Thanks

    Sandip

    (0) 
  9. Deepu Rajendrababu

    HI,

    the portal im using is 7.4 sp12. once i create a custom theme and make changes in them, they dont reflect at all. in preview and also by adding it in the url (theme= <theme id>

    (0) 

Leave a Reply