Scan for custom stylesheets

Please remember that the following assumes you're using the Bella theme, and that the theme itself lives at sites/all/themes/bella inside your Drupal installation.

Scan for custom stylesheets

If this box is checked, the system will scan your theme's directory and look for customized stylesheets. Since we're assuming your themes lives at sites/all/themes/bella, this is the directory which would be scanned for the existence of custom stylesheets. The scan will take place in the following order:

First, the system will check for a stylesheet called custom-style.css. So if your theme is located at sites/all/themes/bella, the system will look for the existence of the file sites/all/themes/bella/custom-style.css. If it finds this file, the CSS code found within the file will be added to every site of your Drupal installation that uses this theme. Anything found in this file should be able to override anything found inside the theme's default stylesheet.
- If your custom breadcrumb separator is set to <span class="custom-breadcrumb"></span>, inside the sites/all/themes/bella/custom-style.css file would be a good place to put the CSS code for the class custom-breadcrumb.
  - For instance, say you wanted to use an image of your own named breadcrumb-image.png as the separator. One possibility would be to upload the file breadcrumb-image.png into the sites/all/themes/bella directory, then inside your newly-created custom-style.css file, add the following code:
```
.custom-breadcrumb {
  background: url("breadcrumb-image.png") no-repeat scroll center center transparent;
  display: inline-block;
  width: 20px;
}
```
Next, the system will check for stylesheets based on domain name alone. Assuming your domain name is www.yoursite.com, if there is a file named custom-style-www.yoursite.com.css inside your theme's directory, the system will in turn add that file only when the user visits www.yoursite.com. So if they visit yoursite.com or subdomain.yoursite.com, the file custom-style-www.yoursite.com.css will not appear. Anything found here should be able to override what may have been found inside the custom-style.css file as well as anything inside the theme's default stylesheet.
Regardless of whether the above file(s) were found or not, the system will now check for more customized files so that site admins can add custom stylesheets based on other criteria, the first of which is based on media type alone. Each of these files will be able to override what may have been found so far in any of the stylesheets above and/or anything inside the theme's default stylesheet. Possible media types are: all, aural, braille, handheld, projection, print, screen, tty, and tv.
The format of the file name should be custom-style-mediatype.css.
- For example, to have the system include one stylesheet for handheld devices and another stylesheet for projection devices, name the files custom-style-handheld.css and custom-style-projection.css, respectively.
Now the system will check for stylesheets based on a combination of the site domain as well as the media type. Each of these files will be able to further override what may have been found so far in any of the stylesheets above and/or anything inside the theme's default stylesheet. Regardless of whether those above file(s) were found or not, the system will now check for these deeper customization files so that each site in a multi-site installation can use its own specific stylesheets(s).
The format for doing this would be custom-style-mediatype-domainname.css.
- For example, if you wanted to include a custom stylesheet for handheld devices only, and only when the user is viewing your site at www.yoursite.com, you would name the file custom-style-handheld-www.yoursite.com.css.
At this point, the system will check for stylesheets based on language direction. To add a RTL stylesheet for all sites, simply create a file called custom-style-rtl.css and place it inside your theme's directory.
Or, to add custom stylesheets for RTL languages based on media type and domain name, use the same format as can be found above in #4, except append -rtl to the filename (before the file extension).
File name format: custom-style-mediatype-domainname-rtl.css.
- For example, to include a stylesheet for projection devices only, and only when the user is viewing your site at subdomain.yoursite.com, and only when the direction of the viewer's language is right-to-left, you would name the file custom-style-projection-subdomain.yoursite.com-rtl.css.
Finally the system will check for custom stylesheets that are to be used to cater to users who still use Internet Explorer, commonly referred to as IE. Custom stylesheets for IE will be scanned for in the following order, based first on browser version alone (8, 7, or 6) followed by a combination of the browser version and the current user's language direction:
- custom-style-ie8.css
- custom-style-ie7.css
- custom-style-ie6.css
- custom-style-ie8-ltr.css
- custom-style-ie7-ltr.css
- custom-style-ie6-ltr.css
- custom-style-ie8-rtl.css
- custom-style-ie7-rtl.css
- custom-style-ie6-rtl.css
NOTE: If CSS/JS aggregation is enabled, all the custom .css files mentioned above will be included aggregation process, with the exception of the custom IE stylesheets. This is standard practice but since most people probably don't care, I won't go into any detail here about why this needs to happen. However, feel free to browse the contents of the page found here within which Microsoft itself explains how inconvenient its own browser (IE) is for a good portion of the world's population.

Here is an overview of the possible CSS files that will be scanned for, in order:

custom-style.css
custom-style-www.example.com.css
custom-style-all.css
custom-style-aural.css
custom-style-braille.css
custom-style-handheld.css
custom-style-projection.css
custom-style-print.css
custom-style-screen.css
custom-style-tty.css
custom-style-tv.css
custom-style-all-www.yoursite.com.css
custom-style-aural-www.yoursite.com.css
custom-style-braille-www.yoursite.com.css
custom-style-handheld-www.yoursite.com.css
custom-style-projection-www.yoursite.com.css
custom-style-print-www.yoursite.com.css
custom-style-screen-www.yoursite.com.css
custom-style-tty-www.yoursite.com.css
custom-style-tv-www.yoursite.com.css
custom-style-rtl.css
custom-style-all-www.yoursite.com-rtl.css
custom-style-aural-www.yoursite.com-rtl.css
custom-style-braille-www.yoursite.com-rtl.css
custom-style-handheld-www.yoursite.com-rtl.css
custom-style-projection-www.yoursite.com-rtl.css
custom-style-print-www.yoursite.com-rtl.css
custom-style-screen-www.yoursite.com-rtl.css
custom-style-tty-www.yoursite.com-rtl.css
custom-style-tv-www.yoursite.com-rtl.css
custom-style-ie8.css
custom-style-ie7.css
custom-style-ie6.css
custom-style-ie8-ltr.css
custom-style-ie7-ltr.css
custom-style-ie6-ltr.css
custom-style-ie8-rtl.css
custom-style-ie7-rtl.css
custom-style-ie6-rtl.css

Please note that if your site has only a left-to-right language installed, none of the CSS files listed ending in -rtl.css will be scanned for. Also note that the default stylesheet at http://www.yoursite.com/sites/all/themes/bella/css/style.css will always be the first file scanned for (in addition to and preceding those listed above). This way, any custom stylesheets found will be able to override what's already set inside the default stylesheet.

Search form

Theme Showcase

Scan for custom stylesheets

Proudly...

Search form

Theme Showcase

Login

Scan for custom stylesheets

Proudly...