Change portal theme attribute and CSS values

Step 1 - Login
First things first you need to login to your SAP portal as the Portal administrator with system administration rights.

Step 2 - Navigate to your theme
Go to 'System Administration' tab and select the 'Portal Display' sub tab. Now ensure the Theme Editor option is selected and click on the portal theme that you want to change (i.e. MyTheme)

Step 3 - Change theme attribute values
Now you will see a list of page elements on the left and when you click on each one their associated attributes on the right. For example the first element th 'Portal Masthead' has a number of attributes which can be set using this method to change the look and feel. So looking at the small section shown in the image below you can see that you can change a number of attributes of welcome area such as Font Color, Font Style, Font Weight etc.

Step 4 - Change attributes that arn't available in the theme editor
An important thing to note is that you can also change attributes that arn't shown in the list, for example if the 'Font Weight' attribute was not there you could still change the font weight by adding the following standard CSS code to end of the size attribute ';font-weight:bold'. This basically closes off the size tag with the ; and then declares the new weight tag. Any number of CSS tags can be added like this to any field you like.

Another way to demonstrate this is if now add the following position tag(which is not available in theme editor) to the Font Color field attribute ';postion:absolute; left:50; top:50;' and Press the enter key. You should now see the welcome text move to the specified possition in the preview window.

Step 6 - Next step
Next step is to change the portal CSS values directly in the html files associated with a theme.

Related Articles

Call second portal page from ABAP web dynpro based iview
Add back button to your portal ABAP web dynpro based iview, returns user to page iview was called from
Link directly to SAP Portal iView page
Display ABAP web dynpro as an SAP Portal iView
Import / Export portal theme styling and CSS files
Create new SAP portal desktop and assign theme to it
Add back button to your portal ABAP web dynpro based iview, returns user to page iview was called from
Create new SAP portal theme to change the look and feel of your SAP portal
Assign SAP portal theme desktop to specific users
SAP Portal development - Provide SAP functionality to users via the SAP ESS MSS Portal
Pass portal user ID to bespoke web dynpro for ABAP
Change SAP Portal theme to improve look and feel and add new functionality