locked
HTML client dark theme loading RRS feed

  • Question

  • If you use the dark theme, the header area shows white for a few seconds until the page is fully loaded. I was unable to find where to alter this in order to have the background dark while the screen loads. Anyone know how to do this?  Thanks.
    Monday, December 22, 2014 9:59 PM

Answers

  • This fixed the problem.  Thanks Michael!

    <!--set style of body to avoid white rectangle-->
    <body style="background: #333333;">
        <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
            <div class="msls-app-loading-img"></div>
            <span class="ui-icon ui-icon-loading"></span>
            <div class="ui-bottom-load">
                <div>My App</div>
            </div>
        </div>
    With all of the css files in the html client I would not have thought to try a simple in-line style but this completely resolves the issue!

    • Marked as answer by Hessc Saturday, December 27, 2014 5:37 PM
    Saturday, December 27, 2014 5:36 PM

All replies

  • Hi Hessc,

    I have the same problem, I think you must ask jan van der haegen, he made an Html LS app in dark theme and doesn't have this issue.

    If you have the solution, please share it with us.

    Anas,

    Tuesday, December 23, 2014 2:04 AM
  • Hi,
     
    You can change the theme easily in the default.htm file.
    Change light-theme.css and msls-light.css to dark-theme.css and msls-dark.css respectively to use the dark theme.  Alternatively, you may replace light-theme.css with a custom jQuery Mobile theme.
     
    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />
    change above code to below:
     
    <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-dark.css" />


     Best Regards,

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.




    Wednesday, December 24, 2014 3:32 AM
  • Hi Qimin,

    He's referring to this white rectangle on the dark theme.

    Wednesday, December 24, 2014 8:10 PM
  • http://ptgmedia.pearsoncmg.com/images/art_delsole12_html-cl_2/elementLinks/delsole12_fig04.jpg

    This works for everyone.

    The white rectangle appears when the app is launched. It's not the answer to his question

    Friday, December 26, 2014 5:59 PM
  • Hi Hessc,

    I have the same problem, I think you must ask jan van der haegen, he made an Html LS app in dark theme and doesn't have this issue.

    If you have the solution, please share it with us.

    Anas,

    I wrote an article that covers his app:

    App-Stitch Demo Secrets - Exposed!


    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Friday, December 26, 2014 8:16 PM
  • This fixed the problem.  Thanks Michael!

    <!--set style of body to avoid white rectangle-->
    <body style="background: #333333;">
        <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
            <div class="msls-app-loading-img"></div>
            <span class="ui-icon ui-icon-loading"></span>
            <div class="ui-bottom-load">
                <div>My App</div>
            </div>
        </div>
    With all of the css files in the html client I would not have thought to try a simple in-line style but this completely resolves the issue!

    • Marked as answer by Hessc Saturday, December 27, 2014 5:37 PM
    Saturday, December 27, 2014 5:36 PM