Custom Layouts using CSS

[Former Member]

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;
} 

[praveenkumar_gudapati · Accepted solution]

Hi,

Try using the IIncludeCssService class to include css files.

You can find this file in application com.sap.nw.wpc.cssservice under /lib/api.jar

The code looks like:

IIncludeCssService cssService = (IIncludeCssService) PortalRuntime.getRuntimeResources().getService(
				IIncludeCssService.KEY);
		cssService.includeCss(request, "com.my_company.myapplication", "css/EPStyle");

In above code the string com.my_company.myapplication is the application/par name.

Regards,

Praveen Gudapati

[Former Member · Accepted solution]

Thanks for the suggestion but that does not help either. I have noticed that even in NW Developers Studio when I preview using the CSS the styles are not adopted. For instance if style sheet says:

 font-color:red;

- the text still shows up black but if I put in

 <font color=red;> 

the font shows up red.

Edited by: TA on Oct 7, 2008 4:25 PM

It also seems to work fine if I use an embedded style sheet - so that is the work-around I am going to use. I would still like to use the external style sheet as it would mean I didn't have to update every layout when I make a change but at least this is just copy paste.

Edited by: TA on Oct 16, 2008 8:38 PM

[Former Member]

Everything seems to work if I use an embedded stylesheet so I will just copy and paste it to each of the layouts.

[Former Member]

hi,

dunno if im right but maybe try "color:red" instead of "font-color:red".

regards,

marco