Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Custom Layouts using CSS

I have created a custom layout but the portal doesn't seem to acknowledge my stylesheet can someone please point out where I may be going wrong?

If I write my code like this everything works beautifully:


<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.WpcTagLibLayout" prefix="wpc"%> 
<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt" %> 

<lyt:template> 
  <table width="100%" cellspacing="0" cellpadding="0">   
    <tbody> 
        <tr width="100%"> 
            <th width="75%" align="left">font size="3" face="arial" color="white"><wpc:container id="h1" /></font></th> 
            <th width="25%" align="left" bgcolor="#C8C8C8"><font size="3" face="arial" color="white"><wpc:container id="h2" /></font></th> 
        </tr> 
    </tbody> 
  </table> 
</lyt:template> 

Problem is I have to do this for all six custom layouts - However if I try to apply a stylesheet as follows the formatting is completely lost:


<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.WpcTagLibLayout" prefix="wpc"%> 
<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt" %> 
<%@ 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 EPStyle = componentRequest.getResource(IResource.CSS, "css/EPStyle.css"); 
        componentResponse.include(componentRequest, EPStyle); 
%> 

<lyt:template> 
  <table class="EPTable">   
    <tbody> 
        <tr class="EPRow"> 
            <th class="EPHeader"><wpc:container id="h1" /></th> 
            <th class="EPHeader2"><wpc:container id="h2" /></th> 
        </tr> 
    </tbody> 
  </table> 
</lyt:template> 

I have placed a file named EPStyle.css in the css folder of the project. It contains the following code:


table.EPTable 
{ 
            width:100%; 
            padding-top:0; 
            padding-bottom:0;  
            padding-right:5; 
            padding-left:5; 
} 

tr.EPRow 
{ 
           width:100%; 
} 

th.EPHeader 
{ 
        width:75%; 
        align:left; 
        font-family:arial; 
        font-size:3; 
        font-color:white; 
} 

th.EPHeader 
{ 
        width:25%; 
        align:right; 
        font-family:arial; 
        font-size:3; 
        font-color:white; 
        background-color:C8C8C8;
} 

Helpful Answer

by
Not what you were looking for? View more on this topic or Ask a question