Drupal Custom Theme Missing CSS

Question

I am getting a Drupal site to work on my localhost. Currently, it seems to output some content (database is working) but nothing is styled.

When I look in the source-code, I see this:

 <link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="screen" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="print" />
<link type="text/css" rel="stylesheet" href="http://localhost:88/sites/MAA/" media="all" />
  <script type="text/javascript" src="http://localhost:88/sites/MAA/sites/all/modules/jquery_update/replace/jquery/1.8/jquery.min.js?v=1.8.3"></script>

That is, the template's CSS are not being included, except for the path part to the site. Now, the .info file is as follows:

; Stylesheets. Anything within the "framework" folder will be placed before all others.
stylesheets[all][] = styles/framework/reset.css
stylesheets[all][] = styles/framework/text.css
stylesheets[all][] = styles/framework/960.css
stylesheets[all][] = styles/framework/debug.css
stylesheets[all][] = styles/css/css_hides.css

; Theme specific styles. Any sub-themes should override this.
stylesheets[all][] = styles/skin.css
stylesheets[all][] = styles/maa.css
stylesheets[all][] = styles/maa-legacy.css
stylesheets[all][] = styles/jq-ui-date-range-picker/ui.daterangepicker.css
stylesheets[all][] = styles/styles_nvl.css
stylesheets[all][] = styles/css_hides.css
stylesheets[print][] = styles/print.css

; Theme specific scripts.
scripts[] = "js/enlargeit.js"
scripts[] = "js/jquery-ui.js"
scripts[] = "js/custom.js"

regions[page_top]              = Page top
regions[header]                = Header
regions[search_box]            = Search Box
regions[main_nav]              = Main Navigation
regions[highlighted]           = Highlight
regions[featured]              = Featured
regions[help]                  = Help
regions[home_content]          = Home Content
regions[home_content_bottom]   = Home Content Bottom
regions[content]               = Content
regions[sidebar_first]         = Left sidebar
regions[sidebar_second]        = Right sidebar
regions[footer_top]            = Footer Top
regions[footer_top_left]       = Footer Top Left
regions[footer_top_center_one] = Footer Top Center 1
regions[footer_top_center_two] = Footer Top Center 2
regions[footer_top_right]      = Footer Top Right
regions[footer_left]           = Footer Left
regions[footer_right]          = Footer Right
regions[page_bottom]           = Page bottom

Could anyone tell where I should look to troubleshoot this? Inside the html.tpl.php file, there is a line that outputs styles, but I cannot find where it is populated.

 <?php print $styles; ?>
 <?php print $scripts; ?>

Answer 1

Step number one in solving any Drupal problem: Have you tried clearing the cache? (It's the Drupal equivalent of "Have you tried turning it off and back on again?")

How to clear the cache: If you are logged into the site as an administrator, go to Configuration > Development > Performance. You should see a "Clear All Caches" button.

If that doesn't work: Have you checked out the Drupal docs? https://www.drupal.org/node/171209

What happens if you aggregate and compress CSS files (a setting in Configuration > Development > Performance)?

Answer 2

I just encountered this issue when cloning a site from production onto my local machine. Production and staging environments were fine, so I started troubleshooting my machine.

The prior answers are definitely good places to start when encountering this specific issue. However, the real culprit seems to be how Drupal uses the filesystem when registering the style sheets.

Generally speaking, your html.tpl.php file will have a $styles variable. This is a string that is output and contains all the style sheets you register in your theme's .info file. You may or may not have a preprocess hook altering your css files in your template.php file.

After tracing all of this back and confirming that it was correct, running a system status report will help you identify areas that you need to address. In this specific scenario it was a Drupal 7 site using the ctools module. Browsing to /admin/reports/status after logging in revealed that ctools could not create the right directory in /sites/default/files/ctools/ .

The result was that Drupal would remove the URI's from my style sheets if it could not create this directory. The data driving the output for each stylesheet is coming from your .info and any preprocess functions that add css.

I hope this helps anyone else that has encountered this problem and is left scratching their head.