Page 1 of 1
Mobile device layout top bar color
Posted: Thu Dec 15, 2016 12:26 pm
by pjshuey
I am using a mobile device layout and would like to change the color of the top bar. I changed the color in the css and the change takes affect when I launch it via a browser session. If I launch it via the Profound Mobile Client, it remains the original blue color. Is there a way to change this?
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 12:29 pm
by Scott Klement
You have to include the CSS file in the "external css" property of the record format for it to work in mobile.
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 12:40 pm
by pjshuey
Well that was easy! Thanks!
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 2:23 pm
by pjshuey
I spoke too soon.....
I added the css to the external css property on the record format. Everything still looks correct in the designer, but not when launched via the mobile client.
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 4:23 pm
by Scott Klement
Then you will need to provide enough information for me to try it myself... What did you specify in your CSS file? Where is your CSS file placed in the IFS? What did you put for the external css property?
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 4:39 pm
by pjshuey
I created a new folder in the ifs for the mobile version of the css. It is in the custom folder. I have attached the json of my rich display file and a copy of the css.
Re: Mobile device layout top bar color
Posted: Thu Dec 15, 2016 5:04 pm
by Scott Klement
I think the problem is that you have stuff like this in your CSS:
Code: Select all
background-image: url('/profoundui/userdata/images/topbarnewergreen.png');
These url() options aren't going to work because when you don't specify the server name (as is the case here) it will assume that the file is found on the mobile device itself. So it is looking for a directory named profoundui/userdata/images on the mobile device.
if you change it to be fully qualified, it'll work. For example:
Code: Select all
background-image: url('http://myhost:1234/profoundui/userdata/images/topbarnewergreen.png');
naturally that's not ideal because once you hard code the server name into the CSS file, you won't be able to run the app on other servers. The workaround, then, would be to specify the background-image url in JavaScript and use the pui.normalizeURL() routine to make it work properly.