This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal



~Tate Brejipykonyli
May 25, 2012, 5:30 AM
32 Posts
topic has been resolvedResolved

CSS - overriding oneui / xpage defaults

  • Category: Other
  • Platform: All
  • Release: 8.5.3
  • Role: Developer
  • Tags: CSS,oneui
  • Replies: 4
Hello,
 
I have created my own CSS for my xpage application.
 
I have found that some of the elements are applying the default style, rather than the style applied to the cell. Disclaimer - I not a CSS expert. :)
 
In my example, I have a CSS tag for tdheader defined as follows:
 
.tdheader {
    width: 150px;
    color: #3593DD;
    font-size: 1em;
    padding: 5px 7px 5px 7px;
    border-top: 1px solid grey;
}
 
 All elements are applied except for color.  When looking at the page using firebug, it appears as though the following  tag is being used to override the assignment of colour.
 
 
~Dean Kiponetherjip
May 25, 2012, 6:51 AM
10 Posts
Re: CSS - overriding oneui / xpage defaults
Your .tdheader styling only applies to the table cell. Inside the cell there is a label (the HTLML label tag) and this label gets its styling from the .lotusForm td label selector. 
 
You need to override this specific selector or create your own using e.g. the .tdheader label selector .
 
I can highly recommend overriding the OneUI specific selectors as you then do not need to create your own selectors and add these to the correect XPages controls. 
~Tate Brejipykonyli
May 25, 2012, 7:38 AM
32 Posts
Re: CSS - overriding oneui / xpage defaults
Hi Per,
 
Thanks for your note.  I have created a new styling for the label as follows:
 
.tdheaderlabel {
    color: #3593DD;
}
 
And have assigned this to the label.  Should this now not make the text this colour?  Am I overlooking something really simple?
 
A
~Ben Asaponeskioden
May 25, 2012, 9:07 AM
126 Posts
Re: CSS - overriding oneui / xpage defaults
your styleClass name should have a space in it before "label". He's not saying to name it that he's saying to reference the label inside the element assigned with tdHeader.
 
in css you can do things like this: 
 
.tdHeader label
{
 .....
} 
 
this means that this style will be applied to any label that is inside the element that has been given the class of tdHeader. What uve done above is name a styleClass "tdHeaderlabel"
~Tate Brejipykonyli
May 27, 2012, 9:40 PM
32 Posts
Re: CSS - overriding oneui / xpage defaults
Thanks for being patient Simon - you've just plugged a big gap in my knowledge!
 
Cheers
 
A 
 
 

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal