0

I made a booking form using Webform. How do I modify the CSS? Where do I find the CSS file of the webform?

The CSS files in Drupal look nothing like in Vanilla CSS. I'm bit lost there. I would just like to reduce the width of my rows or change how the date-picker looks like. Or to display my rows in two columns.

I don't want to touch the PHP files too much either, hence why I found the answers about this topic on this forum not satisfying.

  • It's best practice not to edit module CSS files, such as webform's css. Instead just override the same CSS selector in your theme's CSS file. – Beebee Jan 27 '17 at 16:54
2

You'll find the .css files in your theme directory, usually sites/all/themes/THEME_NAME/css.

To see easily in which line of which css file is the rule you'd like to change, you can go to admin/config/development/performance and un-tick Aggregate and compress css files checkbox.

Then with Firebug or similar development tool you'll be able to explore the css.

Check also if there's a sass or less folder in the same directory. In that case, you would have to edit the relevant scss/less files instead of the css ones, and make sure your editor is well configured to compile them to css.

You can explore scss files with the help of FireCompass addd-on and less ones with FireLESS.

EDIT

As underlined by Beebee comment, if the css you'd like to override are into a module css file, such as webform's css, don't edit that file, but override it in your own theme's css file.

  • Thanks. What's the usual path for the theme's css file? – Vasmir Jan 30 '17 at 10:37
  • It depends on your setup, but usually as said in the answer : sites/all/themes/THEME_NAME/css. Or maybe sites/all/themes/contrib/THEME_NAME/css , sites/all/themes/custom/THEME_NAME/css or if you installed a distribution profiles/DISTRO_NAME/themes/contrib/THEME_NAME/css and so on ... Just check the site folders, or using Firebug in Firefox, when you hover the css file name on the right of each rule, you can see its full path – Kojo Jan 30 '17 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.