How to change the color of header line of a tray?

[former_member207732]

For the tray tag in HTMLB, how to change the color of its header line? Because I can not find any attributes to set the color.

Thanks!

[Former Member · Accepted solution]

Hi

You can use Themes to change the color.

for more details go thru the link

http://help.sap.com/saphelp_47x200/helpdata/en/e1/8e51341a06084de10000009b38f83b/frameset.htm

Regards

Naresh

[maximilian_schaufler]

Hi,

check out these two weblogs:

<a href="/people/sap.user72/blog/2005/04/12/bsphowto-css-hints--custom-design-for-your-bsp-applications: CSS Hints - Custom Design for your BSP Applications</a>

<a href="/people/brian.mckellar/blog/2005/06/12/bsp-in-depth-abap-look-and-feel-service In-Depth: ABAP Look and Feel Service</a>

[former_member207732]

Thanks for your answer!

But the problem is I just want to change the style of tray only, if I define a css file which define table's style,e.g. the background color of row, it maybe affect all tables' rows on page, is it right?

So how can I change the style of a tray only on web page?

Thanks!

[maximilian_schaufler]

You can do just what you want, it's pretty simple.

Basic CSS knowledge required of course (http://www.w3schools.com/css/).

In the head section of your page the SAP design style files get included (see my first weblog above for info on htmlb:headInclude).

As there are many different ways to define CSS styles, all you have to make sure is to include your own custom style after the htmlb head element includes its files.

Just create your own file and include it, or define the styles in the page directly ... whatever you like - my recommendation would be a separate file.

All that is left is to re-define the style classes that are used for the tray. Look at the HTML source code that your page has, search for the HTML elements that are used to build the tray - there you will find class names ... and voila, use these class names in your own custom file to overwrite and re-define your styles.

I'm pretty sure that with the given resources you can get it working - if not, feel free to come back for more detailed help.

Max

[former_member207732]

Sorry to bother you again. Do you know the standard class names to of the tray header or body if I use design2002 or design 2003?

I know I should do it myself, but actually it's difficult to find real class name I want from such a mixed html source.

Thanks!

[maximilian_schaufler]

No problem,

as long as you read and follow this weblog (/people/mark.finnern/blog/2004/08/10/spread-the-love) you are welcome to bother us

The class names for tray elements should start with urtrc*

urtrcbody* for the body elements

urtrchd* for the header

If you search your html source for classes starting with urtrc you should be ok. And don't be worried, there are many classes, just take your time, write down all the tray classes you find, and after that check the css file for the definitions. Look for the ones you want to change ... it's not difficult.

Oh, and remember, the tray can have different states (open, closed, ...), so be sure to look at the HTML source of pages with the tray being rendered in different states.

Max

[athavanraja]

if the change is for a tray in a single application you could try something like below.

<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003" >
  <htmlb:page title=" " >
    <htmlb:form>
      
<%
data: title type string .

concatenate
`<table border="0" width="600px" id="table1" bgcolor="#FFFF00">`
`<tr><td>This is the title of the tray</td>	</tr></table>` into title.

                    %>
      <htmlb:tray id     = "tray1"
                  title  = "<%= title %>"
                  design = "TEXT"
                  width  = "100%" >
        <htmlb:trayBody>
          <htmlb:textView text="body of the tray" />
        </htmlb:trayBody>
      </htmlb:tray>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

Regards

Raja

PS :- As you are new to SDN forums may i suggest you to have a look at the following weblog.

/people/mark.finnern/blog/2004/08/10/spread-the-love