Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By wshi2007 on
Hi,
I am new to Drupal, can somebody please help me in customising CSS for modules.
For example, we created a form using a webform module and have a CSS file, how to change the CSS for the form created, where to include the css files?
Thankyou in Advance,
Comments
Generally
You would override what you need to in your themes CSS. The themes stylesheet is imported last so it should be able to override anything else.
--
Anton
New to Drupal? | Troubleshooting FAQ
Example knowledge base built with Drupal
CSS and Modules
Thankyou styro for the prompt reply.
I actually changed the look and feel for the site, by making changes in style.css and page.tpl.php
Now I am using a webform module to create a registration form.
and i want to use a different style sheet for this new node.
It is like i have to use different CSS for different Webforms created.
I tried changing in the template.php, and creating a new file webform_form_nid.tpl.php in the themes directory, but this does not work.
Is there any other way for inserting the CSS file in includes/common.inc, using the function: drupal_get_css().
Can any one give example of how to change the css for forms created using modules.
Can you help me in this.
Thankyou
I don't know anything about webform sorry
But if you can look for a suitable CSS class or id, you should be able to attach your themes CSS to it.
With the Drupal Forms API each form gets a unique id, but I don't know how webform might or might not alter that. If you need to alter the CSS for bits of the node outside the form, then you could insert some unique custom classes in your node template(s).
One pointer: generally in most other cases when coming up with template filenames, you'll need to switch underscores to hyphens (ie webform_form_nid.tpl.php doesn't look like a valid template name). But I don't know anything about webforms theming capabilities though.
--
Anton
New to Drupal? | Troubleshooting FAQ
Example knowledge base built with Drupal
Css for modules
Thankyou, Anton
May be not the webform module,...
but can you please guide me about the procedure to change the css of any module,.
Ex. say the profile module, how do we change the CSS or arrange the text fields or address fields when we use the module,.....
In my case i want to create a registration form which has several fields like name add ph.no, upload resume, send e-mail etc, i have to insert my own left and right side blocks and arrange the form in the middle block. Also i want to change the color for this page.
According to you, is there any other module you know, in which i can also change the CSS for that.
How well do you know CSS?
Overriding a modules CSS just uses plain old CSS itself. There is no Drupal (unless you count your themes style.css file) involved anywhere.
Just use Firebug (a Firefox extension) to see what CSS selectors are responsible for the styles you want to change, and then put those selectors (or more specific ones) in your themes stylesheet. If that all sounds confusing to you (its standard CSS language/concepts), you'll need to do some background research on CSS - ie: selectors and how they cascade and override each other by being more 'specific'.
But it also sounds like you want to do much more than change CSS. If you want to create or change forms (no longer a theming task), that is a completely separate problem. If you can't find a ready made module (eg webform, profile, node profile etc) that does what you want then you'll have to write a module yourself.
--
Anton
New to Drupal? | Troubleshooting FAQ
Example knowledge base built with Drupal
This post is a couple wks
This post is a couple wks old so I'm not sure if you found what you are looking for but I'm also pretty new to Drupal and designing a registration page for my site. I'm developing my own module to do what I need, if your still having problems getting the CSS to work etc you can contact me @ Justin.D.Kelly@gmail.com or AIM: XxKrythisxX I just spent a couple hours figuring out how to get mine to work, so I might be able to lend a hand.
-Justin
Module Form Markup
The module Form Markup works for me:
http://drupal.org/project/form_markup
Works for webform but not for CCK fields
Hi,
I want ot change widht of my CCk fields and get them inline with the labels,
I tried it by using the FireFox, to get the id's
But my code here works perfectly, when used with webform module but not with CCK.
Ex: Webform Code:
.webform-component-textarea label,
.webform-component-textarea .form-item .form-textarea{
float:none; padding-left:10px; display:none;
display:inline;
float:left; width:170px; margin-right:0.5em; text-align:right;
font-weight:normal; font-size:0.75em; color:#666;}
And for CCk :
.form-text label,
.form-text.form-item .form-text{
float:none; padding-left:10px; display:none;
display:inline;
float:left; width:170px; margin-right:0.5em; text-align:right;
font-weight:normal; font-size:0.75em; color:#666; }