SAP NetWeaver How-To Guide
How to Customize the Forums Look and Feel
Applicable Releases: SAP NetWeaver 7.0 and higher SAP NetWeaver 7.3 and higher
Topic Area: Forums Capability: Customize the Forums Look and Feel
Version 1.0 September 2012
© Copyright 2012 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the United States and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe Systems Incorporated in the United States and other countries. Oracle and Java are registered trademarks of Oracle and its affiliates. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems Inc. HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, MultiTouch, Objective-C, Retina, Safari, Siri, and Xcode are trademarks or registered trademarks of Apple Inc. IOS is a registered trademark of Cisco Systems Inc. RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered trademarks of Research in Motion Limited. Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc. INTERMEC is a registered trademark of Intermec Technologies Corporation. Wi-Fi is a registered trademark of Wi-Fi Alliance.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. These materials are provided “as is” without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages. SAP NetWeaver “How-to” Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting. Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.
Bluetooth is a registered trademark of Bluetooth SIG Inc. Motorola is a registered trademark of Motorola Trademark Holdings LLC. Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.
Disclaimer: Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components. Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.
i
Document History Document Version
Description
1.00
First official release of this guide
ii
Typographic Conventions Type Style
Description
Example Text
Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Cross-references to other documentation
Example text
Emphasized words or phrases in body text, graphic titles, and table titles
Example text
File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools.
Example text
User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation.
Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system.
EXAMPLE TEXT
Keys on the keyboard, for example, F2 or ENTER.
Icons Icon
Description Caution Important Note Recommendation or Tip Example
iii
Table of Contents 1.
Business Scenario............................................................................................................... 1
2.
Background Information ..................................................................................................... 1
3.
Step-by-Step Procedure ...................................................................................................... 2 3.1 Editing the Default Theme Provided with the Forums Installation ................................ 2 3.2 Creating a New Custom Theme ................................................................................... 3 3.2.1 Creating Themes in SAP NetWeaver 7.0 and Higher ..................................... 3 3.2.2 Creating Themes in SAP NetWeaver 7.3 and Higher ..................................... 4 3.2.3 Example: Editing the CSS of a Custom Theme ............................................... 5
iv
How to Customize the Forums Look and Feel
1. Business Scenario As a forum administrator you can customize the look and feel of the forum application. You can do this in the following ways:
Edit the default theme that is part of the forum installation.
Create your own custom theme.
2. Background Information Depending on the way, in which you choose to customize the forum application, you must consider the following:
Editing the default theme To edit the default theme you do not need to have any previous knowledge in development or design.
Creating a new custom theme To create a new custom theme you must have some knowledge and experience in development.
September 2012
1
How to Customize the Forums Look and Feel
3. Step-by-Step Procedure 3.1
Editing the Default Theme Provided with the Forums Installation
In the Forums application there are several themes that are created during the installation. These are the default theme, SAPTradeshow, SAPHighContrastBlack and SAPHighContrastWhite. If you want to make small changes to the user interface, we recommend that you do that by editing the default theme. From the forums administration console, choose User Interface Themes Edit Default. You can edit the following aspects of the default theme:
Font settings
Color settings
Global header and footer
Editing the Font Settings ...
To edit the global font settings enter a list of fonts (in order of preference) and font size in the corresponding fields as follows:
Global font – this is the font that is used for the body text of the forums.
Description (Smaller) Font – this is the font that is used for descriptions, button labels and so on.
Editing the Color Settings In the Global Color Settings table you can choose a different color for each of the individual elements listed in the table. You can do that in two ways:
Click the colored button that appears in the middle column of the table. In the dialog that appears select the new color and choose the OK button.
Enter the hexadecimal code of a color directly in the field that appears in the middle column. When you change the color of some of the elements, an example with the new color appears in the third column of the table. ...
Editing the Global Header and Footer Note When you set custom Global Header and Global Footer this affects all the themes installed in the system. 1. To activate the use of custom header and footer, choose the Use Custom HTML radio button for each of these elements. 2. In the respective fields enter the text or path to the image that you want to be displayed. Example For HTML Header enter: For HTML Footer enter: This is my system Copyright (C)
September 2012
2
How to Customize the Forums Look and Feel
As a result, the forums application looks like this:
3.2
Creating a New Custom Theme
To create a new theme, we recommend that you copy the content of one of the themes that are provided with the forums installation. This way you get all the files that are needed for the theme and you can start making your own customizations.
3.2.1
Creating Themes in SAP NetWeaver 7.0 and Higher
The procedure described below applies to the following releases:
SAP NetWeaver 7.0
SAP NetWeaver 7.0 including Enhancement Package 1
SAP NetWeaver 7.0 including Enhancement Package 2
The themes are located in the \usr\sap\\\j2ee\cluster\\apps\sap.com\com.sap.netweaver.coll.forumsHome\servl et_jsp\forumsHome\root\jiveHome\themes directory. To create a custom theme, follow the steps below: 1. Open the \usr\sap\\\j2ee\cluster\server\apps\sap.com\com.sap.netweaver.coll.forumsHome \servlet_jsp\forumsHome\root\jiveHome\themes directory. 2. Copy the content of one of the directories that contain the themes provided with the forums installation, for example, SAPTradeshow. 3. Create a new directory, for example, MyTheme and paste the content in it. This name will be displayed in the Admin Console as the name of your new theme. 4. Some files contain SAPTradeshow in their name. Replace that with MyTheme. For example, rename the files SAPTradeshow.ftl and admin_SAPTradeshow.ftl to MyTheme.ftl and admin_MyTheme.ftl respectively. 5. Open the file theme.xml file and edit it as follows: MyTheme MyTheme.ftl
September 2012
3
How to Customize the Forums Look and Feel
en_US --> --> 6. Synchronize the \usr\sap\\\j2ee\cluster\server\apps\ sap.com\com.sap.netweaver.coll.forumsHome\servlet_jsp\forumsHome\root\jiveHome\themes directory across your system. This folder must be the same in all server instances and in all server nodes. 7. Restart the application. 8. To verify that your new theme is available, from the forums administration console, choose User Interface Themes Custom Themes. Note During an upgrade the jiveHome directory is overwritten. Therefore, we recommend that before an upgrade you make a backup of the \jiveHome\themes directory and also archive your custom theme. After the upgrade, copy your theme to all server instances and nodes again and it will be available when you open the forum application.
3.2.2
Creating Themes in SAP NetWeaver 7.3 and Higher
The procedure described below applies to the following releases:
SAP NetWeaver 7.3
SAP NetWeaver 7.3 including Enhancement Package 1
The themes are located in the \usr\sap\\SYS\global\forums\themes directory. To create a custom theme, follow the steps below: 1. Open the \usr\sap\\SYS\global\forums\themes directory. 2. Copy the content of one of the directories that contain the themes provided with the forums installation, for example, SAPTradeshow. 3. Create a new directory, for example, MyTheme and paste the content in it. This name will be displayed in the Admin Console as the name of your new theme. 4. Some files contain SAPTradeshow in their name. Replace that with MyTheme. For example, rename the files SAPTradeshow.ftl and admin_SAPTradeshow.ftl to MyTheme.ftl and admin_MyTheme.ftl respectively. 5. Open the file theme.xml file and edit it as follows: September 2012
4
How to Customize the Forums Look and Feel
MyTheme MyTheme.ftl en_US --> --> 6. Restart the application. 7. To verify that your new theme is available, from the forums administration console, choose User Interface Themes Custom Themes. Note During an upgrade the \usr\sap\\SYS\global\forums\themes directory is overwritten. Therefore, we recommend that before an upgrade you make a backup of your custom themes.
3.2.3
Example: Editing the CSS of a Custom Theme
After you create your own theme, you can edit the CSS files located in \MyTheme\resources to customize the forums look and feel. To do that you can use some of the developer tools that integrate with web browsers, for example, Microsoft Internet Explorer’s integrated Developer Tool, or Firebug in Mozilla Firefox. With these tools you can easily locate the CSS classes that you need to edit to change the forums. The example below shows how to change the background color of the table headers from #C6C9CC to #F7ED79: 1. Use your browser’s developer tools to identify the CSS classes that are used. 2. Edit the file \MyTheme\resources\style.css as follows: .jive-table THEAD TH { FONT-SIZE: 0.7em; font-weight : bold; text-align : center; background-color : #F7ED79; color : #000; border-top : 1px #F7ED79 solid; border-bottom : 1px #F7ED79 solid;
September 2012
5
How to Customize the Forums Look and Feel
} .jive-table THEAD .jive-first { border-left : 1px #F7ED79 solid; } .jive-table THEAD .jive-last { border-right : 1px #F7ED79 solid; } .jive-table THEAD .jive-first-last { border-left : 1px #F7ED79 solid; border-right : 1px #F7ED79 solid; }
The screenshots below show the forum application before and after editing the CSS. Default color:
September 2012
6
How to Customize the Forums Look and Feel
Color after editing the CSS:
September 2012
7
www.sdn.sap.com/irj/sdn/howtoguides
