Hello everyone,
I would like to announce a new block that I have created and added to Modules and plugins repository.
The CSS theme tool block.
This block is written specifically for Moodle 2.0 and allows the user to add CSS to a page on the fly.
It features a point and click method of adding CSS to a page (click where you want to style), a WYSIWYG CSS editor, AJAX backend to save your styles without a refresh, and the ability to export the styles you create as a CSS file that you can add to a theme, plus much more...
For more information on this block check out the doc, it is a work in progress however I have already started it and it provides some immediate information and screenshots.
http://docs.moodle.org/en/CSS_theme_tool_block
The block can of course be downloaded from the modules and plugins database.
http://moodle.org/mod/data/view.php?d=13&rid=3932
However before using please read the doc for instructions.
This block is something that I have written to aid my work on the theme's and I have been using it to do so whilst I have been developing it. It may be a little rough but I like it and I hope you will too.
I should warn anyone who cares to attempt to use this block that it is still (relatively) in its early stages and there are some limitations, worth mentioning is that it doesn't work on IE... when they support standards my block will work.
I would GREATLY appreciate any feedback you may have.
If you would like to help me out or file bugs feel free to do so, the main contrib issue is CONTRIB-1984. You can also check out that issue to see my plans for this block.
The final thing that I will say is that as Moodle 2.0 is still changing regularly at the moment this block may break and need updating... I will endeavour to fix these errors as they occur.
Cheers
Sam
You guys really need to check this out, it's phenomenal bit of work. Nice one Sam!
Getting to know about this kind of stuff is, for me, like being at the cutting edge! You are so sharp Sam! Excellent work!
BTW I love this line...
PS: Can someone, Martin?, authorise this soon, as I want to have a play!
Mary
BTW I love this line...
"...I should warn anyone who cares to attempt to use this block that it is still (relatively) in its early stages and there are some limitations, worth mentioning is that it doesn't work on IE... when they support standards my block will work..."
PS: Can someone, Martin?, authorise this soon, as I want to have a play!
Mary
Whoops, it was authorised but I added a link to this discussion to it which must have been enough to remove that authorisation.
I'll get an admin to do that ASAP sorry.
Cheers
Sam
I'll get an admin to do that ASAP sorry.
Cheers
Sam
It's authorised now
Really good work, Sam.
Hi Mary,
Haha sorry about that one.
Petr finished off the File API and tweaked the requirements for blocks a couple of days ago, essentially breaking any contrib modules already created.
I commit fixes to both issues yesterday for the tool, if you have checked the CSS theme tool out from CVS you can update it to get the latest version, otherwise the download from the modules and plugins database should be updated shortly (it rebuilds first thing every morning).
Cheers
Sam
P.S. The theme looks nice
Haha sorry about that one.
Petr finished off the File API and tweaked the requirements for blocks a couple of days ago, essentially breaking any contrib modules already created.
I commit fixes to both issues yesterday for the tool, if you have checked the CSS theme tool out from CVS you can update it to get the latest version, otherwise the download from the modules and plugins database should be updated shortly (it rebuilds first thing every morning).
Cheers
Sam
P.S. The theme looks nice
Hi Sam,
I update Moodle 2.0 via CVS, but I don't know how to get your plugin to update the same way. It was easy setting up CVS using Turtle or whatever the software is called, but I haven't got a clue how to set-up so that the plug-in updates too. Could you give me some easy to follow instructions?
The theme is my Flower Power theme which I've been working on. I've created a parent theme for it called Base-Percent as the theme is based on the Holy Grail percent layout and works differently to Moodle Base theme. I'm running out of time for the competition, but hopefully will got it finished today. There is so much to tweak to get each page working correctly, sometime I feel I haven't got a clue what I'm doing, but i am sure we all have days like that!
The CSS-Theme-Tool, by the way, works really well and has helped me quite a lot, but lately I was finding that a menu box would pop-up quite randomly with setting for rounded corners (see screenshot). I had, in a previous attempt, tried to select rounded corners, but nothing happened, but up to yesterday, before I removed the plug-in folder from the blocks folder, the rounded-corners pop-up box kept appearing at the oddest of times.
In the screenshot you can see I had just clicked on the 'site topic' edit icon, if you look closely it's selected, but you can also see the rounded-corners menu popped up as well! Is this a CSS-Theme-Tool BUG?
Mary
I update Moodle 2.0 via CVS, but I don't know how to get your plugin to update the same way. It was easy setting up CVS using Turtle or whatever the software is called, but I haven't got a clue how to set-up so that the plug-in updates too. Could you give me some easy to follow instructions?
The theme is my Flower Power theme which I've been working on. I've created a parent theme for it called Base-Percent as the theme is based on the Holy Grail percent layout and works differently to Moodle Base theme. I'm running out of time for the competition, but hopefully will got it finished today. There is so much to tweak to get each page working correctly, sometime I feel I haven't got a clue what I'm doing, but i am sure we all have days like that!
The CSS-Theme-Tool, by the way, works really well and has helped me quite a lot, but lately I was finding that a menu box would pop-up quite randomly with setting for rounded corners (see screenshot). I had, in a previous attempt, tried to select rounded corners, but nothing happened, but up to yesterday, before I removed the plug-in folder from the blocks folder, the rounded-corners pop-up box kept appearing at the oddest of times.
In the screenshot you can see I had just clicked on the 'site topic' edit icon, if you look closely it's selected, but you can also see the rounded-corners menu popped up as well! Is this a CSS-Theme-Tool BUG?
Mary
Hi Mary,
Thanks for letting me know about that one Mary, it is certainly a bug within the block.
I've just created CONTRIB-2198 which I will use to track+resolve the issue, hopefully in the next day or two.
As for the instructions on CVS + CONTRIB, I had a quick look in the docs but the instructions I did find http://docs.moodle.org/en/CVS_for_Administrators#From_a_Windows_computer mention contrib only generally, and while you can checkout the whole of contrib I'm betting that's not what you'd want to do.
Unfortunately I'm not familiar enough with Tortoise to write you some instructions presently but if I find myself with a bit of free time I'll endeavour to have a play.
Cheers
Sam
Thanks for letting me know about that one Mary, it is certainly a bug within the block.
I've just created CONTRIB-2198 which I will use to track+resolve the issue, hopefully in the next day or two.
As for the instructions on CVS + CONTRIB, I had a quick look in the docs but the instructions I did find http://docs.moodle.org/en/CVS_for_Administrators#From_a_Windows_computer mention contrib only generally, and while you can checkout the whole of contrib I'm betting that's not what you'd want to do.
Unfortunately I'm not familiar enough with Tortoise to write you some instructions presently but if I find myself with a bit of free time I'll endeavour to have a play.
Cheers
Sam
Hi Sam,
Please don't worry over, or loose precious time with the CVS issue, it's just as easy for me to check how your updates are doing and, if need be, download an updated copy of the CSS-Theme-Tool plugin.
As for the 'bug', glad I spotted it!
Thanks
Mary
Please don't worry over, or loose precious time with the CVS issue, it's just as easy for me to check how your updates are doing and, if need be, download an updated copy of the CSS-Theme-Tool plugin.
As for the 'bug', glad I spotted it!
Thanks
Mary
Great work Sam!!
This is nice tool Sam! Thanks.
I tried it with a few themes and I always see the: "Your theme does not support the use of external CSS from this tool" message. Do ANY current themes support the use of external CSS from this tool?
Hi Luis,
Sorry for the late reply, and thanks for PM'ing me regarding this thread.
The tool attempts to load the customised CSS you have created within the page head, however normally the blocks arn't initialised until the head is being printed at which point it is too late to insert another stylesheet. When this happens you will see the noted message 'Your theme does not support the use of external CSS from this tool' although I do admit that the message could certainly be clearer!
If the tool can't insert CSS immediately into the page head it does so through JS, this of course isn't idea because if JavaScript isn't enabled you won't see the changes you have made.
It's been a while since I have played with the CSS theme tool but having just had a look at that area it looks like the way I had intended for it to be achieved is no longer possible because of recent refactoring.
I've created CONTRIB-2749 and I already have a potential solution in mind so hopefully I will find a bit of time to look into that shortly.
Cheers
Sam
Sorry for the late reply, and thanks for PM'ing me regarding this thread.
The tool attempts to load the customised CSS you have created within the page head, however normally the blocks arn't initialised until the head is being printed at which point it is too late to insert another stylesheet. When this happens you will see the noted message 'Your theme does not support the use of external CSS from this tool' although I do admit that the message could certainly be clearer!
If the tool can't insert CSS immediately into the page head it does so through JS, this of course isn't idea because if JavaScript isn't enabled you won't see the changes you have made.
It's been a while since I have played with the CSS theme tool but having just had a look at that area it looks like the way I had intended for it to be achieved is no longer possible because of recent refactoring.
I've created CONTRIB-2749 and I already have a potential solution in mind so hopefully I will find a bit of time to look into that shortly.
Cheers
Sam
Thanks for the feedback Sam.
Hi, after reading this I realy wanted to try this, so I down loaded it, and instaled it. Then went on to my side as admin, as I wanted to login it said that my login was incorect. so I asked for a new login, recived a mail, tryed again.
I could go in - BUT NOT AS ADMIN!!!! IM LOOCKED OUT OF MY SIDE!
Im using moodle 2.0.1+ (Build: 20110125) and the theme Creatif.
Any idea how I get back my full Admin rights??
Thanks!
Beat
Sam,
Are you still developing this plugin?
Does it work alongside or inplace of the theme settings pages and the custom css there?
Would it be possible to rework the plug-in to be suitable for 1.9 themes?
Richard
Hi Richard,
In reply to your question:
1. I havn't touched this plugin in a while now, if you spot any bugs don't hesitate to let me know and I'll look into them. I have been so busy with the release of Moodle 2.0 + changes of procedure here at HQ that I haven't had a chance to work on it further.
2. Because of the way in which CSS gets included within the page this tool should be able to override the styles added by theme's and their settings pages if rules with the same CSS selector exist. However to be sure that the rules will apply in the way you desire I would recommend making the selector as specific as possible. At the end of the day the CSS this tool generates is just written to a stylesheet that is attached as the final stylesheet in the page head.
3. Backporting it to Moodle 1.9 would of course be possible, however most things are possible given enough time and I imagine it would take a bit of time.
The PHP code for the block isn't too complex and at a glance I can't see anything that couldn't be backported to 1.9 easily.
The JS on the other hand would be much harder. It uses YUI3 and Moodle 1.9 only supports YUI2.8 which would mean you would need to include YUI3 within the block. You'd then have to load the it into the page (likely in PHP) and create some PHP that injects an initialisation routine into the page.
Once thats done it shouldn't be too hard. I don't think the tool uses many JS functions from javascript-static.php although it would still need to be checked.
I personally don't have any plans or desire to do it myself, however if you are keen I'd be more than happy to provide help.
Cheers
Sam
In reply to your question:
1. I havn't touched this plugin in a while now, if you spot any bugs don't hesitate to let me know and I'll look into them. I have been so busy with the release of Moodle 2.0 + changes of procedure here at HQ that I haven't had a chance to work on it further.
2. Because of the way in which CSS gets included within the page this tool should be able to override the styles added by theme's and their settings pages if rules with the same CSS selector exist. However to be sure that the rules will apply in the way you desire I would recommend making the selector as specific as possible. At the end of the day the CSS this tool generates is just written to a stylesheet that is attached as the final stylesheet in the page head.
3. Backporting it to Moodle 1.9 would of course be possible, however most things are possible given enough time and I imagine it would take a bit of time.
The PHP code for the block isn't too complex and at a glance I can't see anything that couldn't be backported to 1.9 easily.
The JS on the other hand would be much harder. It uses YUI3 and Moodle 1.9 only supports YUI2.8 which would mean you would need to include YUI3 within the block. You'd then have to load the it into the page (likely in PHP) and create some PHP that injects an initialisation routine into the page.
Once thats done it shouldn't be too hard. I don't think the tool uses many JS functions from javascript-static.php although it would still need to be checked.
I personally don't have any plans or desire to do it myself, however if you are keen I'd be more than happy to provide help.
Cheers
Sam
Where did you install this plugin?
It shouldn't have affected your Admin login.
How many User ID's have you to the site?
Hi Mary
Thanks for answering!
I installed it over the server in to the folder blocks.
I've aprox 150 User Id's.
Mabee its wrong to say that I cant login as admin user. I can. I just do not see the admin user navigation, as I would not have the premission any more.
regards
beat
Hi Beat,
Assuming the block is responsible for this it sounds like one of three things are going on.
1) There is a JavaScript error that is causing some display issue. Its pretty rare that JS causing a display meltdown like you are describing, but it is possible. Most browsers inform you if there is a JavaScript error, IE puts a little caution sign in the bottom left, and Firefox puts a red warning sign in the bottom right. Do you see any JS errors?
2) The actual HTML of the block is causing the problem. Given that you've lost the admin menu the best way to determine that this is the problem is to disable the block. In your browser head to http://yoursite.local/admin/blocks.php where yoursite.local is of course the URL to your site. There you should be able to hide the CSS theme tool, or delete it if you so choose.
If you get a permission denied error there then you have a bigger problem, let me know and I'll point you in the right direction.
3) A CSS rule has been created that is hiding important parts of the admin block. Of course it is possible that you of someone else using the block created a rule to hide a part of the page but didn't make the ids/classes specific enough. Following the steps above to disable the block should make it obvious if this is the case. If so then you need either need to read through the rules you have created carefully and look for any offending rules, or alternatively delete all your rules and start again.
Hope this helps, let me know how you get along.
Cheers
Sam
Assuming the block is responsible for this it sounds like one of three things are going on.
1) There is a JavaScript error that is causing some display issue. Its pretty rare that JS causing a display meltdown like you are describing, but it is possible. Most browsers inform you if there is a JavaScript error, IE puts a little caution sign in the bottom left, and Firefox puts a red warning sign in the bottom right. Do you see any JS errors?
2) The actual HTML of the block is causing the problem. Given that you've lost the admin menu the best way to determine that this is the problem is to disable the block. In your browser head to http://yoursite.local/admin/blocks.php where yoursite.local is of course the URL to your site. There you should be able to hide the CSS theme tool, or delete it if you so choose.
If you get a permission denied error there then you have a bigger problem, let me know and I'll point you in the right direction.
3) A CSS rule has been created that is hiding important parts of the admin block. Of course it is possible that you of someone else using the block created a rule to hide a part of the page but didn't make the ids/classes specific enough. Following the steps above to disable the block should make it obvious if this is the case. If so then you need either need to read through the rules you have created carefully and look for any offending rules, or alternatively delete all your rules and start again.
Hope this helps, let me know how you get along.
Cheers
Sam
In reply to Sam Hemelryk
CSS theme tool block "not accepted, only visible by admins"
by fleu risseur -
Hello Team
Great job, but I am probably still very ignorant...
1) whatever the THEME installed, I receive "not accepted, only visible by admins".
So may I launch into production , or the modified CSS rules are useless ?
2) one of the basic needs it is "get rid from this div" (for example "Moodle community", any sort of adverts.
How can select the div to say it must "disappear for ever" ?
3) when i select an element (for example a button, a menu) I want in fact access to a child element (for example the text of the button, or the child 3 of menu 4) ; how must O do it ?
4) very politely, a "side-question" : how may a add a JQUERY SCRIPT to an element ?
for example "on hover do this, on click do that"
The jquery itself could bring a "complex animation"
thanks a lot
fleurisseur@gmail.com
In reply to fleu risseur
Re: CSS theme tool block "not accepted, only visible by admins"
by Mary Evans -
Hi,
All the Tutorials you need to learn about Moodle Themes can be found HERE
jQuery tutorial is HERE
Hope this helps?
Cheers
Mary