Activating the UI Theme Designer

The UI theme designer is a browser-based tool that allows you to develop your themes by modifying one of the theme templates provided by SAP using dynamic stylesheet language files (.less files). To create and edit portal themes using the UI Theme Designer, you must first install and activate the tool.

Procedure

Activate the UI Theme Designer:
1. In the portal, go to System Administration System Configuration Service Configuration Applications com.sap.portal.themes.lafservice Services .
2. From the context menu of the laf service, choose Configure.
3. In the Determine what will be the theme runtime provider property, change the value to LESS and save your changes.
4. Restart the service.
The portal Theme Editor and the ITS Theme Generator are removed from System Administration Portal Display .
Download the latest version of Apache Tomcat.

Add the following to the web.xml file located in <tomcat folder>\webapps\ROOT\WEB-INF:

Syntax Syntax

<servlet>
	<servlet-name>webdav</servlet-name> 
	<servlet-class>org.apache.catalina.servlets.WebdavServlet</servlet-class> 
	<init-param> 
		<param-name>debug</param-name> 
		<param-value>0</param-value> 
	</init-param> 
	<init-param> 
		<param-name>listings</param-name> 
		<param-value>true</param-value> 
	</init-param> 
			<!-- The following for read-write access -->
	<init-param> 
		<param-name>readonly</param-name> 
		<param-value>false</param-value> 
	</init-param> 
</servlet>

End of the code.

Log on to the portal and go to http://<host>:<port>/irj/servlet/prt/portal/prtroot/com.sap.portal.lessportaldesigndatazip.default to install the UI Theme Designer component.
1. Choose Click here to download the latest UI Theme Designer and save the ZIP file locally.
2. Create a new folder under ...Tomcat 8.0/webapps/ROOT and extract all of the UI Theme Designer files.
3. Choose Click here to download the latest theme structure and save the ZIP file locally.
4. In the <tomcat folder>\webapps\ROOT folder, create a folder called theming and extract the theme structure files.
To open the UI Theme Designer, go to http://<host>:<port>/<folder name from step 4.2>/index.html?sap-themeroot=http://localhost:8080/theming&sap-webdav-themeroot=http://localhost:8080/theming.
To use themes created in the UI Theme Designer, do the following:
1. In the UI Theme Designer, choose Theme Export .
  A ZIP file is created.
2. In the portal, go to System Administration Portal Display Theme Transport and import the ZIP file created in the UI Theme Designer.

More Information

For more information about using the UI Theme Designer, in SAP Help Portal, navigate to SAP NetWeaver User Interface Add-On for SAP NetWeaver UI Theme Designer
Exporting and Importing Themes