Theme Designer Mode

Theme Designer Mode

by volkan çakırlı -
Number of replies: 31

Hello,

When themedesignermode is enabled, theme of the my site looks normal but when it is disabled, all the style disapper and site looks like a simple html structure page.  Is it about the caching the css files on the server? And how can i solve this?

Thank you...

thdepr

Average of ratings: -
In reply to volkan çakırlı

Re: Theme Designer Mode

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Volkan,

If you are sure your theme works in Designer Mode but not when this is turned off, then one option to try would be switch theme to your new theme when Designer Mode is off, then purge all caches - see image attached.

The other option to test everything is working properly is to make sure that the setting to change themes by adding the theme to the url is enabled, then go back to a basic theme like Standard to ensure everything is OK and test your new theme by adding it to the url of the site (http://yoursite.com/?theme=yourthemename). If this does not work, then the problem is likely to be in the theme itself.

From what you have said, purge all caches seems to be the most likely

 

HTH

Richard

Attachment Screenshot-1.png
In reply to Richard Oelmann

Re: Theme Designer Mode

by John St -

Are you using any theme specific javascript in your new theme? I recently came across an issue where javascript I was using worked fine with theme designer mode turned on, but once turned off, the same javascript caused the minifier to fail and not write the files to cache.

In reply to John St

Re: Theme Designer Mode

by Susmita Dhar -

Hi John,

     I'm facing same problem, when theme designer mode on slider worked well in moodle 2.6 but when it is off slider not show and not working also.I'm using ('responsiveslides.min','slide2','jquery') in my bootstrap theme. please help me

In reply to volkan çakırlı

Re: Theme Designer Mode

by volkan çakırlı -

Thanks for your replies. That's very kind of you.

I found that, somehow styles.php file is missing in the theme folder ( i think i had deleted it accidently smile) . I added this file to the theme folder and now everything is ok.

Thanks again. (Sory for english)

In reply to volkan çakırlı

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

In moodle 2.0 there is no styles.php

In reply to Mary Evans

Re: Theme Designer Mode

by volkan çakırlı -

I am a newbie, so may be i am wrong but there is a styles.php file in the moodle-2.0.zip package.

theme folder1

In reply to volkan çakırlı

Re: Theme Designer Mode

by Hartmut Scherer -

Hi all,

I experienced a similar problem. When designer mode is on the theme is okay.

Designer Mode ON

When I switch to designer mode off, the background color and gradient is gone.

Designer Mode off

I followed Richard's advice with switching themes and purging, but this was of no avail. Is there any other advice what I could try out? Any help is appreciated.

With kind regards,

Hartmut

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Hartmut,

This sounds very odd. The image must be there, or else you would not have seen it. And it can't  be a permissions problem else the image would not have shown up in the first place. However, it may be that the page you are viewing without the image is one of two areas eg. frontpage.php or general.php. I have sometimes coded one page with the header image and forgot to change the second file. And moving from one area to another one does not notice until you see something is not right. More often than not I forget to update the frontpage.php, but in your case this all depends on who is doing the styling, and of course if THIS is the problem!

Without seeing your website...I'm at a loss to suggest what the cause might be.

Mary

In reply to Mary Evans

Re: Theme Designer Mode

by Hartmut Scherer -

Hi Mary,

Thank you for your detailed answer. The address of the web site is:

http://test-200.pibc-edu.com/moodle200t/

I am using the Krystle theme and started changing it from blue to green. I couldn't find a frontpage.php or general.php in Krystle. I will send you the login details.

With kind regards,

Hartmut

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Hartmut,

The file you are looking for is called default.php in the layout folder of Krystle. If you are simply replacing the image that is already in the pix folder in Krystle, then I can't think why it would not show up - I have not had this problem.

I presume you have fixed this Hartmut? I am seeing the page as your 'ok' image in your previous post. I'm using firefox to view.

Richard

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I can't even get the site to open. It's timing out every time I have tried today! But I'll keep trying...as the server would say! LOL

Mary

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hartmut,

The problem stems from YUI-combo.php (might have file name wrong but its similar) this combines 4 YUI CSS files (cssreset/reset-min.css) + (cssgrids/grids-min.css) + (cssbase/base-min.css) + cssfonts/fonts-min.css)

Mashes them up together and breaks your theme!

You need to redo the shorthand html {background: color image position repeat }

to longhand like so...

html {
background-image: urltheme:core/overlay) !important;
background-color: darkgreen !important;
background-repeat: no-repeat !important;
background-position: 50% 10% !important;
}

Otherwise it will get wiped out by the YUI css

You might actually be better adding it into the body instead of html

HTH

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Theme Designer Mode

by Hartmut Scherer -

Hi Mary,

Thanks a lot for your fast and extensive answer. I highly appreciate your effort to help me. Through your answer I also learned that there is a difference between "shorthand" and "longhand" code. Now I still need to change the code accordingly.

With kind regards,

Hartmut

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Hartmut Scherer -

Hi Mary,

Hi Richard,

The revised Krystle theme displays correctly now. The difference between shorthand and longhand  coding seems to be significant when a combination of 4 YUI CSS files is used. I highly recommend changing the original Krystle theme to longhand as well.

I am not a developer nor a coder at all. I also have no idea about YUI nor the new feature designer mode. In the Moodle forums I enjoy how people contribute and share their knowledge. This is how I learned a lot about Moodle.

What I mentioned above that switching the designer mode from on to off led to a wrong display, is only half of the story. The same action also successfully blocked my access (e.g., 180 concurrent connections or more instead of 20) to our shared server numerous times. The people at TMDHosting have been extremely patient and kind with me and allowed me to continue. I am not sure whether all shared host server companies are so gracious.

I like the Krystle theme and I hope to use it when we upgrade to Moodle 2.x.x this summer. Thanks for all your help.

With kind regards,

Hartmut

In reply to Hartmut Scherer

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You're welcome! Thank you for trusting me with the admin settings on your site!

You have a lovely website and the Krystal theme works wonderfully well there.

Kind regards and thanks from Richard and myself.
Mary

In reply to volkan çakırlı

Re: Theme Designer Mode

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Volkan,

The styles.php you have circled is not where you change any of the css code for a given theme - it is part of the coding that helps all themes work rather than the styles for a theme.

To change the styles for a particular theme you need to go into that styles folder inside that theme's folder. There you will find the .css files you need to alter the look of the theme. Make your changes in the relevant css file there.

Richard

In reply to volkan çakırlı

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Volkan,

I was assuming you were talking about styles.php in yout custom theme folder. Yes there is a styles.php in the theme's folder, but how did you manage to delete it?  It is not something one would do by accident unless you were deleting other files in that area...which still seems unlikly.

A general rule is NEVER change or amend Moodle System files, without first knowing what you are doing.

I trust now that you have put styles.php back all is working as it should?

Thanks for letting me know.

Regards

Mary

In reply to Mary Evans

Re: Theme Designer Mode

by volkan çakırlı -

Thanks for your interest..

I know, i should not delete or change this file.

So i should explain my story. i have extracted a .zip file to the theme folder by using cPanel- File manager, but so many seperate files have extracted, but i was supposing a folder. So i have deleted these extracted files. And story goes on tragically smile

And yes, it works fine when i put styles.php to the theme folder. I know It is not a common user error but it has happened smile

Thanks again.

In reply to volkan çakırlı

Re: Theme Designer Mode

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Volkan,

The way the theme is packed, if you have uploaded the theme as it was downloaded, it should definitley have extracted into its own folder and not all separate files. If you have been using it on your local computer before uploading it to your web host, then make sure that you compress the entire folder (usually by selecting the folder from in themes) rather than compressing the contents of the folder (by selecting them from inside the 'krystle' folder for example)

Richard

In reply to Richard Oelmann

Re: Theme Designer Mode

by volkan çakırlı -

Thanks Richard,

You are right,  it was my fault, i was playing around the files to learn. I have not uploaded the theme as it was downloaded.

Volkan

In reply to volkan çakırlı

Re: Theme Designer Mode

by Mike Holzer -

Thanks Mary! After reading your post I decided to validate my CSS and sure enough I had a stray apostrophe somewhere that was borking the CSS caching.

In reply to Mike Holzer

Re: Theme Designer Mode

by Marc Hermon -

Just thought I would post here about my recent problems. All of a sudden my moodle site started doing the same things mentioned in this thread. I found that with Designer Mode off my site lost all of its CSS but displayed normally with it on. I racked my brain trying to think what I had been doing before this all happened and I was playing with a style sheet in one of the modules.  I ran the .css style sheet through the online validator at http://jigsaw.w3.org/css-validator and found I was missing a single closing curly bracket. All I know is I put the curly bracket back in, uploaded it to our server and turned designer mode back off and moodle displayed normally again….so I assume that was it. Scary that a single curly bracket would break the whole site though.

In reply to Marc Hermon

Re: Theme Designer Mode

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Marc,

That's the way with code though smile If you don't get it right, it can break everything else! The real question is how did it manage to work with designer mode enabled as the error was still there thoughtful

Glad you found the issue though smile

Richard

In reply to Richard Oelmann

Re: Theme Designer Mode

by Mark Aberdour -

I had this issue just from switching between themes in a standard Moodle 2.5 with no custom theme work at all. 

Navigate to Home / Site administration / Server / HTTP and set Use slash arguments to OFF

This fixed the problem.

Average of ratings: Useful (1)
In reply to Mark Aberdour

Re: Theme Designer Mode

by Jon Jack -

I just had a similar issue with designer mode working ok, but when switched off it was broken.  I thought it was a javascript error in theme but it was actually nothing to do with the theme. in Site administration > Development > Experimental > Experimental settings we had "Enable CSS optimiser" enabled which was causing havoc with our theme (and other themes, afterburner for example)

In reply to Jon Jack

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

That is why it is experimental.  I don't think any of us even bother using that setting when testing. Personally I think it is a waste of time adding it in the first place. It is disabled in Bootstrap theme as the CSS is already optimised.

In reply to Mary Evans

Re: Theme Designer Mode

by Jon Jack -

I didn't even know it was on, and I could not understand why my localhost version looked ok but on the dev site it was broken. I was really just highlighting this in case someone else has issues with theme designer mode breaking when switched on and off. It would have saved me a few hours of investigating at least smile

In reply to Jon Jack

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

That's OK, I totally understand your comment, I was just giving my opinion about something I think we can do without! It does break a lot of themes, so you are right to warn people. Thanks for that.

Cheers

Mary

In reply to Mary Evans

Re: Theme Designer Mode

by Johnny Lo -

I wish I found this thread three days earlier, would have saved hours of redownload and reinstallation, thinking downloads are corrupted. What I'm trying to say is, Thanks for giving your knowledge for free. You guys are awesome.

In reply to Johnny Lo

Re: Theme Designer Mode

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I forgot about that setting!  A real recipe for disaster!

So glad you got it fixed.

cheers!

Mary