On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi there. Does this tutorial is also compatible with Mozilla Firefox and Google Chrome? [ed. note: keiooz last edited this post 8 years, 7 months ago.]
    • If you've been designing CSS like I have for years, you can utilize TVs for your content resource to determine how you would like it to be presented.

      Some notes:

      • I've been utilizing the @import statement (usually in combination with link rel element) for modular CSS for quite some time.
      • My CSS is split into 5 files, all ordered according to their priority based on their function.
      • One of the CSS files is document specific. So I load the CSS in the following way: HTML Overrides, Layout Styles (2 column, headers, etc.), Content Styles, Page Specific Styles (an article vs. a blog), and finally "functional CSS" (CSS that mimics application functionality).
      • I don't utilize browser-specific CSS hacks. I've simply chosen not to support IE 5.X or IE 6.X.

      As a result, if my page is of template, Article, I may choose a different "Page Specific" file or layout structure from any other page very easily. I've utilized this with TV's to determine which classes, or even Resource Specific CSS. Doing so allows my users to have some control over the way their own content is presented without it undermining the consistency of the site's presentation. Furthermore, I still maintain control over when custom CSS may be applied (within the site).

      P.S. Thank you for this tutorial! It was exactly what I wanted my whole life and never knew it.
        Website: Extended Dialog Development Blog: on Extended Dialog
        Add-ons: AJAX Revolution, RO.IDEs Editor & Framework (in works) Utilities: Plugin Compatibility List
        Tutorials: Create Cross-Context Resources, Cross-Context AJAX Login, Template-Based Actions, Remove Extensions from URLs

        Failure is just another word for saying you didn't want to try. "It can't be done" means "I don't know how".
      • Quote from: davidm at Jun 19, 2006, 08:23 PM


        Pre-requisites :


        1. In the manager, create a folder to store your stylesheets, not required but it's cleaner. For the sake of this tutorial, this folder will be named "css".

        Great tutorial and quite easy to follow But can i be cheeky and suggest this paragraph can be made a bit more newbie friendly with a quick rewrite:

        1. In the manager, create a document and set it as a container (tick box on the settings tab) so it acts as a folder to store your stylesheets, not required but it's cleaner. For the sake of this tutorial, this folder will be named "css".

        just to save the newer users like myself scratching their heads wondering how and where you create a folder, not rocket science to work out but i figure if it stumped me for a minute or three others would be as well and the less hassle a new user has the more likely they are to become an old hand.

        Thanks
        • thanks for this awesome tutorial. its quite helpful.
          • fourroses666 Reply #75, 7 years ago
            I might have missed something, but is this folder with css visible for publishers?
            (When deleted this page you are in trouble lipsrsealed
            I always make a chunk and while developing just add <style>{{-css}}</style> in the head.

            The thing I'm missing is line counting, thats very usefull when developing and using FireBug.
              Evolution user, I like the back-end speed and simplicity smiley