cancel
Showing results for 
Search instead for 
Did you mean: 

WPC -- Add external CSS to JSP for Custom WPC Page Layout

Former Member
0 Kudos

Hi Experts:

I have read many of the threads to add a custom external CSS stylesheet to my jsp file for a WPC custom Page Layout; but, I still cannot get the styles to work.

All works fine except for the external CSS. So far, I have done the following.

1. Create custom page layout

2. Create jsp file and portalapp.xml for new portal app in NWDS

3. Create new CSS stylesheet under dist\css

4. Modify jsp file to incllude CSS stylesheet

5. Test the new layout in WPC.

My IE Developer Toolbar shows that my stylesheet is included at runtime

Here is my code to include my CSS file located in dist\css.

<%@ page import="com.sapportals.portal.prt.component.IPortalComponentResponse"%>

<%@ page import="com.sapportals.portal.prt.resource.IResource"%>

<% IPortalComponentResponse componentResponse = (IPortalComponentResponse)pageContext.getAttribute(javax.servlet.jsp.PageContext.RESPONSE);

IResource myCss = componentRequest.getResource(IResource.CSS, "css/styles.css");

componentResponse.include(componentRequest, myCss);

%>

When I include my CSS class in a internal stylesheet, it works just fine. However, when I use the CSS class in an external CSS, the class is ignored. Again, I have verified that the stylesheet is included at runtime.

Has anyone experienced similar issues?

thanks in advance...

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
0 Kudos

It's all in the DOCTYPE declaration that  you see in a typical HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

SAP/WPC usually don't have this properly placed or is missing from any of the pages you create. Once you publish the page you created, view its source by right-click -> view source on the browser. You may be surprised that the DOCTYPE declaration is not there at all and the DOCTYPE declaration tells the browser how to render the page along with the CSS that you may have.