How to style individual webforms with different css class and html elements?I have a few webforms and I need different html elements like divs, spans etc and css class for each webforms
-
1you could try using Theme key module.– AjitSMay 28, 2012 at 11:38
Add a comment
|
3 Answers
If you just need to apply CSS styling, then if you view the source of the webforms you will see they have container divs with classes that contain an ID number. This ID will allow you to directly target a specific webform.
If you mean you want to add your own divs etc. and template different webforms, then the best way to do this is by creating a specific template file for it.
In your theme folder you can add a template file such as:
webform-form-[nid].tpl.php you can get the ID by viewing the source of your form, it displays in one of the forms parent divs.
As your base you can use the default template from the webforms module. Goto (or other location where you have installed the webforms module):
/sites/all/modules/webform/templates/webform-form.tpl.php
and make a copy of this.
I have themed webforms that appear in blocks in the following way too:
block--webform--client-block-112.tpl.php
answered Dec 22, 2012 at 2:06
-
1That should be /sites/all/modules/webform/templates/webform-form.tpl.php I think May 30, 2013 at 18:15
For few changes drupal provide a class wrapper for each page node for example :
<body class="html front logged-in no-sidebars page-node page-node- page-node-109 page-type-page domain-ircam-mpmaroc-com i18n-fr lang-fr color-scheme-default corolla fs-medium bs-n bb-n mb-dd rc-6 rct-6 ia-r coffee-processed lightbox-processed admin-menu">
this is the class for the node 109 so in css you could use :
.page-node-109 input{}
and then for each web form you will use the .pane-node-(node id) to theme it separatly
But for big changes you must use the hook_form_alter
To modify each Webform separately you should use the forms css ID. The ID should always be unique.
For example, when you look at the source of your webform, you will notice in the <form> element, there will be an ID. For example <form id='the_unique_id'>.
I believe the ID should be something like webform-client-form-<NODEID>
You can then use your themes CSS file to modify the form.
Note that ID selectors start with # and not .
#the_unique_id {
background-color: red;
}
