1

I am new to Oracle ADF and using Jdeveloper 11.1.1.7 I am using skinning to create styles for my application. I would like use two different css files for a skin. lightblue.css will apply light blue color styles for a component and base.css will apply all other styles for a component. This way I can change color themes to my application by changing/creaing color css files. But somehow importing base.css in lightblue.css is not working in ADF.

Below is the Trinidad config file - trinidad-config.xml contents:

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>LightBlue</skin-family>
</trinidad-config>

Also here is Trinidad skin file - trinidad-skins.xml contents :

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
    <skin>
    <id>LightBlue.desktop</id>
    <family>LightBlue</family>
    <extends>fusion-simple</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>css/lightblue.css</style-sheet-name>
  </skin>
</skins>

Below is my sample css file - lightblue.css

@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

@import url("base.css"); /* importing external css file */

af|panelGroupLayout.navigationPane
{
    border:#00A9E0 solid 1px;
}

Also base.css is located in same folder "css" as - lightblue.css and its contents:

@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

af|panelGroupLayout.navigationPane 
{
    height: 32px;
    width: 98%;
    text-align: center;
    margin: 0 1%;
}

Also used content compression in web.xml as below:

  <context-param>
    <description>Trinidad Style Compression</description>
    <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
    <param-value>true</param-value>
  </context-param>

When I use the style in my JSF page I don't see any styles applied to my components that are defined in base.css but can see all styles from lightblue.css

Am I not importing my base.css correctly or missing something?

Please help.

user1373028
  • 39
  • 1
  • 6

2 Answers2

0

Try to modify lightblue.css like that:

@import url("base.css"); /* importing external css file */

@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";
Sydney
  • 11,964
  • 19
  • 90
  • 142
0

I'd say you doing it wrong. ADF way to do it is more java-like.
You should create some base skin that will hold all your base css rules. Then you extend this base skin with your colorized versions "lightblue" or whatever.

You can read details in documentation (20.2.3 How to Register a Custom Skin)

Also you can use Oracle ADF Skin Editor to get IDE assistance with custom skin building.
You can grab latest version, just choose right ADF version (11.1.1.7) in skin creating dialog.

Nagh
  • 1,757
  • 1
  • 14
  • 19