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.
Angular Background Image
-
Is there a way to add a background image to the whole angular dashboard as a main background. That way it isn't just a white background?
-
What you are looking for is the CSS background-image property - https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
If you are using the admin template the rule to target the main content pane will look something like this
<style> div[role=main] > md-content { background-image: url(/modules/dashboards/web/img/logo.svg); } </style>Otherwise just target the body element.
-
Chris;
Angular JS
Changing the background color of just the main pages (not the header or menu).
In MS paint open (/modules/dashboards/web/img/logo.svg) and change it to the color you want the back ground and save as “newname.png”
In the index.html about line 41 where it says
<script>require(['dashboards/adminTemplate/app']);</script>
“put in new line “
<style>
div[role=main] > md-content {
background-image: url(/modules/dashboards/web/img/newname.png);
}
</style> “ -
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> -
@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?
-
Yeah it is in the overrides folder. It in the following:
root/mango/overrides/web/modules/dashboards/vitalityimages -
sorry. vitalimages
-
Any luck? This background is kinda important
-
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); } -
That worked great!!
-
Sorry Jared,
how would I make the date/pickers have a white color instead of the black?
-
@atkins.chrisw said in Angular Background Image:
Sorry Jared,
how would I make the date/pickers have a white color instead of the black?
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"> -
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?
-
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-contentwhich is the main content pane you may have to add a!importantto your CSS rule to override inline styles. -
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.
