ADF Skin commandButton background color

HI I use Jdev 11.1.2.3.0 I want to change the color of a commandButton I used:
af|commandButton {color: orange;
                              background-image: none;
                                 background-color:green;
in (http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx)
and followed this tutorial (https://blogs.oracle.com/shay/entry/styling_specific_adf_components_with)
as shown in this picture (http://img820.imageshack.us/img820/7456/avc8.png)
the icon button gets colored but not the actual commandButton obviously is not shown when I run it.
My skin code:
af|commandButton
  background-image: none;
  background-color: Fuchsia;

A: ADF Skin commandButton background color

Yeah, that skin selector will apply to all buttons with those classes. If you need to limit the styling based on EL, I would do something like this
styleClass="#{condition ? 'trueClass' : 'falseClass'}"
and in the skin this should be specific enough
af|commandButton.trueClass {}
If not, you would have to do something like this, but not 100% sure if that dot shouldn't have a space before it or be a colon possibly off the top of my head
af|commandButton:text-only.trueClass

Yeah, that skin selector will apply to all buttons with those classes. If you need to limit the styling based on EL, I would do something like this
styleClass="#{condition ? 'trueClass' : 'falseClass'}"
and in the skin this should be specific enough
af|commandButton.trueClass {}
If not, you would have to do something like this, but not 100% sure if that dot shouldn't have a space before it or be a colon possibly off the top of my head
af|commandButton:text-only.trueClass

Similar Messages

  • ADF Messages and background color

    I'm using the ADF components and I need to know how to change the background color the the af:messages component.
    It's currently tied to the accent background color in the xss file, but I would like to make it something else. Anyone know what style to change in the xss file?
    Thanks.
    - Jeff

    Yeah, that skin selector will apply to all buttons with those classes. If you need to limit the styling based on EL, I would do something like this
    styleClass="#{condition ? 'trueClass' : 'falseClass'}"
    and in the skin this should be specific enough
    af|commandButton.trueClass {}
    If not, you would have to do something like this, but not 100% sure if that dot shouldn't have a space before it or be a colon possibly off the top of my head
    af|commandButton:text-only.trueClass

  • ADF Table row background color change ???

    Hi All
    i got below sql view object
    SELECT DEPARTMENT_ID,JOB_ID,COUNT(*) FROM EMPLOYEES GROUP BY DEPARTMENT_ID,ROLLUP(JOB_ID)
    By using this i will get each department_id, jobid's and total employes count in each department
    and i will get rollup for each departments ie i will get total employees.
    So i want to change the back ground of the total row.
    DepartmentId     JobId     Count1
    SA_REP 1
    1
    10     AD_ASST     1
    10     1 < this row in RED back ground in JSF page
    20     MK_MAN     1
    20     MK_REP     1
    20     2 < this row in RED back ground in JSF page
    30     PU_MAN     1
    30     PU_CLERK     5
    30     6< this row in RED back ground in JSF page
    40     HR_REP     1
    40     1< this row in RED back ground in JSF page
    50     ST_MAN     5
    50     SH_CLERK     20
    50     ST_CLERK     20
    50     45< this row in RED back ground in JSF page
    any kind of help is welcome...
    thanks
    Ravi

    Hi,
    you can do this by setting the background color of the outputText component that is the cell component e.g. in a read only table. Use the inlineStyle property to set the background-color but get the string from a managed bean. For each row you get a call to the managed bean and you can use JSF value binding
    FacesContext.getCurrentInstance().getApplication().createValueBinding()
    to access #{row} so that you can determine the value of a row column. Based on this you return a color
    Frank

  • Is it possible to change the background color when publishing as EXE Full Screen?

    I often publish Captivate projects as EXE - FullScreen. I would l like to set the background color outside of the EXE frame. Is that possible. When running my Captivate published .EXEs at full screen at a resolution greater than the project, a tan color background color appears and I would like to change it to black, or some other color. I tried the Skin - HTML background color, but that had no effect.
    Thanks
    Jack
    Captivate 7 / Windows 7

    Hi,
    it is - use the oItem.BackColor property
    BackColor PropertyDescription
    Returns or sets a value specifying the background color of text or graphics in an item.
    Property type
    Read-write property
    Syntax (Visual Basic)
    Public Property BackColor() As Long
    Remarks
    RGB value in long representation. You can use the standard Visual Basic colors, for example, vbBlue, vbYellow, etc.
    The valid range for a normal RGB color is 0 to 16,777,215 (&HFFFFFF).
    lg David

  • ADF calendar date cell  background color change

    Hi,
    I am new to jdeveloper / ADF.
    I coded per the below calender sample in my jdeveloper and it runs fine.
    http://www.oracle.com/technetwork/developer-tools/jdev/calendar-091799.html
    The current date cell shows in yellow color background. How/where can I change that color.
    Also the small calendar look up for the start/end date-time setting allows the user set the start/end time upto HH/MIN/seconds. How can I remove the seconds
    Thanks for all your help.

    You can create a new skin for your application and use the following selector which we deliver..
    .AFCalendarTodayBackground:alias
    background-color: blue;
    ALternatively, you can use the specific selector
    af|calendar af|calendar::day-of-week:today {
    background-color: blue;
    You can also see other ways of customizing your look and feel of the calendar component by referencing the hosted demo for skinning the calendar component.
    http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/calendar.jspx

  • Skinning af|messages background color based on error type

    Hi,
    I would like to skin background color of af|messages body depending on the message type. For example, if message raised is of type "Warning", I would like the af|messages body's background color to be yellow. If message raised is "Error", then I would like the background to be orange and if the message is of type "Info", then I would like background to be green.
    I wonder if this is possible and if any has any idea on how to achieve this would be highly appreciated.
    Thanks
    Using JDeveloper 10.1.3 and Standalone OC4J 10.1.3.

    Hi samsam,
    You should post ADF questions to the JDeveloper & ADF forum: JDeveloper and ADF
    I guess you get more help there...
    Groeten,
    HJH

  • Change the background color of selected row in adf table

    Hi,
    Can somebody guide me in changing the background color of a row when its being selected. In my ADF table, one of the column is of type Command Link. So whenever i click this command link on any particular row that complete row color should change as an indication of that row being selected.
    Please guide me to do this. I referred to other forum posts, but they couldnt meet my need.
    Thanks
    ri

    Hi Frank,
    you're right. This should work. But the result is not perfect from my point of view.
    I use
    <af:table ...>
      <af:column ...>
        <af:outputText value="#{row.col1}" inlineStyle="#{row.mystyle}"/>
      </af:column>
    </af:table>and I get e.g. this in HTML:
    <table ...>
      <tr>
        <td class="af_column_cell-text OraTableBorder1111"><span style="font-weight:bold;">qqq</span></td>
      </tr>
    </table>while I would prefer to get somethig like this:
    <table ...>
      <tr>
        <td style="font-weight:bold;"><span>qqq</span></td>
      </tr>
    </table>, which looks much smarter. Is it possible?
    Thanks,
    Alexandre.

  • Background -color of a template page through skinning

    Hi All,
    I designed a Template page using webcenter portal application .In that I added some Images .
    Now I want to get good look and feel for that template using skinning .By default in the application we have portal-skin.css.
    So I want to apply background -color to that template page.But the color should be shaded with more than one color.So how can I
    get it through skinning.Could anyone help me on this.
    Thanks
    keerthi

    Hi Jiri,
    Thanks for your quick reply .
    I have seen the link which you gave .But they had mentioned like this to apply for background.
    background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
    But in my skin.css file i have not found this property -webkit-linear-gradient.
    And another syntax is of like this:
    div#content {background: url("./gray.png") repeat-y, white; background-size: 30%;}
    Here there are uploading color as a image .But actually i am not following this way .
    Could we have any other approach for this.
    Thanks
    keerthi.

  • How to set text and background color of current row in a adf table?

    Hi,
    In jdev 11.1.2.3,
    How to set text fond and background color of current row in a adf table?
    I tried to set Background color in table property, but that is not what i want.
    Thanks.

    Hi,
    We almost had the same requirement, but we just needed to color a specific column.
    Here goes the solution to that, you might do the same for your row highlighting
    Changes are required in jsff and one method to be added in backing bean
    1. JSFF :
    <af:column headerText="Amount"
                     id="c4" width="100"
                     inlineStyle="#{backingBeanScope.BackingBean.cellColor}">2. Backing Bean
    //searchResultTableVO is Table's VO
    public String getCellColor() {
          FacesContext ctx = FacesContext.getCurrentInstance();
          ExpressionFactory ef = ctx.getApplication().getExpressionFactory();
          ValueExpression ve = ef.createValueExpression(ctx.getELContext(), "#{row}", FacesCtrlHierNodeBinding.class);
          FacesCtrlHierNodeBinding node = (FacesCtrlHierNodeBinding)ve.getValue(ctx.getELContext());
          Row row = node.getRow();
        if(row.equals(searchResultTableVO.getCurrentRow())){
    //You can add your inline style for font-style too
          return "background-color:Red;";
             return null;
      }Hope this is helpful :)
    Regards,
    Neha..

  • ADF Faces: Background color of components?

    Hi,
    In my application I use panelPage component to get a basic layout. From [1] I know that I can use several facets wo place my components on special places.
    I tried this with the "search" facet as well as the "infoSupplemental". Both have a different background color. When I add selectOneChoice or commandButton components, they have a white background box around them. How can I tell the components to match the background color of "surrounding" component.
    Regards,
    Stephan
    [1] http://download.oracle.com/docs/cd/B25221_04/web.1013/b25386/web_getstarted004.htm#CHDCJCGF

    Well, seems like the CSS parser does not expect inherit as a colorvalue :) Is this a known bug?
    oracle.adfinternal.view.faces.style.PropertyParseException: Invalid color: inherit
         at oracle.adfinternal.view.faces.style.util.CSSUtils.parseColor(CSSUtils.java:196)
         at oracle.adfinternal.view.faces.style.CSSStyle.parseProperty(CSSStyle.java:116)
         at oracle.adfinternal.view.faces.style.BaseStyle.getParsedProperty(BaseStyle.java:163)
         at oracle.adfinternal.view.faces.ui.laf.oracle.desktop.TecateRenderer._parseValue(TecateRenderer.java:535)
    <af:commandButton inlineStyle="background-color:inherit;" text="#{bundle.search_action_save_label}" />

  • Background-color ADF

    Hi , good time
    (Jdev 11.1.1.7)
    i want to set background color for each colomn that has a special condition in adf:table .
    I use a function to return a string and assign it to its style
    inlineStyle="#{testBean.backGroundColor1}">
    testBean is request scope ..
    now
    i dont see any chane ion the page !!!!!!
    when i set background-color  ,,, i see changes . but it is not all that i expect . == >
                      inlineStyle="background-color:Fuchsia;"  this code sets background color of column to Fuchsia but background of inputbox still is white
    How can i set background of an  af:column programmatic?               .

    The inputText field is not the column, if you set the background-color on a column, it will not color it's children. You have to style the components you want styling applied to. If you have a column with an input text, and you want both to be styled, you have to style both. Background-color is not inherited. I reread your second message, and it seems like you should NOT style the column, only the contents of that column.
    I would normally do something like this, using the row to determine the value. Your backing bean probably doesn't know what row is being iterated.
    {sorry for hand-jammed coding errors}
    <af:column>
         <af:inputText inlineStyle="background-color:#{row.attribute.value gt 0? none : red}"/>
    </af:column>

  • Adf skin, table's row hover

    Hi,
    I'm having confussion with adf-skinning.
    Can i put hover effect so everytime user hovering a row of a table it will change the row's background color?
    What class should I use in my css?
    I've tried with af|table::data-row:highlighted, af|table::data-row:hover..
    If there is anyone knows the link where I can dowload an adf-skin template then it also be very helpful to me..
    Best Regards.

    Hi,
    I found this in the forum. Does it work for you?
    Re: Comment on Frank's blog adding hover effect to table
    af|table::content TR:hover { background-color: InfoBackground ; }
    af|table::content TR:hover TD { background-color: transparent ; }
    regards
    Peter

  • Change background color of a selected line of text in textfield

    I have a list of items in a dynamic text field. When a line is clicked I would like to highlight it, or change the background color. Any ideas?

    By default, the generated application uses the oracle skin family. This skin generates the buttons as images with rounded edges so you cannot change the background color. If you change the skin-family to "minimal" in the adf-faces-config.xml, then you can change the background color of the buttons by adding a property like this to the button template:
    inlineStyle="background-color:red;"
    However, a cleaner way to do this, is by creating a custom skin, so you do not have to modify the generator templates at all. See the following link for more info on ADF Faces skinning:
    http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html
    In addition, using the Check for Updates feature in JDeveloper, you can install additional sample skins.
    Steven Davelaar,
    JHeadstart Team.

  • ADF Skinning - How to identify Skinning Selector Name

    When we do skinning, in the CSS file that is generated by ADF Framework, we are seeing a style named
    af_commandMenuItem_menu-itemIn order to define, custom properties to this above style, we would need to modify in the custom skinning file as
    af|commandMenuItem::menu-item {
    background-color: #17375E;
    }I would like to know, how the skinning selector in CSS file generated by ADF Framework - can be converted into the actual style name that is to be specified in the Custom Skin CSS file.
    In above, how can we get
    af|commandMenuItem::menu-itemfrom
    af_commandMenuItem_menu-itemIs there any general guideline for this?
    Thanks in advance,
    Navaneeth

    :: is a pseudo class and defines an area within a component e.g. af|inputText::content
    : is a pseudo element and describes a behavior. e.g. af|inputText:hover (this is the default CSS syntax)
    Frank

  • Calendar Activity instance using calendar cell background color

    Hi ,
    We have a requirement to show activity instance belong to a certain provider in calendar using the calendar cell background color, instead of the color of activity. Is this possible? If so, how to implement it?
    I checked the calendar skin keys here:
    http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/calendar.jspx
    but only find some keys related to activity like "af|calendar::month-time-activity", "af|calendar::all-day-activity" and "af|calendar::month-time-activity". These highlight the activity with color, but not the whole calendar cell.
    I saw there is a skin key called "af|calendar::month-grid-cell" which set the background color of the calendar cells for the month. This is similar to what I am looking for, but I would like the cell's background color for the cells of the activity instance only, not all the cells in the month.
    Any ideas?
    Thanks
    -Mina

    Hi Mina,
    There is a way to highlight cells corresponding to activity by using skinning, but you have to set the backgroud color property: af|calendar::month-time-activity{ background-color: Blue; }
    Georgiana :)

Maybe you are looking for