nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to implement Custom CSS in Formpublisher

sanj17

Hi experts

I have designed a form in Form Publisher. I have a Text box at the top of the form. In this text box there is some default value. Now I want to Bold, and color of the text displayed in the text box should be red and do not want to display the border of the text box.

For this I am using custom css. I have created a css file. In that I have define the color and other attribute. I have updated the templating.cfg file for css. But the css is not applicable to my form.

Can anyone tell me what the issue. where i have to made change. So that css will be applicable to the form.

Thanks

Sanj

Find more posts tagged with

Comments

Adam Stoller

Hi experts

I have designed a form in Form Publisher. I have a Text box at the top of the form. In this text box there is some default value. Now I want to Bold, and color of the text displayed in the text box should be red and do not want to display the border of the text box.

For this I am using custom css. I have created a css file. In that I have define the color and other attribute. I have updated the templating.cfg file for css. But the css is not applicable to my form.

Can anyone tell me what the issue. where i have to made change. So that css will be applicable to the form.

Thanks

Sanj

You need to provide at least a little more information, such as:

sanj17

[QUOTE=ghoti]You need to provide at least a little more information, such as:

1) TeamSite 7.1.0 - sp12)iwmnt/***/***/***/***/WORKAREA/work/templatedata/***/test/mycss.cssiwmnt/***/***/***/***/WORKAREA/work/templatedata/***/test/datacapture.cfg3) templating.cfgdata-type dcr-type="xml" name="test" viewoptions dcr-autonaming="f" dcr-renaming="f" showtree="f" dcr-renamable="t" replicant-render="collapse-direct-children" container-render="normal" new_form-render="disallow-collapse" children-collapse-threshold="10" actionlist="save;" cssurl="webservername:81/mycss.css" / /data-type4)Mozilla Firefox - version 3.5.115)mycss.css.fontColorText {color: #099000;font-size:21px;border:2px;font-weight:bold;}And Datacapture.cfg code is item name="Message" location="Message" pathid="Message" text required="t" maxlength="100" default Message Display here /default /text /itemThanksSanj

Adam Stoller

1) TeamSite 7.1.0 - sp1

2)
iwmnt/***/***/***/***/WORKAREA/work/templatedata/***/test/mycss.css
iwmnt/***/***/***/***/WORKAREA/work/templatedata/***/test/datacapture.cfg

3) templating.cfg
<data-type dcr-type="xml" name="test"
viewoptions dcr-autonaming="f" dcr-renaming="f" showtree="f" dcr-renamable="t" replicant-render="collapse-direct-children" container-render="normal" new_form-render="disallow-collapse" children-collapse-threshold="10" actionlist="save;" cssurl="webservername:81/mycss.css" />

If you look at the FormsPublisher Developers Guide for TS 7.1, on page 103 you might see the following (emphasis added):[indent]cssurl Specifies the name of a style sheet ....
You can put the .css file on the webserver running on port 81. However, adding the .css file to one of the workareas on the TeamSite server will probably not be successful because you have to use the webserver to server the .css file. ...[/indent]Try putting your CSS file in

IWHOME/httpd/iw/custom

(a new directory), and then try changing your directive in the templating.cfg to something like:[indent]

<data-type ... cssurl="localhost:80/iw/custom/mycss.css"/>

[/indent]If that works, which I think it should (haven't tried myself) - you can probably simplify the above to be just:[indent]

<data-type ... cssurl="/iw/custom/mycss.css"/>

[/indent]If the first directive did not work, try changing "localhost" to the name of the actual TS server - however, I don't think that should be needed.

Whether or not your CSS file will actually do anything, well, that's another story. I don't see any class specification for "fontColorText" in the OOTB CSS or in the HTML tags used to define the rendered DCT form - instead I see stuff like:

<table width='100%' cellpadding='4' cellspacing='0' border='0'
       id='row_2' class='row'> 
  <tr>
    <td colspan='3'>
      <div style='visibility:hidden;' class='iw-formspub-error-field'
           width='100%' id='item_msgbox_2'>
      </div> 
    </td>
  </tr>
  <tr>
    <td width='18' id='spacer_cell_2' onclick='_d.h_s("2");'></td>
    <td width='15%' id='label_cell_2'>
      <span id='label_2' class='iw-base-text-field-label-bold'>field-label</span> 
      <span id='req_label_2' class='iw-formspub-field-info'>*</span> 
    </td>
    <td align='left' id='field_cell_2'>
      <input type='text' class='iw-formspub-textbox'
             name='root/container/field-xpath' id='field_2'
             maxlength='14' size='50' readonly='true'
             onfocus='_d.h_s("2")'
             onblur='parent.api.iw_dispatch_handleOnChange("2",this);'>
    </td>
  </tr>
</table>

Which means you have to spend a bit more time deciphering the code of your rendered DCT in order to come up with the proper CSS directive to customize it.

Display Chart using JSAPI.zip