Css Not Loading in Browser

Hi, I am a very novice user and have been learning HTML and CSS through trial and error with this great CMF. I have been pulling pieces of information from all over the web and the great community here.

I found a reference where you can use:



to reference a resource that contains the appropriate CSS stylesheet information on a CSS ONLY template. I found this to work nicely and allow me to adjust the css as I learn via the Manager >>SITE >>VIEW... which loads my homepage in a new window.

As I have become comfortable using chunks I started to take this same approach with my styleheets and ended up having the <head> with the following:



In a chunk that I use in my template. Each resource is the same... CSS definitions on a CSS ONLY template. When I go to the Manager>>SITE>>VIEW, I see all my changes as each resource represents the key sections of my webpage.

My Problem is that the CSS does NOT load in the browser on its own, I have to log in the Manager then SITE>> VIEW and then the page will load properly then and all subsequent requests of that webpage IF I do not it will not load the CSS styling.

So... My only conclusion is that separating the CSS in such a way MUST be a very poor practice I was hoping for some feedback from the community to confirm this or to point out a mistake I am making in the coding. Perhaps shed some light on why the browser behaves in such a manner so I can further my understanding of the compiling of PHP.

The page source reflects:



WebSite: http://www.shopcoop.org/

MODx Version: MODX Revolution 2.2.0-pl2 (traditional)
Database: mysql 5.0.92-community
PHP version: 5.2.17
OS: Linux server15.websitehostserver.net 2.6.18-374.12.1.el5.lve0.8.54 #1 SMP Wed Jan 4 18:40:17 EET 2012 x86_64

THANKS for your TIME!!!

Your .css resource should be using "none" as its template.

Are you sure that your .css resources are published? Manager users can see non-published resources.

I'm still fairly novice with MODX as well, but why do you need a whole other style sheet for each page and why do you need them as resources?
I don't see the benefit.

You can simply have another browser tab opened up to the file tree, under the "Files" tab, and edit your CSS file(s) directly. Hit save, or the lovely CTRL+S, (CMD+S mac), lord I love that feature, and you're in business. (don't forget to backup your online CSS file after changes!)

I used to use several style sheets in the static site days prior to finding MODX but I moved away from that pretty quick. I put everything in one core stylesheet whenever I can. It gets long and a little cluttered sometimes but if you keep your styles grouped with some logic you will get used to navigating your system, plus CTRL+F works great too. I don't know if there are any reasons why not to do all in one sheet, unless you're building a huge site, or if there are specific benefits to making your style sheet a resource but this is how I do it, maybe an advanced user can chime in here if there is.

Furthermore you can use different classes within your CSS and HTML code, instead of ID specific, to affect same named elements across multiple pages however you need. I have also moved away from making a whole mess of templates and use the hay out of TVs anymore.

Now who doesn't like TVs! [ed. note: whitesphynx last edited this post 14 years, 8 months ago.]

My thought is this: do not ever store your static content (JavaScript, CSS, etc) inside MODX unless you have to. It's usually much faster (and always more conventional) to save that stuff on the file system. The only reason I have ever put CSS or JavaScript files inside of MODX is when I needed the controls that MODX offers: logged access, permissions, and the ability to set publish dates. That almost never is the case for a CSS file, so avoid the headache and just create a folder inside of your /assets folder and store your CSS files there. Just references them as you would normally in any HTML file -- you can use the assets_url placeholder:

There are times when I use more than one stylesheet. If I am using more than one template to handle wildly different types of content (either really different layouts or else to handle different Template Variable requirements) they will generally still have the same masthead/logo/main menu as well as the same footer, so I'll have one stylesheet "common.css" to handle the styling of those elements, with separate .css files for each template's main content areas.

However, it becomes a trade-off in simplicity and manageability of the .css files versus page loading optimization.

Every request the browser makes to the server is a completely new request, taking up more connection and server response time. Even a huge .css file is still just simple text, and is downloaded very quickly. Making the request and negotiating the connection between the server and the browser, however, is the same whether you're going to subsequently be downloading a 5k text file or a 5M .pdf file.

So if you have too many small, quick-to-download requests for .js, .css or other text files, you're actually going to take more time and server resources to handle the back-and-forth negotiation for these requests than you will with only one request and a larger download. Two or three probably won't make a significant difference, but it can add up quickly.

That's also what's behind the concept of using css sprites for backgrounds rather than individual images.

http://developer.yahoo.com/performance/rules.html [ed. note: sottwell last edited this post 14 years, 8 months ago.]