CSS Breaking When Turning Off 'Theme Designer Mode'

CSS Breaking When Turning Off 'Theme Designer Mode'

by Dustin Hein -
Number of replies: 6

Hello Moodle People tongueout Possible stupid theme dev related question here, but I've been struggling with it for a bit now and thought it might not hurt to reach out to people who may have encountered the same issue.

I have been working on a theme for Moodle 2.5 on a development server. Before installing on a live site, I wanted to test and troubleshoot the installation on another development environment with theme designer mode turned off.

For the most part things are working just fine. The only trouble I am experiencing is with some social media icons, which are being used as CSS backgrounds for block level <a> tags. When theme designer mode is enabled, these icons display just fine using what I would consider to be a conventional file path (eg. www.mysite.com/moodle/theme/mytheme/pix/icon_facebook.png)

In the CSS file, the image is called as a background like this:

#page-footer .social-icons li a.facebook {background:url(mytheme/pix/icon_facebook.png) 0 0 no-repeat;}

Again, in theme designer mode this is perfectly fine. However, as soon as I disable this setting, Moodle does it's optimization magic, and changes the path to my background images to something like this - www.mysite.com/moodle/theme/styles.php/mytheme/1397050976/mytheme/pix/icon_facebook.png

The browser can't find this file, and I am given a blank area in place of what would normally have been a social media icon.

Any quick and easy solution to this? I'm sure it's something simple that I just haven't tried... Cheers.

Average of ratings: -
In reply to Dustin Hein

Re: CSS Breaking When Turning Off 'Theme Designer Mode'

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Dustin,

Please read the documentation: http://docs.moodle.org/dev/Using_images_in_a_theme.

Cheers,

Gareth

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: CSS Breaking When Turning Off 'Theme Designer Mode'

by Rajnish Rao -

@Gareth J Barnard

I am facing a bit similar issue. I am using bootstrap 3 based elegance theme but it's not working, when theme designer mode is of.

Thanks,
Rajnish.

In reply to Rajnish Rao

Re: CSS Breaking When Turning Off 'Theme Designer Mode'

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Ranjnish,

I can see from your other post: https://moodle.org/mod/forum/discuss.php?d=258605.

Could you see if there are any errors in the 'Network' tab of the browser developer tools please.  Such as not being able to read the 'all' CSS styles.  Does the issue occur in other themes on the same setup?

Is there anything in the php.log file?

Cheers,

Gareth

In reply to Gareth J Barnard

Re: CSS Breaking When Turning Off 'Theme Designer Mode'

by Yousuf Tafhim -
Im having the same issue.
On network tab im geting this
"Failed to load resource: net::ERR_CONNECTION_RESETlocalhost/projects/moodle/theme/styles.php/elegance/1401271970/all
In reply to Yousuf Tafhim

Re: CSS Breaking When Turning Off 'Theme Designer Mode'

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

This has to be 'styles.php' etc. failing to create the cached and compressed version of the CSS in one file.  It fails to make it and hence the file does not exist.  Is there anything in the PHP log files with developer level debugging?  Does it only happen with certain themes?  If so, list them here so that perhaps a common cause can be found.