ADF Mobile: Grey Background for Default Springboard

TreeStrepek

Use Case:  Users should see a slight contrast between the slide out springboard and the active feature beneath it. 

I am aware of the mobilAlta skin & default css files that ADF Mobile uses.  Additionally, I have created a custom.css & added the additional skin in adfmf_skins.xml (code below).  My research has taught me this functionality is available for most ADF components.  Specifically, I can create custom CSS and assign those CSS styles to ADF Components using the "style=" syntax. 

It remains that I am not able to change the background color of my springboard.   I want the springboard to have a light grey contrast as it slides out only 170 pixels & the active feature screen behind it is white.  So it displays white on white.  The UX is not aesthetically pleasing. 

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

Here's what I've done already

in amx.css I have modified the default springboard CSS

/* ------ <Springboard> ------ */

.adfmf-panelPage-springboard {

  background-color: #c2c7c8;

}

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

/* ------ <Springboard> ------ */

.adfmf-panelPage-springboard {

  background-color: #c2c7c8;

}

inside adfmf_skins.xml I have added a skin.

<skin-addition id="s1">

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

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

</skin-addition>

in my custom.css

.adfmf-springboard {

background-color:#c2c7c8;

}

TreeStrepek

It looks like Oracle took my advice and the MAF springboard offers a little contrast.  Issue solved in MAF.

TreeStrepek

Greetings Oracle Brainiacs: 

Can someone add an opinion about this little change in styling?  It seems like it should be fairly straightforward.  Is there a work-around I can implement? 

jeremy_hull

This is probably because there are children which must also be colored. Use Safari to debug the views and see the element layout to see what else needs to be colored. I have created custom springboards with white background, and I had to provide selectors of higher specificity and use style classes. I would not style using the style attribute, use style classes instead. I don't think you will be able to do this without inspecting the web view.

TreeStrepek

Hi Jeremy: 

Thanks for the insight.  How do I run my mobile app in a web browser?

-Theresa "Tree" Strepek

jeremy_hull

If you have the iOS simulator running with the page that you need to check out open in your ADF mobile application, you can use Safari web inspector just like you do on desktop pages. Well nearly like on desktop pages. If you don't see the "Developer" menu in Safari, turn that on in the preferences. Then you will see the Develop menu, and there should be an item "iPhone Simulator", and when you mouse over that menu's child, when the one you need is highlighted in a light blue (in the iOS SImulator screen) you found the right web view to debug.

Matt has a good write up here

iOS Web Inspector &amp;laquo; Matt Cooper’s Weblog

TreeStrepek

It looks like Oracle took my advice and the MAF springboard offers a little contrast.  Issue solved in MAF.