Mobile device layout top bar color

[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?

[Scott Klement]

You have to include the CSS file in the "external css" property of the record format for it to work in mobile.

[pjshuey]

Well that was easy! Thanks!

[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.

[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?

[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.

[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.