I'm currently creating a custom Drupal theme for my company and I'm having trouble getting multiple stylesheets to load.
I followed the instructions on this page by adding stylesheets to the .info file in the format:
stylesheets[all][] = style.css
stylesheets[all][] = name2.css
etc...
However, when I load the page nothing changes and when I view source, it consistently lists style.css but seems to ignore the others. Am I misunderstood in the process of adding additional stylesheets? What could I be doing incorrectly?
Thanks for any help!
Make sure the ‘Optimize CSS files’ and ‘Caching mode’ settings on /admin/settings/performance are disabled. Try clearing the Drupal cache by hitting the ‘Clear cached data’ button on the bottom of that page.
Apart from the mentioned cache clear, You might also need to visit the theme-selection page once:
admin/build/themes/select
This is to make sure the .info-file gets read again (it's not read on every pageview if Drupal already read it beforo you modified it).
If you see the .css file in the source as "style.css", the CSS optimization is 'off' (when it's on the files have been aggregated to one or several css file with hashed filenames like 'css_1d74ed895e4b5634b0aa1e99c1d0a174.css').
Also, you don't have to turn CSS-optimization off, clearing the cache rebuilts it. While you develop the css files all the time though, it's best to turn if off so you don't have to clear the cache all the time. Turn it on after you're done, it's a really significant page-load booster (in fact IE css loader can break if you dont use the optimizer and have too many css files).
Just to make sure, the css-files should be in the same folder as the .info file (and not for example the parent theme of a subtheme).
PS: clearing cache is fast and easy with the excellent admin_menu module
( http://drupal.org/project/admin_menu ).
Related
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
A skin.css file has been updated on a DotNetNuke website, but the updated change to the file has not yet come through on the main css file.
Tried clearing the cache within DNN and no luck...
I'm not overly familiar with DNN and how it works, but isn't it supposed to get merged into the rest of the CSS files with the DependencyHandler.axd. This does not seem to have happened.
Anyone any ideas?
When you say it isn't showing up in the Main.CSS file, I am going to assume you are using the CDF functionality in the platform. If so, you can go to the Host/Host Settings page, and look for the Client Dependency Framework portion of the settings.
In those settings you can "increase" the version number, which should cause the files to be regenerated, you can also turn off CDF to allow DNN to just load the CSS and JS files normally which generally makes debugging things a little bit easier.
I need to edit a css file that manages the position of certain buttons for a block.
Using Google Chrome to inspect the element, Drupal only gives me this information about the css file name: DSFJHjdfkvwvSDFVSFbvnhsdjnvjsdnfjbvw.css
Wonderful... that doesn't exist. How am I suppose to pinpoint the exact location of a css file? I've torn apart the css files within the styles folder in themes.
So basically finding the source code for everything in drupal requires you to find the needle in the haystack. Is there a way to find exactly what css files my webpage is using by using the admin panel??
Drupal, for performance reasons , aggregates all CSS files into one generated file so only 1 request Is needed to load all necessary styles.
You can disable this (not recommended on a prd site) by going to the performance settings in drupal config and disabling js and CSS optimizations.
Clear the cache and now you will see the specific file the CSS rule lives in when inspecting in chrome tools.
As a side note, it is not recommended to edit anything in a contributed module unless you contribute it back. Otherwise, when you need to upgrade to the next version of the module, you will lose your previous changes. I would just apply CSS rules in your custom theme that override the modules CSS.
Sorry if there are typos. This was written on my phone and I will clean it up when I am at my desk.
I think in your drupal configuration you have enabled the "Aggregate and compress CSS files" settings. Try disabling it by going to Configuration > Development > Performance. It might solve you problem.
You can revert back the setting after you have made changes.
Turn of the caching and then clear the cache. You should then get the correct location of the CSS rules. Once you are done with this, enable caching again.
I am using Drupal 6. Every time I modify the CSS files, I need to clear the cache to see the updated result, which is a waste of my time. Is there any way to disable the cache system?
The reason the CSS cache needs refreshing is because Drupal optimizes all individual CSS files from various modules and themes into one CSS file which is optimized into a single file.
So that this file is not recompiled every page load, which would loose the benefit of optimization, Drupal needs to know when the CSS file has changed in order to recompile this. At which cache refresh seems like the ideal time. To turn this off - rather than turn off caching completely you can simply:
Go to /admin/settings/performance where there is a field labeled "Optimize CSS files":
Disable this whilst you are doing your development and making changes to your CSS file. Then when in production and most of your CSS is set then you can enable it. I highly recommend the performance gains this brings in the loading of your pages.
I have the administration menu module installed, and it is very easy to empty the cache from here in a single click - have a try...
Also, for the purpose of development you could place the following in your template.php (assuming you're working on a theme).
drupal_flush_all_caches();
See http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_flush_all_caches/6
Have a look at Disabling the Drupal cache. That should get you going in the right direction.
For Drupal 7 just add this to settings.php:
$conf['page_compression'] = 0;
$conf['preprocess_js'] = 0;
$conf['preprocess_css'] = 0;
It will override the current settings on "Performance" (admin/config/development/performance), and if you delete the above lines you will see the original configuration after clean cache.
It’s advisable to use CSS cache for Drupal optimization. To check your changes in CSS simply go to “admin/settings/performance” in Drupal 6 and "admin/config/development/performance" in Drupal 7 and disable “Optimize CSS files" in Drupal 6 and “Aggregate and compress CSS files" in Drupal 7 instead of turning off caching completely.
This approach is version agnostic. The code in this example is for Drupal 7.
Step 1: #include a template preprocess file at the beginning of your template file. (if present). This file is not added to the repository (ignored for version control (Git)), so it is not distributed across environments and each dev can have its own actions and settings in this file.
Step 2: In this file, do your local template preprocess stuff like:
Additionally, you can flush all your caches for DEV only.
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.