We can add custom style sheets into Drupal based websites to customize the look and feel of your website. For that we need to include the custom CSS files into themes. This article explains the steps to include custom CSS styles into Drupal based website.
This article applies to:
- Drupal 7.x
Step(1). Log-in into your Drupal based website hosting control panel as an Administrator
Step (2). Open the File Manager and navigate to the location where you installed your Drupal based website.
Step (3). Usually themes will be stored under themes folder. Navigate to themes folder and look for the theme where you want to add your own style sheets.
For eg: batrik is the default theme comes with Drupal installation. If you want to add custom styles into batrik theme, look for folder batrik under themes folder and open the folder.
Step (4). Drupal maintaines .info files to store metadata for themes. The .info files must be the same name as the theme name. For eg: batrik is the theme name, so .info must be batrik.info for batrik theme.
Step (5). Open .info file of the theme and look for the following code.
stylesheets[all][] = css/layout.css
Step (6). After the above code add the following code in new line.
stylesheets[all][] = css/my-styles.css
You must define your own styles in the file for eg: my-styles.css and keep the file under css folder.
Step (7). Once you are done with your changes save the file.
Refresh your website to reflect your changes.