1 Reply Latest reply: Feb 12, 2013 7:35 AM by MWest RSS

    CLAF for Content Container.

    916738
      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
          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