Share This:

I have found out an easiest way to add CSS in our custom or OOTB forms, though it might be aware for many people I thought of sharing which I figured through this blog.

The below steps will show case the simplest way to add custom CSS code in your Remedy forms.

 

Step 1:

Open or create a regular or any type of forms in Developer studio.

Step 2:

Add the necessary fields and save the form.

Step 3:

Now flush your midtier cache and open the new form through any browser.

Step 4:

Right on the form and select “Inspect element” as mentioned below;

Step 5:

Using the pointer select the field which we want to modify (In my case I have chosen table field and the header color to be changed)

Step 6:

Now we have to write the content in to a new text file which I marked as no# 1 in the above screenshot.

div#WIN_0_536870913.arfid536870913.ardbnTableField>div.TableInner>div.BaseTableOuter>div.BaseTableInner>div.BaseTableColHeaders>div.BaseTableHeader

{

color: #ec1313;

font-weight: bold;

font-size: 15px;

}

 

Step 7:

Once we copied the above content we have to open the form and select Form view properties as mentioned below and in that we have to expand the web header properties

Under the web header we have to insert the as mentioned below

<style type="text/css">

div#WIN_0_536870913.arfid536870913.ardbnTableField>div.TableInner>div.BaseTableOuter>div.BaseTableInner>div.BaseTableColHeaders>div.BaseTableHeader

{

cursor: default;

height: 16px;

padding-left: 4px;

white-space: nowrap;

color: #133cec;

font-weight: bold;

font-size: 18px;

}

</style>

<link href="../../../../sharedresources/Custom/NGC_CalendarMainPageCSS?server=@"  rel="stylesheet">

 

Note: the below mentioned href attributes is only to initiate the CSS file.

Step 8:

Once the above mentioned activities are done, save the form and flush bother midtier and browser cache.

 

Result:

 

Thanks & Regards,

Jijil