• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    Angular Background Image

    Dashboard Designer & Custom AngularJS Pages
    4
    15
    16.7k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      atkins.chrisw
      last edited by

      Jared, When I changed to 3.2, the background image no longer shows up. Do I need to reference it different now?

      <!DOCTYPE html>
      <html lang="en" class="no-js">
      <head>
          <meta charset="utf-8">
          <meta http-equiv="x-ua-compatible" content="ie=edge">
          <title>Vitality - Chrisground</title>
          <meta name="description" content="">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta name="mobile-web-app-capable" content="yes">
          <meta name="apple-mobile-web-app-capable" content="yes">
          <base href="/user-dashboards/chrisground/">
          
          <link rel="icon" type="image/png" sizes="192x192" href="../img/icon192.png">
      <!-- full file path is: root/mango/web/modules/dashboards/web/img/icon192.png  [../ = root/mango/web/modules/dashboards/web/] -->    
          <link rel="icon" type="image/png" sizes="128x128" href="../img/icon128.png">
      <!-- full file path is: root/mango/web/modules/dashboards/web/img/icon128.png  [../ = root/mango/web/modules/dashboards/web/] -->        
          <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
          <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
          <link rel="manifest" href="manifest.json">
      <!-- full file path is: root/mango/overrides/web/modules/dashboards/web/tutorial/manifest.json  [ = root/mango/overrides/web/modules/dashboards/web/tutorial/]-->      
          <link rel="stylesheet" href="/resources/angular-csp.css"></link>
      <!-- full file path is: root/mango/web/resources/angular-csp.css  [/ = root/mango/web/]-->    
          <link rel="stylesheet" href="../vendor/angular-material/angular-material.css">
      <!-- full file path is: root/mango/web/modules/dashboards/web//vendor/angular-material/angular-material.css  [../ = root/mango/web/modules/dashboards/web/] -->
          <link rel="stylesheet" href="../vendor/angular-loading-bar/loading-bar.css">
          <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css">
          <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.css">
          <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css">
          <link rel="stylesheet" href="../vendor/angular-material-data-table/md-data-table.css">
          <link rel="stylesheet" href="styles/main.css">
      </head>
      
      <body layout="column" ng-class="{'api-down': !mangoWatchdog.apiUp, 'logged-out': !mangoWatchdog.loggedIn}">
      	<div ng-if="appLoading" class="app-loading">
      		<i class="fa fa-cog fa-spin"></i>
      	</div>
      
          <div ui-view ng-cloak layout="column" flex class="main-application"></div>
      
          <!-- full file path is  -->
          <script src="/resources/require.js"></script>
      <!-- full file path is: root/mango/web/resources/require.js -->    
          <script src="/resources/loaderConfig.js"></script>
      <!-- full file path is: root/mango/web/resources/loaderConfig.js -->
          <script src="../js/loaderConfig.js"></script>
      <!-- full file path is: root/mango/web/modules/dashboards/web/js/loaderConfig.js -->
      
      
          <!-- Rename adminTemplate to the name of the folder you create in overrides -->
          <script>require(['dashboards/chrisground/app']);</script>
          <style>
          div[role=main] > md-content {
              background-image: url(/modules/dashboards/web/vitalimages/Test3.jpg);
              }
          </style>
      </body>
      </html>
      
      Jared WiltshireJ 1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire @atkins.chrisw
        last edited by

        @atkins.chrisw said in Angular Background Image:

        <base href="/user-dashboards/chrisground/

        Hmm, no what you have should work. When you update the module the module's folder will be deleted, did you put the image in the overrides folder?

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • A
          atkins.chrisw
          last edited by

          Yeah it is in the overrides folder. It in the following:
          root/mango/overrides/web/modules/dashboards/vitalityimages

          1 Reply Last reply Reply Quote 0
          • A
            atkins.chrisw
            last edited by

            sorry. vitalimages

            1 Reply Last reply Reply Quote 0
            • A
              atkins.chrisw
              last edited by

              Any luck? This background is kinda important

              1 Reply Last reply Reply Quote 0
              • Jared WiltshireJ
                Jared Wiltshire
                last edited by

                OK so the HTML layout in main.html changed a little, update your CSS rule to the following

                md-content.main-content {
                  background-image: url(/modules/dashboards/web/vitalimages/Test3.jpg);
                }
                

                Developer at Radix IoT

                S 1 Reply Last reply Reply Quote 0
                • A
                  atkins.chrisw
                  last edited by

                  That worked great!!

                  1 Reply Last reply Reply Quote 0
                  • A
                    atkins.chrisw
                    last edited by

                    Sorry Jared,

                    how would I make the date/pickers have a white color instead of the black?

                    0_1473449497889_upload-0833ee70-4453-4d7d-a8a6-252786dc8088

                    Jared WiltshireJ 1 Reply Last reply Reply Quote 0
                    • Jared WiltshireJ
                      Jared Wiltshire @atkins.chrisw
                      last edited by

                      @atkins.chrisw said in Angular Background Image:

                      Sorry Jared,

                      how would I make the date/pickers have a white color instead of the black?

                      0_1473449497889_upload-0833ee70-4453-4d7d-a8a6-252786dc8088

                      Sorry for the extremely delayed response but you can easily change this by creating a "dark" theme and applying it to the section of the page you want inverted colors on.

                      In app.js copy the theme you are using and add .dark() to it. e.g. for the adminTemplate you will have

                          // configure the angular material colors
                          $mdThemingProvider
                              .theme('default')
                              .primaryPalette('yellow')
                              .accentPalette('red');
                      
                          $mdThemingProvider
                              .theme('dark')
                              .primaryPalette('yellow')
                              .accentPalette('red')
                              .dark();
                      

                      Then use the dark theme on the page where you want -

                      <md-toolbar md-theme="dark">
                      

                      Developer at Radix IoT

                      1 Reply Last reply Reply Quote 0
                      • S
                        shaun @Jared Wiltshire
                        last edited by

                        Hi Guys,

                        I'm having a problem with the following not giving me the expected results... I'm assuming the content in this thread applies to the admin template? I've put in :

                         <style>
                           md-content.main-content {
                             background-image: url(/modules/dashboards/web/images/bg/blue_dots_blur3.jpg);
                           }
                         </style>
                        

                        And I see no change.

                        I've also put in

                           <style>
                             body {
                             background-image: url(/modules/dashboards/web/images/bg/blue_dots_blur3.jpg);
                             }
                           </style>
                        

                        and I see the background image flash up when i hit reload and see the spinning gear, but then the dashboard pops up over the top and its all white.

                        Any suggestions?

                        1 Reply Last reply Reply Quote 0
                        • Jared WiltshireJ
                          Jared Wiltshire
                          last edited by

                          Hey shaun, the best way to figure out what is going on is to use Chrome and open the inspector (right click on page and choose Inspect). Find the element (on the elements tab) you are trying to add a background to and check its styles. You will also be able to see if the .jpg is actually being loaded or is not found (404 error etc) in the console.

                          If you style the body tag you will not see the background as there are other elements "in front" of the body element which have opaque backgrounds. Also if you are targeting md-content.main-content which is the main content pane you may have to add a !important to your CSS rule to override inline styles.

                          Developer at Radix IoT

                          S 1 Reply Last reply Reply Quote 0
                          • S
                            shaun @Jared Wiltshire
                            last edited by

                            Thanks @Jared-Wiltshire! great advice.
                            Its fixed now, but im not sure where I went wrong.. best guess is a typo - perhaps a misplaced closing } or something.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post