Theme Asset Not working In CakePHP 2.2.4

Question

I have seen many questions regarding linking to theme assets in CakePHP and none of them are resolving my issue and also the most recent post was in 2012 so I thought I'd float my question out there.

I have implemented themes in my CakePHP 2.2.4 application. My theme called "default" (previously called "Default" up until 1 minute ago) is located at app/View/Themed/default (previously the theme name had a corresponding capital D for the folder name as well).

My css file is located at app/View/Themed/default/webroot/css/style.css which I call in app/View/Themed/default/Layouts/default.ctp with the following code

Default.ctp layout

echo $this->Html->css('style');

(I have tried using capital W for webroot "just in case" but no surprise that didn't work)

I have included this link in my AppController to establish what theme I am using. All the view files point to the correct theme but the issue right now is with the stylesheet (I have yet to mess with other assets such as js or image files).

AppController

class AppController extends Controller {

    public $theme = 'default'; // previously 'Default'
    // also, have used both 'public $theme' and 'var $theme', no difference

I have read the following questions and none of the "solutions" have worked. Most of the solutions were to check spelling/capitalization, check permissions on the folders, check my .htaccess file, etc. Still nothing. And new ideas?

.htaccess

<IfModule mod_rewrite.c>
   RewriteEngine on
   RewriteRule    ^$ app/webroot/    [L]
   RewriteRule    (.*) app/webroot/$1 [L]
</IfModule>

The folder permission for the theme webroot and css folders are 755.

Here are some resources I used with no luck.

http://book.cakephp.org/2.0/en/views/themes.html

CakePHP theme resources return error

Unable to get css and image files in Themes webroot folder of cakephp

https://groups.google.com/forum/#!topic/cake-php/xaRAugMoNSc

CakePHP 2.x theme not working

https://groups.google.com/forum/#!topic/cake-php/siYVWchUb1g

UPDATE: using $this->Html->image('image.jpg') correctly displays the defined image located at View/Themed/Default/webroot/img/image.jpg. However, using $this->Html->css('style') tries to pull the stylesheet from app/webroot/css/style.css and not from app/View/Themed/Default/webroot/css/style.css. I also had to the change the theme name and folder name of my theme back to "Default" with an uppercase D in order to get the image to link correctly. The stylesheet still does not link correctly. If I navigate directly to my theme stylesheet in my browser, a blank page appears. If I navigate to a style sheet that doesn't exists in my theme folder then I get the proper error message. However, viewing the source of my theme stylesheet (the one that does exist), shows a blank page.

Heimer

Answer 1

Ok so perhaps this is obvious...but my stylesheet uses functions I have created in a custom Helper. When the stylesheet is located in app/webroot/css, there is no issue, but when the stylesheet is located in app/View/Themed/Default/webroot/css it can't display properly and therefore Cake links to the non-existent stylesheet supposed to be located in app/webroot/css. I have removed the helpers from my theme stylesheet and it all works now.

I have also reverted the theme name from "default" to "Default" in order for the images to display properly using $this->Html->image (and presumably the stylesheet and JS files as well) even though the view files were linked correctly regardless of the capitalization.

Heimer

Answer 2

CakePHP use CamelCase convention. Try changing the name of your theme from eg. default to Default. It happened to me too.

My theme was naming as megaecia, and no error message, no log nothing (because i was windows, in unix it don't happen) then i changed to Megaecia and everything works successfully.

Hope i helped.

Squaw

there is no difference whether I use "default" or "Default" as the theme name. UPDATE: using $this->Html->image('image.jpg') correctly displays the defined image located at View/Themed/Default/webroot/img/image.jpg. However, using $this->Html->css('style') tries to pull the stylesheet from app/webroot/css/style.css and not from app/View/Themed/Default/webroot/css/style.css – Heimer

That's it! CakePHP expects folder to be named with CamelCase, regardless theme name specified with lowerletters in the controller. – Bondie

Exactly what Serge says, if you have your theme directory in lowercase, just capitalize it and it will work – Foolish

Note: This CamelCase convention for folder's name only apply to UNIX. – Squaw

Answer 3

Asset files of the theme have to be placed in app/webroot/theme folder this way:

app/webroot/theme/default/css
app/webroot/theme/default/js
app/webroot/theme/default/img
. . .

Where default is theme name starting with lowercase letter. Folder name theme is hardcoded. Note, there is no -ed suffix.

Theme layouts should be placed in app/View/Themed/Default/Layouts folder. Theme name should respect CamelCase rule as Gabriel Oak answered. Actually I had the issue when on linux machine CakePhp was unable to find my layout because I named my theme folder with lowercase like app/View/Themed/default/Layouts.

And one more thing: in the controller theme should be specified also with lowercase: $this->theme = 'default';. It affects assets lookup, since we placed our assets in lowercase folder app/webroot/theme/default.

Bondie

Answer 4

If you are trying to access a CSS resource from a sub directory of your theme's webroot, be sure to add a / at the beginning.

i.e.

$this->Html->css('/plugins/bespoke.css'); 

This will call the CSS from the theme directory.

if you did not add / at the beginning, cake will not look for the theme folder, instead it tries to load the CSS from your app's default webroot directory

Eyeglasses