Changing and Using CSS With Drupal

Published January 5, 2015 by CSS Newbies.

Whether your Drupal theme is 6 or 7, or you’re using some of the more popular themes like Zen, Skeleton, TheCompany, or FontFolio – Changing the CSS in your theme can be a bit confusing at first. Drupal is notorious for being a bit more obtuse than WordPress. And unlike WordPress, there is no way to edit the css theme files directly in the admin section.

Not a big deal, there are a number of ways you can accomplish this.

Find your CSS file in the server and edit directly

This is the easiest way to edit your CSS files, but it is also the most risky. Drupal themes are located on your web server in sites/all/themes. There you will see your theme folder and inside you will find your CSS file, likely in the ‘css’ folder.

Depending on how you access the server, you can edit directly in the access program. We recommend WinSCP as a solid and easy to use FTP program. In WinSCP, you would just right-click and click ‘edit’.

The reason this is dangerous is that it is possible for the program to not save even though you think you did. ALWAYS back up the file on your local machine before you edit directly. There are other ways to be safer, using GitHub for instance, but we won’t get into that here.

Add CSS via a block

So this is a little low tech, but effective none-the-less. By creating a block and adding in CSS, you can actually control where the CSS gets tied in (in block visibility).

<style media="screen" type="text/css">
Add style here
</style>

So this works well, but it is not best practices. It’s usually not good to implement CSS this way, but if you document your code well, you can avoid tripping over this CSS in the future.

The real advantage to doing this is being able to control by block visibility.

Creating A New Stylesheet In Drupal Root

So instead of trying to add in code directly, you can create a new CSS file in the root of the server and then reference it on the site.

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

This will work well, but again, it is still a little low tech. The better version of this is to add it into you sites/all/theme file so that all your theme files are in the same place.

Best Practices

The very best way to use or change CSS in your Drupal theme is by altering the css theme files themselves, or add a stylesheet to sites/all/themes/[yourtheme]/css. Either way, always back up your files before you save over anything directly.

  1. Pingback: Drupal 8 Won’t Change The CMS Landscape | Lunarium Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>