Which property in theme editor corresponds to css stylesheet class?

[Former Member]

Hi,

while branding the portal theme I run into the question, which exact property of the theme editor would be responsible for the style of a certain html element on a portal page.

In my case, I have a BeX variable entry dialog.

The style I want to change is set by a stylesheet class named urSTTDRo2. What is the procedure to conclude from this stylesheet class name to the responsible theme editor property?

When I export a theme, I can see that it uses a lot of parameter properties. The parameter names are concatenated abbreviations of words. Has anyone a list thereof or is this left as guess work for us? Is there a chance to relate the parameter to the portal theme property?

Any clues appreciated ;o)

[former_member186017]

Hi,

Sorry for my last reply, it got a little mixed up...

I developet a support tool that enables to find the entry in the theme editor, you can download it from :

https://sapmats-de.sap-ag.de/download/download.cgi?id=AOSTW663S28J4D8L9PKUAXL2WDIZBFMAJAQMMWOPCMC818...

in the next 80 days.

This is basucally a portal component (par file) that you have to deploy in the portal and create an iView from.

when launching the iView you will have to enter the class name taken from the DOM inspector and the result will be the

location of that entry in the theme editor.

This toll is not official yet, and works only for servers installed on windows OS.

I would like to hear your feedback.

Best Regards,

Nadav.

Edited by: Nadav Nuri on Dec 24, 2009 3:03 PM

[former_member186017]

Hello,

I saw a lot of downloads of the tool.

I would like to know if anyone tried it, and if so, I'd like to hear some feadbacks.

Thanks & BR,

Nadav.

[Former Member]

Hi Nadav,

Yes I downloaded and tried and it worked perfectly. Great stuff. Keep it up.

Nikhil

[Former Member]

Nadav, could you make available this tool for download once again.

Thanks,

Lucjan

[former_member186017]

Hi,

Check the following Blog, It explains how to use the new Tool and In case the version of your Portal does not meet the requirements you can download the par file from there as well.

Best Regards,

Nadav.

Edited by: Nadav Nuri on Jun 3, 2010 1:30 PM

[former_member186017]

Hi,

Well this is very tricky ...

1. First you have to find the class name using the DOM inspector as you did,

for example "PrtlHdrWelcome"

2. Find the Parameter that represents the class in the designpart file that within:

...\usr\sap\<SID>\JC<XX>\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\

portalapps\com.sap.portal.design.portaldesigndata\config\data

(in this case the designpart file is 'prtl.designpart' -> parPrtlHdrWelcome,

in your case look for the Bex file under com.sap.portal.design.urdesigndata.)

<p id="parPrtlHdrWelcome" sdps="" c=".prtlHdrWelcome">

<ld p="parPrtlMastHeadWelcomeFontColor"/>

<ld p="parPrtlMastHeadWelcomeFontStyle"/>

<ld p="parPrtlMastHeadWelcomeFontFamily"/>

<ld p="parPrtlMastHeadWelcomeRelFontSize"/>

<ld p="parPrtlMastHeadWelcomeFontWeight"/>

<ld p="parPrtlMastHeadWelcomeTxtAlg"/>

<ld p="parPrtlMastHeadWelcomeBgColor"/>

<ld p="parPrtlMastHeadWelcomePadding"/>

<ld p="parPrtlMastHeadWelcomeDisplay"/>

<ld p="parPrtlMastHeadWelcomeBgRep"/>

<ld p="parPrtlMastHeadWelcomeBgPos"/>

<ld p="parPrtlMastHeadWelcomeWidth"/>

<ld p="parPrtlMastHeadWelcomeHeight"/>

<ld p="parPrtlMastHeadWelcomeBgImg"/>

</p>

3. now you have to find one of the properties from above in the group (Hierarchy) id by search for the id in the 'pageInfoIE0.xml' file:

...\usr\sap\<SID>\JC<XX>\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\

portalapps\com.sap.portal.design.portaldesigndata\pageInfo

As you can see when looking for "parPrtlMastHeadWelcomeFontColor" I found it here:

<group groupId="masterGroup">

<group groupId="PageGrpPortalOuterFrame" titleId="PageGrpPortalOuterFrame">

<group groupId="PagePortalMastHead" titleId="PagePortalMastHead">

<preview textId="PagePortalMastHead" eventType="ComponentPreview" event="com.sap.portal.navigation.masthead.default">

<themePart>portal</themePart>

<themePart>ur</themePart>

</preview>

<group groupId="ParGrpMastHeadWelcome" titleId="ParGrpMastHeadWelcome">

<parameter name="parPrtlMastHeadWelcomeFontColor"/>

<parameter name="parPrtlMastHeadWelcomeFontStyle"/>

<parameter name="parPrtlMastHeadWelcomeFontFamily"/>

<parameter name="parPrtlMastHeadWelcomeRelFontSize"/>

<parameter name="parPrtlMastHeadWelcomeFontWeight"/>

<parameter name="parPrtlMastHeadWelcomeTxtAlg"/>

<parameter name="parPrtlMastHeadWelcomeBgColor"/>

<parameter name="parPrtlMastHeadWelcomePadding"/>

<parameter name="parPrtlMastHeadWelcomeDisplay"/>

In case I could'nt find "parPrtlMastHeadWelcomeFontColor" I would look for "parPrtlMastHeadWelcomeFontStyle" and so on.

4. now you know the heirarchy which means where the property you have to change is located in the theme editor, but

you only know the id's...

In order to translate the id's to names you have to go to

...\usr\sap\<SID>\JC<XX>\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\

portalapps\com.sap.portal.design.portaldesigndata\classes\com\sap\portal\groupText.properties

and look for the id's as so:

PageGrpPortalOuterFrame=Portal Outer Frame

PagePortalMastHead=Portal Masthead

ParGrpMastHead=Welcome Area

So in my case I have to open the Theme editor, and navigate to

Portal Outer Frame -> Portal Masthead -> Welcome Area

I hope that will help you.

Best Regards,

Nadav.

[Former Member]

You can use MS DOM inspector for this:

https://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displ...

[Former Member]

I used the DOM inspector already to find out the exact element and its style classes.

Now I want to know, which knobs and switches do I have to play in the theme editor in order to change the attributes of the style classes.

The attribute values of the style classes are generated by the theme editor on save, as far as I can tell.

[Former Member]

I had the same problem with the background-color of read-only cells in editable tables. These cells use the css class urSTTDRo2.

The solution is to set the background in simple-elements->Bezeichner und Felder->Schreibgeschützte Eingabefelder (write-protected Input fields)

->Hintergrundfarbe schreibgeschütztes Eingabefeld.

This will also change the background-color of the table cell.

I hope this helps, though the answer is a bit late...