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 atsites/all/themes/bella, the system will look for the existence of the filesites/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 thesites/all/themes/bella/custom-style.cssfile would be a good place to put the CSS code for the classcustom-breadcrumb.- For instance, say you wanted to use an image of your own named
breadcrumb-image.pngas the separator. One possibility would be to upload the filebreadcrumb-image.pnginto thesites/all/themes/belladirectory, then inside your newly-createdcustom-style.cssfile, add the following code:.custom-breadcrumb { background: url("breadcrumb-image.png") no-repeat scroll center center transparent; display: inline-block; width: 20px; }
- For instance, say you wanted to use an image of your own named
- If your custom breadcrumb separator is set to
- 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 namedcustom-style-www.yoursite.com.cssinside your theme's directory, the system will in turn add that file only when the user visitswww.yoursite.com. So if they visityoursite.comorsubdomain.yoursite.com, the filecustom-style-www.yoursite.com.csswill not appear. Anything found here should be able to override what may have been found inside thecustom-style.cssfile 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.cssandcustom-style-projection.css, respectively.
- For example, to have the system include one stylesheet for handheld devices and another stylesheet for projection devices, name the files
- 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 filecustom-style-handheld-www.yoursite.com.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
- 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.cssand 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-rtlto 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 filecustom-style-projection-subdomain.yoursite.com-rtl.css.
- For example, to include a stylesheet for projection devices only, and only when the user is viewing your site at
- 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.csscustom-style-ie7.csscustom-style-ie6.csscustom-style-ie8-ltr.csscustom-style-ie7-ltr.csscustom-style-ie6-ltr.csscustom-style-ie8-rtl.csscustom-style-ie7-rtl.csscustom-style-ie6-rtl.css
NOTE: If CSS/JS aggregation is enabled, all the custom
.cssfiles 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.
- First, the system will check for a stylesheet called
- 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.csswill be scanned for. Also note that the default stylesheet athttp://www.yoursite.com/sites/all/themes/bella/css/style.csswill 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.