CSS in ADF

Scenario is,

I want to change my page of component Styles. I tried to change the color of the command button, but it still shows the default color (gray)

I set the background image of the None button but always showing by default color

CSS.bmp

I want to lower results

CSSWant.bmp

J Dev Version: 11.1.2.0.0

You can apply the skin by application of the ADF and add in the css file

af|commandButton.myButtonClass
{
  background-image: none;
  background-color: Orange;
}

and in command button styleClass assign "myButtonClass".

To find out how to apply the skin by application of the adf:

Sameh Nassar: Use the skin in your Application

Tags: Java

Similar Questions

  • CSS file for counting in ADF return «Unknown pseudo-class» errors

    Hi all
    I'm relatively new to ADF and I am working to try to the skin of my request.
    So far, I did the following steps:
    Creates a CSS file inside my Web content folder:
    Skins/Custom/Custom.CSS
    with the following code
    * af | menu: bar-point-text {*}
    color: white;
    *)*
    and I did a Trinity - skins.xml and the Trinity - config.xml in my WEB - INF
    file and added the following code in each respectively:

    * <? XML version = "1.0" encoding = "ISO-8859-1? > *.
    * < skins xmlns = "http://myfaces.apache.org/trinidad/skin" > *.
    * < skin > *.
    * < id > customSkin.desktop < /ID >. *
    * < family > CustomSkin < / family > *.
    * < extends > fusion.desktop < / extends > *.
    * < render-kit-id > org.apache.myfaces.trinidad.desktop < / render-kit-id > *.
    * < style-sheet-name > skins/custom/CustomSkin.css < / style-sheet-name > *.
    * < / skin > *.
    * < / skins > *.

    * <? XML version = "1.0" encoding = "UTF-8"? > *.
    * < trinidad-config xmlns = "http://myfaces.apache.org/trinidad/config" > *.
    * < skin-family > CustomSkin < / skin-family > *.
    * < / Trinity-config > *.

    However when I enter information in my CSS file 'AutoComplete' text only comes up with a few items and when I get the strings to my compnants he said that they are not recognized. In addition is does not load this CSS.

    Thanks in advance for any help you might be able to give.

    See you soon,.
    Fudz

    Published by: user8887767 on January 8, 2010 12:05

    First of all, make sure that the following check box is checked:
    Tools-> preferences-> CSS Editor-> ADF Faces Extension

    I noticed a few places where auto-complete contains all of the options, or I use a valid pseudo-class and indicated as invalid in the CSS Editor. Does not have a negative effect on the result however.

  • ADF Mobile: Gray background for default springboard

    Use case: users should see a slight contrast between the sliding platform and active functionality located below.

    I am aware of the skin mobilAlta & default css files ADF Mobile uses.  In addition, I created a custom.css & added the extra skin in adfmf_skins.xml (code below).  My research told me that this feature is available for most of the components of the ADF.  Specifically, I can create some custom CSS and assign CSS styles using components of the ADF 'style =' syntax. 


    It remains that I am not able to change the background color of my springboard.   I want the springboard to have light gray contrast as he slips that 170 pixels & screen feature active behind it is white.  Appears white on white.  The UX is not aesthetic.

    Can someone tell me a solution please?  I must be missing something simple.

    Here's what I've done

    in AMX. CSS I changed the springboard by default CSS

    / * - < platform >-* /.

    {.adfmf-panelPage-springboard

    background-color: #c2c7c8;

    }

    in amx-mobileAlta - 1.1.css , I modified the springboard by default CSS

    / * - < platform >-* /.

    {.adfmf-panelPage-springboard

    background-color: #c2c7c8;

    }

    inside the adfmf_skins.xml , I added a skin.

    < skin-added id = "s1" >

    <>skin-id myAST-Mobile < / skin-id >

    < name-sheet-style >custom.css < / name of style sheet >

    < / skin-add >

    in my custom.css

    {.adfmf-springboard

    background-color: #c2c7c8;

    }

    It seems that Oracle has taken my advice and the MAF springboard offers a bit of contrast.  Problem solved at the CRG.

  • PanelGroupLayout HTML Div or ADF

    Hello
    To improve performance by reducing the components UI ADF jspx, I have a few questions.
    -Can I use div instead of panelGroupLayout tag?
    -If I have the opportunity to use the div instead panelGroupLayout to some places is it advisable to use the HTML div tag?
    -What is the most quick HTML div or adf panelGroupLayout components?

    Thank you.

    Published by: Vijay Pingale on February 27, 2012 10:05

    To improve the ADF performance trying to introduce mechanisms for setting cache or compression for static JavaScript and CSS because ADF loads a lot of JavaScript.

    Follow this entries in order to obtain better performance:

    http://technology.AMIS.nl/Blog/4329/ADF-11g-reducing-the-price-of-richness-or-how-to-streamline-downloading-JavaScript-resources-for-ADF-11g-rich-client-components
    http://George.maggessy.com/2011/06/improving-WebCenter-performance.html
    http://docs.Oracle.com/CD/E21764_01/core.1111/e10108/WebCenter.htm
    http://docs.Oracle.com/CD/E15523_01/Web.1111/b31973/ap_config.htm (adf-config caching rules).

    In addition, allow cache/compress OHS implementation resources.

    If after this steps your performance is slow try to put a server 'light '.

    Kind regards.

    PD: I do not mix HTML and tags of the ADF.

    Published by: Daniel Merchán on February 27, 2012 20:11

  • Load CSS dynamically in the ADF application

    Hello

    How to load css dynamically by application of the adf?

    Version of the ADF - 11.1.1.6.0

    Thank you

    ASIS

    Hello

    Please take a look at the URL below:

    http://www.Oracle.com/technetwork/developer-tools/jdev/index-092146.html [Configuration of an Application may use a custom appearance].

    1. you can have a range session variable watch the skin name:

    #{sessionScope.skinFamily}

    2 and set the value of the name of skin on the #{sessionScope.skinFamily} before the loading of the page.

    Please follow the steps above and the skinFamily name of the value to the variable expression sessionScope #{sessionScope.skinFamily}.

    In this way, we can dynamically change the skinfamily when running the application.

    Only a concern in this approach, is that before each page is loaded, we need to define the name of skinFamily.

    Thank you

    Amey

  • Mix ADF Faces with HTML, JavaScript, CSS, JSTL question

    Dear all,

    The project is now starting to deploy to the production server. When we try to deploy to the production server who made a lot of mistake. As this used widely used project mix ADF faces with
    HTML/JavaScript/CSS/JSTL. I would like to know what are the most error when we have mixed to use each one and how can we overcome them there?
    There is in the project

    1 mix of tags html with ADF Faces components
    2. the use of JavaScript/CSS inline
    3. mix the JSF/ADF Faces and JSTL tags

    Help me how to address this issues as well as links to useful blog.

    JDeveloper IDE version: 11.1.1.5.0 with Webcenter
    WebLogic version: 10.3



    Best regards
    KT

    Published by: KT on May 16, 2013 21:23

    Hello

    In addition to this project widely used mixture ADF faces with HTML, JavaScript, CSS, JSTL.

    JavaScript, CSS, and JSTL is not a problem, whereas - according to the JSF version - HTML is. JSF 2 is the first version of the JSF, which allows you to mix HTML with less side effects, if you use Facelets as view declaration language.

    I would like to know what are the most error when we have mixed to use each one and how can we overcome them there?

    There is in the project

    + 1. mixture of html with ADF Faces components tags +.

    This could ruin your pages, lead to update issues and - in case of frequent use in the trees - even destroy the functionality

    + 2. online use of JavaScript / CSS +.

    Poor performance because of heavy weight pages. If you were using ADF Faces and your JS addresses the DOM instead of the architecture of client cJavaScript ADF Faces then chances are JS will fail for the components that have changed their HTML output (which has an impact on the DOM structure) or changes are not submitted to the server.

    For CSS, CSS inlineStyle not applay to the DOM element that is external, which means for example af:input the background text color will color the lavel

    + 3. mix JSTL and JSF/ADF Faces tags +.

    Dependa on how you do. JSF has postponed EL syntax, which means that EL resolves at run time, whereas JSTL resolves at compile time. So the race conditions could become a problem

    Overall, it is difficult to say if things were coded wrong in the project (although for the use of HTML you can be sure) without seeing the code. It seems that the team that built the application however did not dare to the suite of recommended practices

    Frank

  • Counting: can we do "@import url('skin/base.css');" in the ADF?

    Hi all

    I am using counting in the ADF and it works very well but we want to organize custom skin file by extracting common style classes / global switch in a folder that could act as a base css file...
    (There are a few commercial reasons and also several separated css and all project not be in battery tech ADF...)

    I use a url('skin/base.css') @import; in my css and hope that she will do all the class world alias/style available in my file imported css...
    If my request is:

    1 does url @import ("path / < name of the css file > '") works in the ADF? [That I couldn't make it work... :(]
    2. If so, how can I access styleclass defined in the imported class?

    Thanks in advance...

    Not yet, although I have seen this issue on the list of MyFaces so he could come in the future. In the meantime, you can use the feature to add skin to fragment your files or expansion even as the case of the exact use of the skin. Please see http://myfaces.apache.org/trinidad/devguide/skinning.html for the skinning documentation explaining how to use skin-addition.

    Kind regards

    ~ Simon

  • CSS in the matter of the ADF

    JDeveloper 11.1.1.2.0

    Hello, I would like to open a thread about questions about the CSS/Styles/Skinning questions I could be missing when dealing with ADF app.

    I started an application where I outweigh the skins used by merge and apply the same styles in my own skin that extends blafplus. I managed to do this (images of panelboxes example, to the top-left, right and Center).

    But I've noticed that when I moved my css code and images to another machine, some pads are off especially on the right side of the panelBoxes. I wonder if I am missing something or a configuration that I specifically need to double check.

    A notable difference is that my laptop is Windows 7 and my Office I moved my skin is windows xp, in addition, jdeveloper versions are the same.

    Another difference noticeable, is that, by default, my office uses UTF - 8 as its encoding of the xml data, such as those used by config of trinidad and appearances, my laptop uses windows-1252 (both units use the same version of JDeveloper).

    And one last thing, which is I think outside the scope of this thread, I the difference with what my efforts on a standalone and integrated server count. thread (Unlike CSS in integrated Weblogic and development server

    Hope someone can help me with this problem or maybe if someone can direct me where I can look for answers.

    Thank you!

    In IE8, go to tools-> compatibility view settings and make sure you have nothing that will force IE to view your page in compatibility view...

  • Problem in the ADF Css cannot apply styleClass to Commandbutton

    I want to add CSS to my request, I've done a few classes to add to the buttons, but it did not work.
    I've done two classes like
    .button_normal_blue {
     width: 120px;
     height: 30px;
     font-size: 14px;
     font-weight: bold;
     color: #fff;
     background: url(../img/button_blue.png) no-repeat;
     border: 0;
}

.button_normal_red {
     width: 120px;
     height: 30px;
     font-size: 14px;
     font-weight: bold;
     color: #fff;
     background: url(../img/button_red.png) no-repeat;
     border: 0;
}
    And when I want to apply this style to my CommandButton control it is replaced by the style by default ADF
    Like this
    <af:commandButton actionListener="#{bindings.CreateInsert.execute}"
                          text="CreateInsert"
                          disabled="#{!bindings.CreateInsert.enabled}"
                          id="cb4" partialTriggers="t1"
                          styleClass="button_normal_red"/>
    only the size of the button is changed
    and when I use Firebug to see the CSS, I find that my class is overridden by the default class of the ADF and the generated Css Firebug
    .x7j.p_AFTextOnly, .x7k.p_AFTextOnly {
background-color:#FDDDFA;
background-image:url("/ViewController-context-root/afr/button_bg_n.png");
background-position:center bottom;
background-repeat:repeat-x;
padding:1px 8px 8px;
text-decoration:none;
white-space:nowrap;
}
                                                                                   myskin...cmp.css (line 292)
.button_normal_red, .x1gn {
background:url("/ViewController-context-root/img/button_red.png") no-repeat scroll 0 0 transparent;
border:0 none;
font-size:9px;
font-weight:bold;
height:30px;
width:120px;
}
    You'll notice that these two classes *. x7j.p_AFTextOnly. x7k.p_AFTextOnly* replace my class * .button_normal_red
    I want to know how to apply StyleClass to commandButton

    Hello

    Use the count with the following switches:

    af|commandButton.button_normal_blue,
af|commandButton:text-only.button_normal_blue {
     width: 120px;
     height: 30px;
     font-size: 14px;
     font-weight: bold;
     color: #fff;
     background: url(../img/button_blue.png) no-repeat;
     border: 0;
}

    Kind regards

    ~ Simon

  • Skins CSS / attractive application / with JDev/ADF/JSF?

    Hello

    I have no experience with CSS or make components look rich and attractive.

    1 is it possible with ease with JDev or any feature ADF/JSF?

    2. If I double click on an item in the window Structure of JDev and go to the tab advanced, I have the possibility of manufacturing components colored/bold/padding etc.. But I have several jspx with several components in them. I can do this in one place where I can criteria (Word to say for a button - "BOLD", color etc) and it will apply to all (buttons) in my application.

    As always, your answers are greatly appreciated.

    Thank you

    Create an xml file called trinidad - skins.xml under the WEB - INF view-controller and place this code.

    


lspskin.desktop
myadfskin
blafplus-rich.desktop
/mystyle.css

    Trinidad-config.xml file, add the 3rd threshold.

    

myadfskin

    create a css file called 'myStyle. CSS"and the use of the styles mentioned on the site of count.

  • ADF: Application CSS style Af:Tree root nodes

    Hey everybody,

    I am building a tree hierarchy in 12.1.3 for our navigation menu, for the purpose of loading dynamically link names, responsibilities and the URLs of a database table. The tree itself works fine, but I was hoping style it such that I could get the root nodes to watch, if it does not behave like a panelaccordion component. The problem is that I can't find a property in JDev which applies to any kind of style just for links (HR, Support, Admin, etc.) top-level menu that I could then, go to a style sheet and target these nodes separately. All links only seems to have a generic span tag.

    Anyone knows a way to do this, targeting only the top-level nodes in CSS, using the skin editor or another property of af: tree? Thank you for your time!

    You can use a bean class to determine the p if the node if a node root (getParent() == null) and sign the style of the bean.

    Use the property class of the tree style and that it points to a bean method that returns a string that represents the style for the node class.

    Timo

  • Can I import a normal recount ADF or model css file

    I'm new to stripping in Jdeveloper, ADF, and Webcenter, problems with templates, I'll love you build or design my model of how I want, but cannot do so. How do I get there? What is the limitation that Oracle ADF, Webcenter.

    I need help.

    Hello.

    I think this PPT will be useful for you to understand how to create templates with ADF for WebCentet portal and WebCenter spaces. Here, you will learn how build Flowing and extending templates using the ADF layout components.

    http://www.Oracle.com/technetwork/middleware/WebCenter/Portal/learnmore/pagetemplates-1438595.PDF

    In the case of Skinning, I think that following links should suffice:

    Creating and managing Skins - 11g Release 1 (11.1.1.6.0)

    Working with skins - 11 g Release 1 (11.1.1.6.0)

    https://blogs.Oracle.com/jdevotnharvest/entry/how_to_learn_adf_skinning

    WebCenter Blog: Create custom skin WebCenter Portal

    En of Oracle ADF y WebCenter Español: Custom Skin ADF: los Arts Modificacion y traduccion literales (my Blog in Spanish)

    In addition, take a look at ADF Skin Editor IDE. You can create Skins for ADF / WebCenter Applications and create JAR ADF libraries for direct use in your applications.

    I hope this help you.

    Kind regards.

  • ADF auto in css

    Hi experts,

    -jdev 11.1.1.5.0

    use automatic I don't default color

    I need this background - color:rgb (220,230,240); in the separator
     jspx code
 <af:separator id="s6" inlineStyle="width:100%;">
                      </af:separator>
    How to write css for this. and how to call it.

    or you can use inlineStyle for the component.

    *
    inlineStyle = "background - color:rgb (220,230,240);" Color:RGB (220,230,240); height: 5px; » />

    Thank you
    Nini

  • CSS in the ADF faces

    Hi guys,.

    I'm trying to create a css stylesheet that transform text lowercase uppercase. I need to insert this style in inputText all.

    I do it:
    af|inputText::content{
    
  text-transform: uppercase; 
  color: Fuchsia; 
}
    But it does not.

    Someone has an idea?


    Kind regards

    Renan


    I use JDeveloper 11.1.2.0.0 (version 2)

    Published by: Renan Barbalho on 14/07/2011 12:31

    Looks like the configuration required for the counting is NOT done correctly.

    Here is a sample application based on your requirement:
    http://adfsampleapplications.googlecode.com/svn/trunk/PS2SkinningSampleApplication.zip

    This would help to make the requirements in your project.

    Thank you
    Nini

  • keep the class added after update css

    I have a page jsff based calls to action events a bean and this bean adds a css class to a button. When I press the button refresh, which disappears from the css class, I added the button (the entire page that remains the same). How can I keep the css class after a refresh of browser?

    ADF 11 g

    Rather than apply the css directly on the component, bind the style of the element attribute to an attribute of bean. According to your belongings, you change the attribute of bean. The component reads the css of the bean attribute all the time and gets no matter what the style is defined in the bean.

    Timo

Maybe you are looking for