Updated CSS not appearing in merged file - css

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.

Related

How to get Plone's CSS Registry to load new CSS files

I'm trying to upgrade a Plone 3.3.5 server to 4.3.6. However, when I update the site, I find that the CSS for the site is not carried over. If I go to my CSS Registry, I find that almost all of my CSS is producing the (resource not found or not accessible) error.
My confusion seems to be in how Plone locates and links/imports stylesheets in general as Plone seems to be loading virtually none of my CSS and pretty much giving me raw HTML in the browser. I'm assuming the CSS registry is loading CSS from the buildout-cache. With this assumption, an example stylesheet that I'm targeting is located under:
Plone/buildout-cache/eggs/Products.NuPlone-1.0b3-py2.7.egg/Products/NuPlone/skins/nuplone_styles/base.css
When the CSS Registry failed to load this, I noticed that some CSS was being loaded in via handles like this:
++resource++tinymce.stylesheets/tinymce.css
But this format doesn't work with base.css and others.
So my question is, given I've got a new product installed with some CSS included in it, how do I get Plone to target said CSS?
For resources inside "skins" FS folders, the way to register on portal_css tool is to simply provide the filename, so simply put there base.css.
If this is not working probably the nuplone_styles skin folder is not registered properly in the portal_skins tool.
So go to ZMI --> portal_skins --> click on "Properties" and check the following:
what theme is used? You must probably switch back to NuPlone (but I'm not sure if it works on Plone 4)
is the nuplone_styles folder in the list of CMF layers of the used theme?
Please note also that adding the nuplone_styles layer to another theme is not a good idea. Please think about copying CSS you need in the custom directory.
This is not an answer, but some additional explanation, not fitting in a comment:
The "old" way to include style-sheets via skin-folders, requires to specify only the file-name, not a full path, and will be found by traversal, meaning the first found file with the according name, will be taken. In case of several files with the same name, the order of skins matters.
The other way is to register style-sheets via a browser-package, to have an unambiguous path to a certain file, they must start with +++resource++.

Search for a CSS file

A few hours ago I had to change the width and padding on a few divs on this page. I messed around with the developer tool of the browser for a few minutes to see what exactly I want to change. After I connected to the ftp I made the changes I thought were necessary, but I nothing happened. After banging my head for half an hour it turns out that I was making the changes to a cached version of the file. I asked the guy who gave me the task where the css file was, but he couldn't answer me.
So how do I find out where the css file is after I log into the ftp server? In this case there were multiple directories with multiple css files.
As you pointed out, the website uses a plugin to cache CSS files, and these cached files shouldn't be edited directly. It looks like the site is running Wordpress, in which case you'll need to look in the wp-content/themes folder (it will depend on which theme you're running where exactly the CSS file is). It's also often possible to edit the CSS directly from within the wordpress admin panel (Appearance > Editor)

How can I do a conditional load of some CSS Files?

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.

I can't edit a drupal module, the css location is incredibly difficult to find

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.

Best practice for working with less, or minified CSS

I'm considering using less in an upcoming project but have been trying to figure out the best way to work with it while in development.
Usually when developing a site I'll write my html and css then start testing it in the browser, see how it looks, refine, reload, and repeat the whole process until I'm happy with how everything looks.
A crucial part of the process is using the Inspect Element feature in the browser to identify the piece of CSS I need to change. Usually just by looking at the line number I know exactly where to go in my CSS file.
But if I use Less (or any other method of combining/compressing my CSS) it makes the line numbers useless. I know I could use Find to search for the section of code but line numbers are much faster.
This is especially true when working on a project that involves other developers or large CSS files.
I just wondered how others deal with this, or maybe there's a better process?
Minified CSS really should only be going out to the production version of your site. When you're performing tests/changes etc, this should all be done in some test or development version of your site in a secondary server area where you can have the line-numbers version of css available. The same would go for JavaScript. On the production viewable copy, you want it minified. In development, you don't.
In any event, you should always have 2 copies of your css. The first copy is the primary source copy that is your development copy. It has all of your properly formatted styles with line-breaks in it. The other is the very latest minified version of your css that went to production. This will allow you to switch between the 2 files rapidly in the event that you need to work something out, assuming your site uses some sort of templated delivery (layout pages, master pages, or whatever).
The minified version will only be useful in the final delivery. All other needs should use the master copy. It might not be a bad idea to put a configuration in server-side portion of your site that determines what style sheet to use. That way you can simply change a configuration setting and go into a "debug" mode.
I agree with Joel - that's how I handle it. A build script minifies the CSS (and JS) before each release is FTP'ed to production. I just have a switch in PHP like:
if ($config->prod()) {
// incldue the minfied css
} else {
// include all the original files
}
Personnaly, I use an ant build script to make a production version:
it "condense" multiple css files in one
then it minify them with YUI compressor
same for scripts
(page recomposition to point to the newly generated files)
this way you divide your http request for those files, and gain some bandwith from 30% to 70% i'd say. depends on gzip also.
in my case, the dev version have:
18 css weighting 178ko
reduced down to 1 css at 96ko in the production version
I personally use tools to minify and inject the CSS into the browser each time i save my Less file. So i see each change immediately. This way it's pretty clear what just happened. I don't need the referencing line numbers that much any more.
I recently started using source maps, to see the correct file and line numbers (of my less files) when inspecting CSS in the browser again. I think that is what you are looking for. I personally don't need this extra fanciness that much.

Resources