This discussion is archived
1 Reply Latest reply: Feb 12, 2013 5:35 AM by MWest RSS

CLAF for Content Container.

916738 Newbie
Currently Being Moderated
Hi,

We have a requirement of changing the Back Ground color of a specific region of a seeded page. On reading some articles online and the Developers guide, we got a clue like proceeding forward with CLAF. However, we need some more help regarding the usage of the CLAF for setting the back ground color of a specific region of the Seeded page.


Thanks in advance,
Raja.
  • 1. Re: CLAF for Content Container.
    MWest Newbie
    Currently Being Moderated
    Hi,

    CLAF is really supposed to be used to give all pages a totally new look and feel.

    If you are only interested in one item on one page then I suggest using personalization or a combination of personalization and updating the /OA_HTML/cabo/styles/custom.xss

    I'm assuming you are trying to change a ContentContainer (one of the boxes that appear on the right hand side of the page). There are actually 4 different ContentContainers - Dark, Medium, Light, Transparent. These all have their own background-color controlled by the stylesheet.

    If you want to change one of these on a particular page, then the following should work in all cases.

    1) First find an item that is a 'parent' of the ContentContainer on your page. The top page item is normally the best bet.
    Personalize Page > Personalize the "Page Layout: XXX" item

    Update "CSS Class" property at site level to "MyNewContentContainerStyle"

    Save

    2) Open up /OA_HTML/cabo/styles/custom.xss and add the following code:

    ...

    <style selector=".MyNewContentContainerStyle .OraContentContainerDark .OraContentContainerBody">
    <property name="background-color">#000000</property>
    </style>

    <style selector=".MyNewContentContainerStyle .OraContentContainerMedium .OraContentContainerBody">
    <property name="background-color">#000000</property>
    </style>

    <style selector=".MyNewContentContainerStyle .OraContentContainerLight .OraContentContainerBody">
    <property name="background-color">#000000</property>
    </style>

    <style selector=".MyNewContentContainerStyle .OraContentContainerTransparent .OraContentContainerBody">
    <property name="background-color">#000000</property>
    </style>

    ...

    I've added 4 items as I don't know which content container you want to update. You could add any properties but to keep it simple, this should change the background-color to black.

    3) Clear your temporary internet files on your browser and re-genrate a new stylesheet.

    Your new stylesheet generated by your browser should now have extra entries for the new ContentContainers, and all other ContentContainers will be left with their default colors.

    Michael

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points