Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Noel_Hendrikx
Active Contributor

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


- com.sap.portal.design.portaldesigndataless

- com.sap.portal.design.urdesigndataless

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

There are 62 hits:

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;

@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!!!

Happy branding!

/*

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

/*

53 Comments
Noel_Hendrikx
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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.

Noel_Hendrikx
Active Contributor
0 Kudos

Hang on, posting it now :smile: Link incoming....

Noel_Hendrikx
Active Contributor
SandipAgarwalla
Active Contributor
0 Kudos

Noel

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

Thanks

Sandip

Noel_Hendrikx
Active Contributor
0 Kudos

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.

Former Member
0 Kudos

I like these kind of tricks. Thanks for sharing.

SandipAgarwalla
Active Contributor
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

You are welcome! Pleasure to share it with everyone.

Noel_Hendrikx
Active Contributor
0 Kudos

Good question, I don't know to be honest. Maybe shani.ozeri 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 :smile:

shani_ozeri
Participant
0 Kudos


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

SandipAgarwalla
Active Contributor
0 Kudos

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

shani_ozeri
Participant
0 Kudos

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

SandipAgarwalla
Active Contributor
0 Kudos

Hi Shani

Thanks for  your reply. Appreciated..

Regards

Sandip

SandipAgarwalla
Active Contributor
0 Kudos

shani.ozeri noel.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

shani_ozeri
Participant
0 Kudos


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

SandipAgarwalla
Active Contributor
0 Kudos

Thanks Shani

Former Member
0 Kudos

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

shani_ozeri
Participant
0 Kudos

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

Former Member
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

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 :wink:

Former Member
0 Kudos

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.

Best regards,

Thomas

Noel_Hendrikx
Active Contributor
0 Kudos

Hi Thomas,

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.

cheers,

Noël

SUMANTH2
Participant
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

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.

SUMANTH2
Participant
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

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!

Former Member
0 Kudos

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


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


Noel_Hendrikx
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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>

SandipAgarwalla
Active Contributor
0 Kudos

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

Former Member
0 Kudos

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

AviadRivlin
Advisor
Advisor
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

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.


shani_ozeri
Participant
0 Kudos

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).
Former Member
0 Kudos

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

shani_ozeri
Participant
0 Kudos

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.

Former Member
0 Kudos

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

shani_ozeri
Participant
0 Kudos

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

Former Member
0 Kudos

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

Former Member
0 Kudos

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

Noel_Hendrikx
Active Contributor
0 Kudos

Hi Prasanna,

I have written a blog about that too :smile:

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

Cheers,

Noël

Former Member
0 Kudos

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

roger_beach
Participant
0 Kudos

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?

Noel_Hendrikx
Active Contributor
0 Kudos

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

roger_beach
Participant
0 Kudos

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.

Noel_Hendrikx
Active Contributor
0 Kudos

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;

}

sankar_narayana
Active Participant
0 Kudos
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
pooja_konjara
Explorer
0 Kudos
Hello Noel,

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?

Thanks,

Pooja.
Noel_Hendrikx
Active Contributor
0 Kudos
Hi Pooja,

 

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:

https://help.sap.com/doc/saphelp_nw73ehp1/7.31.19/en-us/48/019e1784ff4aa5e10000000a421937/content.ht...

Hope that will help you a bit 🙂

 
Labels in this area