Remedy - Midtier - How to Style Form Table Headers and Columns with CSS

Version 1
    Share This:

    This document contains official content from the BMC Software Knowledge Base. It is automatically updated when the knowledge article is modified.


    PRODUCT:

    Remedy AR System Server


    COMPONENT:

    AR System Mid Tier


    APPLIES TO:

    Midtier 9.x and above.



    QUESTION:

    How can i style Form Table Headers and Columns with CSS?


    ANSWER:

    The base classes to style the column headers are:
    div.BaseTableHeader, div.BaseTableColHeaders and div.BaseTableInner.

    In order to set column header properties such as height, background, font size / style, we first need to modify the elements BaseTableHeader and BaseTableColHeaders:  i.e:

    div.BaseTableHeader, div.BaseTableColHeaders {
    vertical-align: middle !important;
    text-align: center !important;
    height: 30px !important;
    background: #12a0e7;
    padding-top: 2px;
    font-size: 13pt !important;
    }

    Note:
    If we modified the Height property for the previous elements, we have to update the Top property of the element BaseTableInner element to the same Height value:

    div.BaseTableInner{
    top: 30px !important;
    }

    Additional styles note:
    If you require to change the Table cells background color or odd Table cells color, you have to modify the following elements:

    td.BaseTableCellColor{
        background: #b9eeff !important;
    }

    td.BaseTableCellOddColor{
        background: #fff !important;
    }

    To update the font size of the overall Table:
    div.TableInner * {
      font-size: 13pt !important;
    }

    Since every element has already been styled in the ARSystem.css main stylesheet, we have to override the properties with the keyword !important.

    Table

    ¿Where to apply the new styles?

    We can follow two approaches in order to configure the new styles: 

    1.- Apply these styles globally for all forms.
    In order to apply these styles globally, we need to append our new code to the main ARSystem.css file, located in: 
    <Midtier>/resources/standard/stylesheets/  ARSystem.css

    The code is condensed, but we can add the new styles after the last line. 

    2.- Apply these styles locally on individual forms:
    In order to apply these styles locally on each desired form, we have to append the code to the   Web content header, in Developer Studio: 

    2.1) Open Developer Studio and find the desired form. 
    2.2) Create an overlay for this form. 
    2.3) Open the   form properties, select   Appearance and click on the   Web Header Content ellipses. 
    2.4) Add the   <style> tags and place your CSS styles within the tags, i.e: 
    <style>
    ...elements{  
      properties... 

    </style>
    2.5) Click   Ok and save changes. 
    2.6) Navigate to Midtier Config Tool and Flush the cache of the form. 
    2.6) Clear your browsers cache. 

     


    Article Number:

    000171828


    Article Type:

    FAQ/Procedural



      Looking for additional information?    Search BMC Support  or  Browse Knowledge Articles