Re: Assign CSS file to a specific Web Dynpro component

• Run BSP_UPDATE_MIMEREPOS

• Specify your theme path

• Select Export to Disk

• Process whole structure (theme contains all objects like images and CSS file)

• Execute the program, It will ask path of disk where to store whole structure of the theme

• you have consider two folders for editing CSS locally on disk

1. LS - which is applied if you pass WDLIGHTSPEED = 'X' in WEBDYNPRO application parameter. Internally, IE takes LS CSS for WEBDYNPRO application. E.g. ls_ie6.css
2. UR - which is applied if WDLIGHTSPPED is blank. Internally applicable to Firefox and Chrome Browser. E.g. ur_nn7.css

• CSS File will be look like below code

• You can manually simplify it by editing in word as I have done like below. so it will be good for editing CSS

• In above image, you can see various CSS classes are displayed. You need to identify which class is used for which element.

• To Identify CSS class just run your WEBDYNPRO application once in any browser.

         In IE older version, you can see it by view -> source

• in new version, press F12, Inspect Element is there, you can just select it and place cursor over any element, it will give you information regarding CSS class

• Eg. .urbdystd is one CSS Class which represent background property of WEBDYNPRO Application. You can change background property and save it

• Another file is themeInfo.properties you need to change.

• Here you have to change source Template Design and design Name with your theme name.

• You can change background property and Save it.

• After Changing CSS, you can reimport using same program 'BSP_UPDATE_MIMEREPOS' and place CSS in particular location and execute the program. All files will be copied to particular folder which will be your theme name.

• As per my suggestion, you can place it in /SAP/PUBLIC/BC/UR/nw5/(themename)

• If you have development system then you need to specify request while importing CSS and you can easily move all objects by moving request to other system

• Now, you need to specify path to WEBDYNPRO application for rendering CSS, for that you have WDTHEMEROOT parameter in WEBDYNPRO application.

• Maintain following parameters in your WEBDYNPRO Application.

• After maintaining such parameters run your WEBDYPRO application, you can see the change for it.

Here, you have created your own custom theme and apply to specific WEBDYNPRO component. you can give it to other component also or you can create one or more theme for diff. WEBDYNPRO component too.

Thanks & Regards

Kishan Rana