0

I am trying to make a web page with one background color. example: 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom"
    style="background-color:rgb(0,85,165)" disableTheme="true">
</xp:view>

The result is a page with on top the oneui v2 color going from light blue to white and thereafter the color specified as background color. How can I get the result I want ? By the way , why is their an option for a background color for an xpage , when it doesn't apply that color?

edit : In chrome I found this : servername/xsp/.ibmxspres/.mini/css/@Da&@Ib&2Tdcore.css&2TdcoreLTR.css&2TddefaultTheme.css&2TddefaultThemeLTR.css&2Tdxsp.css&2TdxspLTR.css&2TdxspSF.css.css

body { color: rgb(34, 34, 34);

background-image: url(/domjava/xsp/theme/oneui/images/background.png); }

When I unmark this background image everything displays as it should. Still I don't know how to get this to work.

By the way the rest of my "webpage" is in a panel with a white background in which I use oneui. The idea was to get a blue border around the webpage. The page has a fixed size. The rest of your screen just colors blue.(the amount of blue will depend on the screenresolution ) Maybe there is a better way of dooing this ?

Marc Jonkers
  • 496
  • 1
  • 7
  • 17

2 Answers2

2

OneUI layout consists of many parts, and each one defines its own formatting in rather complex set of CSSs. So you have to identify right set of selectors and your own CSS to define background color for each of those elements. First step should be to use dev tools in Chrome/IE or Firebug in Firefox to identify components that did not format correctly.

Frantisek Kossuth
  • 3,524
  • 2
  • 23
  • 42
  • In chrome I see that a background image is applied : background-image: url(/domjava/xsp/theme/oneui/images/background.png); When I unmark this , the page is as it should. I tried in different ways to get this done in css but I can't get it to work. – Marc Jonkers Nov 26 '12 at 10:25
  • 1
    match the selector and redefine background image. http://stackoverflow.com/questions/1461077/how-do-i-remove-background-image-in-css – Frantisek Kossuth Nov 26 '12 at 13:58
2

You need to set the background-color for at least the following elements (probably more)

.lotusContent .lotusMainContent .lotusColLeft .lotusColRight .lotusMain .lotusTitleBar .placeBar .lotusBanner

I would suggest two things:

1) If you want to use that background - don't use OneUI. It was created with themes in mind and is exceptionally picky about how themes are implemented - messing with OneUI theme is extremely difficult.

2) If you are going to put text on the page don't use that color as a background - any text contrast color will be hard to read and make for a difficult user experience. Check out this link for some help of using colors to aid readability - http://www.1stwebdesigner.com/design/improve-website-readability-through-colors/

MarkyRoden
  • 1,074
  • 6
  • 21