Can't get rid of background image of toolbar buttons

Question

I am just a front-end developer and responsible for the front-end look of an ADF application that we are creating: We are using jDeveloper 11.1.1.4.0 (and we cannot upgrade due to being told no...so I cannot USE the skin editor which when I tried to use, migrates the files).
I have created the necessary directories and files per tutorials I have been reading up on...
skins directory - (new directory)
skin.css (new file)
Web-Inf -
trinidad-skins.xml (new file and correctly configured)
trinidad-config.xml (existing file but updated to use the new skin)
Within the trinidad-skins.xml file I have the the new skin specified and is extending the "fusionFx-v1.desktop" default theme being used.
Now the problem... I cannot get the background images to be overwritten or disabled for af|toolbar::item within the .css file
I have looked up information about how to overwrite this and I tried to use the
-tr-inhibit: background-image; within the .css declaration like this
<code>
af|toolbar::item {
-tr-inhibit: background-image;
</code>
That was unsuccessful. I even just tried standard background {none;} and that was a no go as wel.
What am I doing wrong here? This is driving me nuts... they made this skinning stuff way too complicated IMO. I don't see why I can't just add a class to the component within the property inspector of that component and then be able to reference it via normal css conventions... but nope BREAKS grrr... And I'm advanced level CSS coder! This stuff has me absolutely clueless and ready to just quit!
Any suggestions or help is appreciated! And again... I cannot use the skin editor! Everytime I tried to, it prompted me to migrate the application and I cannot do this since there are about 5 other developers working on this application (we use clearcase for version control).
Thanks,
Michael

Answer 1

I can't use the stand alone skin editor since it will want me to migrate the project files (developed in 11.1.1.4) and all files are source controlled via ClearCase.
I have been experimenting...This is the code on the .jspx page
<code>
<af:panelGroupLayout id="header" styleClass="headerParent">
<af:panelGroupLayout id="topLinkBar" layout="horizontal" styleClass="topLinkBar AFStretchWidth">
<af:outputLabel value="#{customeradminportalviewcontrollerBundle.CUSTOMER_ACCOUNT}" styleClass="customerLabel"/>
<af:outputText value="outputText2012" styleClass="customerOutput"/>
<af:toolbox id="topLinkToolBox" styleClass="topLinkToolBox">
<af:toolbar id="topLinkToolBar" styleClass="topLinkToolBar">
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.HELP}" id="ctb2"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.POWER_INVOICE}" id="ctb1"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.CONTRACT}" id="ctb3"/>
<af:commandToolbarButton text="#{customeradminportalviewcontrollerBundle.SIGNOUT}" id="ctb4"/>
</af:toolbar>
</af:toolbox>
</af:panelGroupLayout>
</af:panelGroupLayout>
</code>
Here is the CSS code
<code>
#topLinkToolBar af|commandToolbarButton {
background-image: none;
background-color: transparent;
border: 0;
</code>
That WILL NOT get rid of the background images on the buttons! However if I do the !important hack within the CSS like this:
<code>
#topLinkToolBar af|commandToolbarButton {
background-image: none!important;
background-color: transparent!important;
border: 0!important;
</code>
Then BOOM it works... I do NOT want to use the !important hack since that will cause problems in CSS inheritance and cascading...
What am I doing wrong?
Also how do I (if possible) target a specific ID used? For example the af:toolbar has an ID of "topLinkToolBar" how can I target that within the CSS? I know I can target it via class attribute like this:
<code>
af:toolbar.topLinkToolBar
</code>
but how would I do the same if I wanted to only apply to a component with a particular ID?
Thank you everyone for all your patience, suggestions and help with this... I'm totally new to this type of environment and it's been a slow and frustrating learning experience!
Michael