Background Page Colour on WebHelp Mobile Output

[peterbrown05]

Hi,
Our help is lo-lite - ie black background with white / light grey text. Ive tweaked the skin and all looks fine; except around the main intro page where the bottom section is solid white.

My css already has:

Code: Select all

@media mobile
{
   body
   {
      background-color: #000000;
   }
}

and I am correctly using this medium in the webhelp mobile target. The rest of my pages look ok (ie default black background). I cant find anything for this in the mobile skin... anyone any ideas?

Ive attached an image to better explain too; (the black question mark shows the area I want to be black rather than white...)


thanks for any suggestions in advance,
cheers
peteB

[lacastle]

Is it the navigation background color, which is set in the Skin editor?
(I don't use mobile output, so i'm just guessing)

[peterbrown05]

i'm pretty sure I have set all BGColors to #000000 and also pretty sure there isnt an image overriding it...
the skin for mobile is slightly different to skin for non-mobile; but the Navigation Element I have set up is set to BacggroundColour=black.

I did find that I had to override the body background colour in the css as per my above post. So i'm wondering if there is another css element that I need to override for "home page"...

[jgoldstein]

Other than setting the background color in the body tag, is there something else that influences the background color in topics? I've created a mobile medium for my stylesheet and then set the background to a color that's different from my regular WebHelp output.

If I change the background color of the body tag in my non-print medium, I get the results that I expect. When I change the same tag in my mobile medium, the color shows up as a border around the edges of the topic and the rest of the topic has the color from my non-print medium.

This problem shows up in the topics only, the background colors on the navigation pages and glossary are correct.

There are no background images on the topics.

thanks,

joan

[patrickb]

You'll need to edit the Header.css file and add

Code: Select all

 background-color: #000000;

to the body.
Example:

Code: Select all

body
{
	font-family: Arial;
	margin: 0;
	padding: 0;
	background-color: #000000;
}

Unfortunately, it gets overwritten every time you build, so you'll need to edit it before you publish.

At least, this worked when I tested it. (BTW, I'm using Flare 6 because of issues publishing my web/mobile help using Flare 7.)

HTH.
Patrick

[JasonSTI]

You can also apply this on the HTML attribute, instead of the BODY attribute, which may fill in any borders that the BODY leaves. We had to do this for our background image, as it was not filling down correctly when viewing a short page.