• How do you style a dialog?

    By Howard Greenberg 1 decade ago

    I was trying to style the dialog control.  My XPage is:

     


        xmlns:xe="http://www.ibm.com/xsp/coreex">
        
           
        

        
           
               
           

        

        
        
        
           
               
                   
                       
                           
                       

                       
                           
                       

                   

                   
                       
                           
                       

                       
                           
                       

                   

               

               
                   
                       
                           
                       

                   

               

           

        

     

    And I have a css file with:

    .borders {
        border-color:rgb(0,64,128);
        background-color:rgb(255,255,0);
        border-style:solid;
        border-width:thin
    }

     

    Nothing gets styled.  Any idea on how to style the dialog box?

     

    thanks,

    Howard

    • I should add...

      By Howard Greenberg 1 decade ago

      I tried putting in a panel inside the dialog but got a white border around the dialog...

      So, it appears the styling would have to be on the dialog itself...

       

      Howard

       

      • The styles are properly generated

        By Philippe Riand 1 decade ago

        on the dialog div, but the lotusDialog class forces the background and the border. You can use firebug to understand what is happening.

        Having a different styles implies creating a new dojo templates that overrides the OneUI one, or by finding the element you want to apply the style to and programmatically set it

        • thanks,figured it out.

          By Howard Greenberg 1 decade ago

          I put the following in the button that opens the dialog (this would only work assuming one dialog on the XPage):

          XSP.openDialog("#{id:dialog1}");
          elem = dojo.query(".dijitDialogPaneContent");
          elem[0].className="borders";

           

          Howard