Background color

Mohamed_S_1 · ‎04-20-2015

Hello all,

I don't understand how the background system works on Intel XDK; I've changed the background to white,
it is black on the Live Preview and gray in Emulate!

Here's how I changed my background color to white. Please take a look to the image below to see if I did it wrong:

Here's how it appears on Emulate:

And here's how it appears on the Live Preview:

How do I change it?

Thank you in advance!

Chris_P_Intel · ‎04-20-2015

You are setting the background color on the BODY, correct?

In App Framework (and some of the other UI frameworks) the BODY is in the background and the page is in the foreground. So what you are seeing is the pages background color.

And, in the case of App Framework, you have the theme set to default, which means it uses a native-looking variant based on the device. Thus, in App Designer, where there is no default, it uses the App Framework Theme. In the Emulator, you have an iPhone or other Apple device chosen, so you see an iOS-ish theme. And finally, on your device, it is using the Android theme.

Mohamed_S_1 · ‎04-21-2015

OK I changed theme to Windows phone 8 - Light; now it is white on the Emulator but it is still black on my Sony Z3 device.
I also tried App Framework, Device Native, etc.. It didn't work
I'm facing this problem in all projects.

Can you please tell me how do I change my app's background to another color?

Thank you CHRIS P. for the help.

Chris_P_Intel · ‎04-21-2015

What version of the XDK are you using? In the current build (1912), changing the theme should be all that is required.

But in older versions of the XDK, you also need to manually set the useOSThemes flag to false. ( https://software.intel.com/en-us/html5/articles/customizing-app-framework-ui-skin ). This should do it.

<script>
$(document).ready(function(){ $.ui.useOSThemes = false; });
</script>

Lutze · ‎12-07-2015

I can't seem to set a background color whatever solution I try. The color will change in design mode, but when emulated the background is always white. I've tried using the in-app-designer for app framework 3 and in-line css styling, or styling all of the div tags. I first thought it was problems with my XDK on Ubuntu so I installed it on my Asus running win10, but I got the same result. Anyone that can shine any light on this? Thanks!

<style type="text/css">
            div { 
              background-color: red;
            }
        </style>

And below is the code generated from a blank App framework 3.

$.afui.useOSThemes=false;
             $(document).ready(function(){
                setTimeout(function(){
                    $.afui.launch();
                },1500);
            });
        </script>
    </head>

    <body class="af v2" id="afui">

        <div class="upage vertical-col left view" id="mainpage" data-header="none" data-footer="none">
            <div class="pages">
                <div class="upage-content vertical-col left panel ac0" id="uib_page_1"></div>
            </div>
        </div>
    </body>

</html>

PaulF_IntelCorp · ‎12-07-2015

Your results may be a function of the target device. What happens if you build with Crosswalk (or use the Debug tab to test)? Don't use App Preview, because it will run in the native Android webview, which is inconsistent and unreliable.

Lutze · ‎12-08-2015

I removed xdk and rebuild it with the latest version and that solved it for me. As Paul said, building it with Crosswalk worked too. On Win10 the less files were corrupted for some unexplained reason and I'll leave it at that. It works that's all I need.