PLEASE NOTE: I’ve just updated the download files again, Nov 30th. It should work with Moodle 2’s official stable release, which was downloadable from the 24th Nov from Moodle.org. There may be some further glitches that I haven’t seen, so please feel free to leave a comment if so.
I’ve just designed a theme for Moodle 2, and I’m entering it in to a theme comp ran by New School Learning. Pretty exciting really, the process of making the theme was really fun, except the bugs in IE of course, haha!
My theme, called créatif, is a mood theme I reckon. The randomised back drops will feature faded photographs (mostly beautiful landscapes), and I’m trying to get a really nice pleasant visual experience happening.
Technically the first draft is fairly okay – I would have liked to have made use of renderers to completely overhaul a lot of the un-needed html and css classes that moodle is bogged down by, but time permitted me from doing it for this version of the theme.
I think the big thing to improve next version (ver 2) of this theme, along with renderers and more effective css will be:
- to allow teachers to add their own imagery for the backgrounds for ‘their courses’ – pictures that are course specific for them for example. It would use these instead of the pre-packaged ones I’ve got in the pix directory;
- I’d also like to make it work 100% drag-and-drop with jQuery’s theme roller.. So in other words, you simply design your jQuery theme roller and drop it in to the moodle theme directory – and the moodle ui takes on the jQuery css and pix. Why? Well let’s be honest, YUI looks like horrible in comparison and jQuery’s theme roller idea leaves YUI skinning for dead;
- have a rather nice handy settings page which allows the admin to change the logo and/or background images, and theme roller css via the GUI rather than putting the files in manually etc;
- I might also make it a stand-alone theme rather than use other themes as parents, I only did this to satisfy the requirements of the comp.
Without further adieu, je vouz present – créatif; screenies and a theme download. IF YOU DO DOWNLOAD and install this theme, please read the comments in the config.php – I’ve described a few things that will help you update the institution logo and background images.
The download: visit the Moodle Themes page on this blog ; )
rolley 
Hi!!
I’ve been trying to use this theme, but it doesn’t work to me. I’ve seen in the config.php that you use the base and the canvas themes. Could you include them in the files?
If this can help you I’m working with moodle 1.9
Thanks for your effort!!
GDay Juan, thanks for that, guess what though! The moodle 2 themes, unfortunately, are NOT compatible with any previous version of moodle, so you’ll have to go from 1.x to 2.0 to use the theme I’ve made, sorry : )
Version 2 isn’t final yet either, I had one of the preview versions installed, and there is still a few issues to iron out before its finalised in a stable release ; )
Let me know if you have any probs once you get Moodle 2 on, if you go that way ; )
I like the theme, but is there a way to put the menus on the left as opposed to the right?
Thanks Vicke, do you mean the boxes and the dock?? The ‘menu’ feature does display to the top left already – the dock and blocks though I’ve styled up to be fixed to the right – it’s easy enough to undo but it either has to be one way or the other. Thanks for the point though, when I do the next version and implement a ‘settings’ page, I should include the option to choose left or right anchorage for those elements!
Ta
r
Yes, that was what I had in mind. I am creating a portfolio for a job search. Having the boxes/dock on the left gives a more BlackWeb or D2L look, which makes it look better for the schools using those. Some are uncomfortable with open source.
How would I go about that?
Thanks
vic
Hey Vicke,
Sorry bout the delay. the css for the Dock and Blocks can be changed, but there’d also need to be changes in a stack of other places too, and without doing it myself I’m not sure what unforeseen problems it might cause. Currently I won’t have time to implement a left-hand dock and block version, but I will next revision on the theme, later on this year. I suspect it might break a few things, as a lot of the inner-body content in Moodle uses css Floats and Clears, a lot of which I forced to clear on the left rather than on the right… so, yeah, there could be probs. Sorry bout that ; )
r
No worries, if it’s in CSS, I might play with it a little, I can make a copy, and it’s a local copy anyway. I’ll look forward to the next version
ta
Vicke
Rolley, First of all thanks for the great theme. It really stands out amongst the rest out there in terms of being calm and professional looking.
I would like to second Vicke’s request for the block regions to be optionally moved to the left. I poked around in the CSS and changed the div settings for region-pre & region-post to ‘float:left’ and inserted a ‘float:right’ for region-main, but, mon dieu, I just made a messy screen!
Any pointer would be appreciated and I would then go about remedying any knock-on effects you mention above.
GDay Venzen,
Thanks so much hey : ) I appreciate the comments.
I’m so flat out at the moment all I have time for is to fix a few little bugs, to move all the blocks to the left though you could change the float properties from ‘right’ to ‘left’ in the page layouts part of creatif.css. region-pre and region-post are the areas that float to the right. You may also need to fiddle with padding/margin if it knocks anything out. Sorry that I can’t set it up as an option, I don’t have time for a settings page or to make a different version of the theme : ) Hope you can get it going 🙂
Ta
R
Hey, I really like your design:
I notice you have use the MOZ rounded borders, that do not appear in IE. Have you consider better cross browser support.
GDay Craig, thanks for that ; )
Yep, a sad fact about the curved edges isn’t it. Unfortunately Microsoft’s browsers are non-standards compliant and the company keeps refusing to implement native curved borders. I’m not sure about IE9, but I know IE7 and IE8 still haven’t implemented the standards recommendations by W3C nor their own implementation (like mozilla and webkit borders).
So, for the moment, there won’t be any curved edges in my theme until IE picks up the CSS for it ; )
Sorry ; )
I know there’s most likely a fair few other IE issues, IE is the hardest browser to design anything for by a long shot, there were padding and margin problems that I couldn’t figure out how to fix at all, hopefully with my next revision of the theme I’ll have more time for it ; )
Cheers
r
Hi,
I’m pretty new to Moodle, and I’ve been looking for mobile-friendly Moodle themes. Creatif appears that way, at least in the images.
Is it mobile friendly?
Do you know of other Moodle themes which are as well?
Thanks for your patience & attention!
Best,
gz
Funnily-enough I did next to nothing to make the theme mobile-friendly, I was surprised to find that Moodle in general was quite mobile friendly already. The best thing to do will be to go through all the themes with your devices to double check which ones have any major issues/work the best.
I saw some test pilot ‘somewhere’ online (probably linked from the moodle.org site) that showed a really interesting project for making a mobile-specific interface/theme for moodle. It looked really decent, wish I could remember the link but if you have a look around the net you’re sure to find something ; )
Hi Rolley,
I really like your theme. Congrats.
What I would like to be able to do is make it a two column theme. I move all the boxes into one column but the main region didn’t expand to fill the empty space. Is this an easy fix and will it be an option in the next version?
Due you have a loose date for the release of the next version?
Thanks
Thanks Glenn ; )
I’m thinking I’ll want to wait a little while after the proper release of Moodle 2 before I even look at editing the theme again; maybe towards the end of the year I’ll have another crack at it I reckon!
But, in the meantime, you can do some simple edits to force the theme to be 2 column. It’s strange that the content region didn’t snap over to consume the column that you moved boxes from. Did you have the ajax settings enabled with the drag and drop stuff, because I think that’s the ‘only’ thing I never tested – otherwise it should have worked (it works if you dock every box from a column anyway!). Oh, and what browser are you using, just for interest’s sake?
Have you been in to a course, rather than just the front page, did the course page display in two column? I set the defaults in the config file so that the course pages should be two column, and the front page and dashboard are the only 3 column areas. If you open up config.php, you’ll see the ‘regions’ setting for each of the moodle pages in the layouts array (starting line 91). Most regions are set to just ‘side-post’ (which is one column for boxes); but you’ll see some that are set to both side-post and side-pre – just remove the ,’side-pre’ from those if you’d just like it to be a two column layout.
Hopefully you can tweak it to work, feel free to ask questions though!
R
Hi R,
I’m building a new moodle for the school where I work and I like your theme. I would like to make it the default and are really looking forward for your next version. The actual seems to be a little buggy but is so beautiful and clear.
Glomeor
Thanks Glomeor,
Sorry about the bugs, you’re right of course – I did the theme in the pre-release moodle2… so there’s got to be a small pile of nasty display issues in the latest version no doubt. I haven’t had a chance to reinstall and update yet, will get back on the job soon ; )
Thanks though!
R
That sounds nice. If it is of any help I could list the “nasty display issues” for you.
Greetings
Glomeor
That’d be great! List away and I’ll definitely get them fixed!
; )
Thanks for that
Hi Rolley,
I develped a Moodle 2 Demonstration site with your creatif theme, and I love it so much! However, yesterday I upgraded to RC2, and everything was ruined. I hope you would help me to get things back to the track, because I need to show that site to my professor in one week. Thanks in advance!
Hey Jason,
i just tried and the theme still works on the latest version on my end, with the exception of a few tiny margin/padding things.
go in to your admin theme selector, change themes, and then change back, did that help?
or, go to theme settings and just check if theme developer mode is turned on or not, try changing that setting and see if it clears the cache in case theres some problem there… um.. yeah not sure what else you can do.
chuck me a screenshot if you like once you’ve fiddled with the above.
r
Great work Rolley, I’ve been enjoying your theme a lot!
Here is a couple of little things I’ve notice in Moodle 2.0 RC2 –
The Quiz results page has no background.
The forums need some kind of color in the heading to distinguish posts.
Just thought I’d mention for when you create the next version. Great work though, it is a very nice theme 🙂
Thanks
Reuben
Thanks Reuben!
and thanks for letting me know about those problems in RC2. I’ll have a look at my install and try to fix those issues this week, and I’ll comment here when the fix is ready for downloading again : )
ta!
R
Cool thanks, also, I actually realized it is not just the quiz but the grades page, and I guess anything related. So if you just click grades in the menu you will see what I mean. Best of luck 🙂
GDay Reuben,
I think it’s all fixed now. The reports area seems to have been completely overlooked by the moodle 2 team. It uses a totally different html and css structure, and ignores the theme layout file. So, I’ve patched it up with some CSS.
Let me know how it goes. Replace your existing ‘creatif’ directory with a fresh downloaded copy; clear your moodle theme cache and see how you go. If it won’t refresh try enabling theme designer mode then disabling it.. sometimes that clears the cache out nicely.
I have the stable version of Moodle 2.0 but i do not see the theme like the picture. Before the update i do, but after update to the stable version the theme has losen blocks, anybody else has the same problem?
Hey Angel, Ah I just noticed that the stable build has been released, there must be more changes that effect the theme in a bad way!
So, keep checking back and I’ll post a reply when I’ve updated the theme source files ; )
R
GDay Angel,
I’ve just updated the theme download. So, try again and see how you go.
Delete your ‘creatif’ directory in the themes area, replace with a fresh download. You might need to do a couple of extra things if it won’t refresh:
Since today’s updates, on the latest Moodle build, I haven’t seen any problems with the columns, so, it should be right I reckon.
Ta
r
ohh man you are the best… look my english is vary bad due is not my native language so i can´t expose how i feel now…. i downloaded the updated theme… and i did all what you said… the solution was enable then disable the theme designer mode… Thanks you so much… and im sure your theme is the best believe me… i follow you on the web man… keep you in that way. Bye. Xiao.
Hi R,
very nice. Thank you for the constant updates.
Greetings T
Just incase you’re interested, anyone who’s subscribing to comment-updates on this moodle theme post; i just uploaded a NEW theme, Université .. have a gawk at the latest post ay : )
have a nice weekend!
A very unique theme in appearance. Stimulating a unique feel of what could be inside this website (I better find out).
However, I have problem installing this theme on MOODLE 2.0+. I presume that is becos CREATIF does not follow basic Moodle Theme installation (Maybe that is conventional to <2.0).
Can U provide step by step guide of how to install this unique theme
I will appreciate any help.
Fix for IE – cut off top of side block in Internet Explorer
If the first block on the side is missing the first 11 pixels in IE, here a fix:
In the file themes/creatif/styles/creatif.css, look for “div#region-post” and the line:
[OLD] margin:-11px 22px 0px 0px !important;
I’ve rarely had consistent cross-browser results with negative values. You can change this to:
[NEW] margin:0px 22px 0px 0px !important;
The result will be IE will display the top side box without slicing off the top 11 pixels.
However, all the other browsers will now display the box 11 pixels below the content region. To make all the browsers display the blocks the same alignment, edit the file themes/creatif/styles/blocksAndDock.css:
[OLD] .block {margin:11px 0px 0px 0px;width:200px;}
[NEW] .block {margin:0px 0px 11px 0px;width:200px;}
Instead of placing an 11px margin at the top of each block, the margin is placed at the bottom of each block. This is a little cleaner than the -11px adjustment to remove the margin of the first block.
Note: This fix could impact the new docking features, so be sure to test early and often.
Thank you Rolley for your beautiful and well crafted theme. The famfam icon integration is wonderful.
Thanks Richard, I thought I fixed that little sneaky one earlier, but I think I’m thinking of the latest theme I did instead, so thanks for reminding me! I’ll do that!
r
Actually, I remember now, I did fix it (so I thought) but I added different css with the file iefixes.css. The css gives new settings for any page with the class “ie” in the body.
I might have got it wrong though, is “ie” the right class to use? My VMWare testing leaves much to be desired clearly haha. : )
I’ll go over it again anyway, so thanks for that.
hi?could you instruct me how to change the background image?im have try replacing the 10 bgimage that you have put in here but still it doesnt work,
hoping for your response,
Thank you,
Hey Lyka,
Did you see the stuff I wrote in the config.php file, I typed up a bit on updating various parts of the moodle theme.
You’ll find a photoshop file in the pix directory, and it’s basically the source file for creating your own background images.
There’s layers and layer masks and so on so you’ll need to be familiar with photoshop to do it well : )
Hope that helps,
R
Hi,
Lovely theme, better than many I have seen around. Thanks for providing customization options, can you as well tell me how would I edit the login_info, as on mine its showing My Hosting Provider links and script installer links on top and bottom.
Bundle of thanks!
Hrmm hey Asar, I just emailed you back but I was just wondering if there’s any settings in the administration area that can turn that stuff off?
Hi!!
sorry for my writing, my English is terrible 😦
I love your theme, in fact .. I am trying in my local moodle (new version 2.0), but… i have one problem… do not show the files that I upload to the resource “folder”
Can you help me please!!
Thanks!
Thanks so much lourdes ; )
Let me think for a sec. hhhmmm….
so, are you adding files through the administrative interface, like the administration block or admin files area in moodle? if so there might just be a little prob with your setup, perhaps the file permissions on some of the directories or files is wrong; but i’m not sure. I’ve had problems with Files in moodle 2 as well, and being pretty hopeless at system administration i don’t really know how to solve the issues.
Sorry : )
Hope you can figure it out soon though!
Hi first, this theme is relly cool! I lieked it from the
start. I would like to change the size and distanse from the
headding of the “course categorie” and the “course” on the front
page. How do I do this? Thanks for the feedback
Thanks Beat!
Glad you like it. Sounds like you might need to edit the CSS that comes with the theme to do what you want, assuming there’s no glitch anyway, … Did you want to send me a screen shot? rolley dot tickner at gmail dot com
; )
Nice Moodle theme. Thanks for sharing.
hai,
I have installed the theme, but it worked for two days fine…
but now I am unable to… open the menus
please do the neeful
Which menu’s you having probs with Vinuthan? Do you mean the Menu feature, or do you mean you can’t click on some of the menu items in the blocks or?
I can’t think of any reason for an error like this; although, when I was testing I did totally screw the Menu feature up somehow, and found it a little temperamental. Try and get rid of your Menu stuff, then redo it. That’s what I did when I had trouble with that Moodle feature.
R
I tried fresh actual Moodle installation + fresh download of this theme, but it does not show up in Theme Selector. I already tried clearing cache, turn on & off theme designer mode, but it still does not show up. How to fix this please?
Sorry Juraj, I wish I could help but I can’t think why it isn’t working for you. I hope you manage to get it up and running soon, hopefully it is something simple?
Solved, new Moodle build helped.
Different problem:
If I try to edit test and I want to add questions from question bank, the SHOW button (clickable blue text) for previously hidden question bank (at the top of page) is not clickable – it is possible to get there e. g. with TAB key on keyboard, but it is not acceptable :). It seems like something from later elements goes ‘over’ that, because during slow page loading it IS clickable (and it is always possible to get there with keyboard). Same text with function to HIDE is always clickable (when question bank is visible). Is my explanation understoodable?
Browsers tried: Opera, Firefox4, Chrome.
Hey Juraj!
Sorry for the delay in my reply;
I’ll look in to that problem, it’ll be easily fixed hopefully with z-index in the css. I’ll have to recreate the problem at my end first though. Once I’ve fixed it I’ll repost here with an updated ZIP.
Cheers!
R
GDay Juraj,
I’ve removed all my css for the quiz page, it was pretty useless css anyway, so now the problem you’ve described is fixed.
I really wanted to improve the look of that page at the time I made the theme, and I had a half hearted go I suppose. I see now that the code of the quiz engine is so messy and the look is so old that its probably best not to bother skinning it with new css until the source code gets revamped in that part.
So, download the zip file again as it should be refreshed with a new copy,
replace your files with the new ZIp and you should be good az gold ay
tarah
r
Hi,
First of all thank you for making this resource available in the public domain. It’s an excellent piece of work.
I am particularly interested in the update you mention regarding specific background images for specific course pages.
Do you have any idea when that feature might become available?
I hope to hear from you soon.
Many thanks indeed,
Andrew.
GDay Andrew,
Thanks ay, glad you like it!
I never ended up implementing it, I did get something similar working on a different version of my ‘université’ theme, but the way course files works in Moodle 2 has been changed to be much more secure and complicated. I can’t figure it out anymore as it works wayyyyyyy differently. Sorry! : )
R
I like the theme but there are some padding issues. It cuts off the top of the word, “Navigation” on the block where it bumps up against the header. Is there a way to adjust the top padding?
r
Hey Rick
Bugga, I remember something in the css about the padding of the top-most block; I wonder if there needs to be some adjustments; what version of Moodle 2 do you have? I haven’t even tested any of the themes I’ve made in the latest version yet (eek).
Ta
R
Hello, yours it’s an awesome theme, in fact one of the best I’ve seen for moodle; however I can’t figure how to get the language menu. Could you help me with this? Best regards,
Jose Cardenas
Hey Jose thanks so much, I’m glad you like it. Did you find the lang menu stuff? I thought it was there by default!? ha, mustn’t be! There might be a setting in the config.php file? Did you do a quick search on the moodle docs site or google? I don’t think the lang settings are a theme related thing, I think they’re more a setting of the moodle administration, but I could be wrong, I’m not sure sorry : ) Let me know if you never got it working and I’ll take a look.
Really thanks for that theme! Great is also included PSD file to add my own pictures. I used it to add aerial photos of school and town, seems great and users are proud to see that!
Glad you like it, thanks a ton!
Thank you for posting this terrific theme. It is so clean, readable, and contemporary.
One question: a huge empty space is appearing between the first and second lines of main column text. I see it in both Firefox 3.6 and Chrome 10.0, though it’s larger in Firefox. I have been unable to debug the CSS that might be causing this. Can you assist?
Here’s a screen capture: http://inside.catlin.edu/creatif-moodle.png
Richard
Hey Richard!
Sorry for the delay in my reply;
I’ve seen this prob before, I’m positive I fixed it though..? Mind you, I haven’t updated the theme for some time and its possible you and I are running totally different moodle builds. Every time they update the build there seems to be something that gets weird in the theme : o
Ill double check it all at my end, and I’ve got a couple of other things to fix too, so I’ll repost with an updated ZIP and we’ll see how you go after that ; )
R
Woho, thanks for that, there was one sneaky css class i missed and now its fixed, I’m uploading the theme ZIP file again (the link will stay the same), so grab a new copy and replace your files with the new stuff ; )
Cheers
R
First of all – I like your work very much indeed, I think it’s one of the best themes/designs I have ever come across in moodle.
I’ve got one question/problem though: I’d like to change the background-color. the color is #333333 by default and I want to change that; but when I try to change some code in the creatif.css in the folder /styles it simply won’t do it.
When I look at the properties with the web developer toolbar in Firefox it tells me the following:
I marked the part which I don’t understand/can’t make sense of like this:
*************************************************
this is the part I don’t know where it comes from
*************************************************
body, html (line 250)
{
height: 100%;
background-color: #1b408d;
}
body (line 254)
{
background-image: url(“image.php?theme=creatif&image=landscapebg1&component=theme”);
font-family: Tahoma,Geneva,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #1b408d;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
*************************************************
this is the part I don’t know where it comes from,
especially “null” – I haven’t got a clue where this comes from, since it’s nowhere stated in creatif.css in the folder /styles
??????
*************************************************
null
html, body (linie 93)
{
background-color: #333333;
background-image: url(“moodle2/theme/age.php?theme=creatif&image=landscapebg7&component=theme”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
I’d really appreciate your help.
Thank you very much indeed.
Best wishes,
Thomas
Hey Thomas!
Sorry for the delay in my reply;
Sorry for that tricky one too, as it turns out, THAT part of the css is actually in the php, which handles the randomisation for the background changes. I shoulda put it in the css in hindsight 🙂
Edit line 38 of standard.php : )
R
First of all, thank you very much for you excellent piece of work.
I’ve got one question though.
I’d like to change the background color from #333333 to some different colour, but I can’t really figure out where to do this.
I’ve tried the creatif.css and changed it there but somehow it sticks to #333333.
Any help would be very much appreciated.
Thomas
Thanks Thomas, glad you like it, I just got back to your last post, sorry for the delay.. i’ve beeen sooooooooooo busy!
Regards,
I am new to moodle 2. I appreciate the hard work that was done in the template. I want to know how I can do to make my course are displayed in three columns. I appreciate your answer because I do not see the option.
Cordially
GDay!
You can do it, but you’ll just need to change some php, fear not, its quite easy:
at line 101 of config.php, you’ll see the creation of an array called ‘course’ which basically sets a couple of settings for the course view;
change the one that says:
‘regions’ => array(‘side-post’),
to:
‘regions’ => array(‘side-post’,’side-pre’),
and then do the same in the array starting line 111, (incourse)… cuz i can’t remember off the top of my head which one to change (so just change both) ; )
Cheers!
R
[…] Once I get it working really nicely I’ll roll it out for Université and maybe Créatif too. Its a small amount of effort which hopefully translates in to making the UI a little better […]
Firstly thank you very much for Creatif, it is exactly what I have been looking for!
I did run into a problem though, if I go into a forum/discuss.php the users comment appears below the navigation and settings tabs rather than next to it. I was wondering if you could you please point me in the right direction to fix this.
Thanking you in advance,
Tegan
GDay Tegan!
Thanks for that!
I’ve been trying to get mine to do what you’re describing and I can’t figure it out; what do you mean by the navigation and settings tabs? You don’t mean the Navigation and the Settings blocks do you? If so that’s really odd and there might be some dodgy content/html in one of the comments/posts thats throwing things out. What version of Moodle2 are you running too? I haven’t dev’d the theme for some time now and I think there’s been a few extra little releases…
Was it just one forum, post or comment that’s doing it, or does it do it for everything?
r
Hi Rolley,
Thanks for the reply, I’m currently running Moodle 2.0.3.
Sorry, I did mean the Navigation and the Settings blocks. The problem occurs for all forum posts in all forums.
Thanks,
Tegan
Emailing you! Send me some screenies if possible.
Hee Rolley,
Great theme. Subtle things like icons and gradients make this theme a lot better than every other them I ‘ve seen.
Rick posted on 14-03-2011 something about the missing 11 px at the top of the block Navigation in in Internet Explorer (8). I have the same problem. I don’t really like IE, but a lot of people are using it.
I know that you added a iefixes.css, but apparently there is still something wrong.
I use Moodle 2.0.3+
Can you please help me?
Maarten
GDay Maarten, thanks for bringing that one to me, I’ve now fixed that bug once and for all in both of my themes, BUT before I post an update there’s another problem I’m trying to get solved with another user; so once I can nail that, or if I can’t nail it any time very soon, then I’ll post an updated zip on the net : )
Talk soon
r
Actually, Maarten, you’re running the same version of moodle as Tegan (see previous comment) – do you see the same problem she seems to be getting.. where forum posts/comments show up further down the page under the side blocks??!!!
Cheers
R
Hey Maarten, try downloading the zip again, I just refreshed the copy on the server.. the problem should be fixed. ; )
r
Thanks Rolley! It’s looking good now. Can I vote for you or your theme or something?
Hey Thanks Maarten!!! That’s a lovely offer ; ) The theme comp was at the start of the year though I think, so no voting or anything like that anymore hehe : ) If only!!! haha : D
Cheers!
R
Hey Rolley,
Please correct me if I am wrong. I just took another look at the theme. The newly uploaded logo replaces yours, which is at the bottom of the page.
How can I make the logo appear at the top? Can you please point me to the right direction?
bonkhi
GDay Bonkhi,
That’s right, I made the logo be at the bottom on purpose.. originally I designed it with school and universities in mind, where marking isn’t really (or arguably ‘shouldn’t’ be) as prominent – the course content is more important.. so I popped it at the bottom.
However, there’s nothing stopping you from putting it at the top, do you know CSS and HTML/PHP? You can edit the theme layout files and the css, and put the logo container at the top and give it new positioning settings in the css. ; )
R
Hey Rolley,
Thanks a bunch for everything. I looked at the layout and the creatif.css file. I could find my way around it (am okay with html and a bit of php) despite not knowing much about CSS.
I have reposition the logo, as well as made a few changed to the size of the header section.
Thanks a bunch………….
Hi Rolley,
Here Maarten again.
I have a problem with my progress bar. I hope you can help me.
I made a screenshot: http://imageshack.us/photo/my-images/197/progressbar.jpg
As you can see it is kind of hard to see the progress bar. Do you know how I can change the look of the (course) progress bar? Which files do I have to change?
Thanks in advance,
Maarten
Hey Maarten!
I’m not sure how to get the progress bar to show up on my moodle install – I wanna see it so I can have a better look at what it is, how its made and so on.. How do I get it to show up in a course?
Talk soon!
R
Hey Rolley,
We found a solution. You can edit the css in mod/lesson/styles.css.
You can enable the Progess Bar if you edit a lesson by clicking on the pencil, look under Flow control and then there Progress Bar. http://imageshack.us/photo/my-images/233/progressbar.jpg
Greetz,
Maarten en JW
Hey Rolley,
We have another problem with this (lesson) progress bar. In the standard theme – if you have for example 6 questions or steps – the progress bar takes 6 equivalent steps.
In your theme, the progress bar takes a couple little steps but at the end a big one which fills the complete progress bar.
Do you know how this comes?
Greetz,
JW en Maarten
*To be clear, we mean the progress bar that shows the approximate percentage of completion.
Thanks so much for finding that sneaky problem, I’ve fixed it I think, in both of my themes, and have just uploaded the whole zip of the theme again : )
Grab a new copy and let me know if it works at your end!! : D
Cheers!
R
Yes, it works just perfect now!
Thanks for the quick reply.
JW & Maarten
No worries! Glad it works well ; )
R
Hi,
I have found a few glitches when using IE that I was hoping that you would be able to help me with.
When the page is not maximised the content in the main area is pushed down the page do there is a large white space between the header and the content. I tried to fix this by changing the position of the page to absolute in the iefixes style sheet. It did fix this issue but it created another one in that a page in social format always appears with a large space between the header and the content…. any ideas?
My other glitch is that the pictures in pix_core appear a few pixels below the text that relates to it rather than at the side of it. I am unsure where to look to resolve this issue so any help would be great.
I dont see these glitches using any browser other that IE, ive tried it on IE 7, 8 and 9 and see it in all 3.
P.S great theme, its the best one I have seen for moodle 2 by far.
Thanks
Gary
I have resolved the above issues, by changing the position to relative and the co-ordinates of the icons that are used.
The only bug i have remaining is the same issue as Tegan, though it only shows up in IE.
Hey Gary, good on ya!! sorry for the late reply, I only come on to moderate comments here and there in batches : D even know I’ve had this box open for 2 hours while trying to come back and keep writing haha 😀
Glad you fixed the icons.. not sure whats happening with the big gap though, but I’ll try and replicate that on my moodle instance, to see if i can find out what CSS needs to be written to fix it. I’m sure I haven’t noticed the old big gap problem for a while though; you did download the theme file recently didn’t ya (and not ages ago?) .. I know i had some problems with that popping up earlier and thought I’d fixed them, there’s always one sneaky thing though isn’t there.. hrmm..
Comment back with some screenshot links, and in the meantime I’ll get VM going on my server and run some IE tests to see if I can find out where the problem might be ; )
Cheers
R
Thanks for the reply. I downloaded the package about 2 weeks ago that I have been editing, I downloaded it again yesterday just to check and its the same. I have uploaded some screen shots here:
http://imageshack.us/photo/my-images/585/20465844.png/
http://imageshack.us/photo/my-images/820/69136936.png/
http://imageshack.us/photo/my-images/35/79107841.png/
I have been looking at line 66 in the courseviews.css to try and fix it. I tried putting position:absolute; top:0; in which did move the content to the top of the page, but then all of the replies to the discussions were also at top 0 so everything was on top of itself… so that didnt work. Hope you can help!
Gary
Hey Gary!
I’m still having problems duplicating the problem in your screenshots.. its simply just not doing it. I have one last idea. When did you download and install moodle? You might have a newer version than what I’m running on my server; often each version release the code is different and it usually screws something up in my themes… so, that’s my last thought I suppose. If you’re running a newer version than the original 2.0 stable release then I might have to upgrade my install, then try and sort all the probs out 😮
Hi Rolley. Did you have any luck with my issue?
Thanks
Gary
Sorry, actually the latest file I see in the directory is 24 July 2011. Is that the latest?
Hi Rolley, thanks for looking at the bug! I think that might be the case, as I am using moodle 2.1. the latest stable package. I have been trying to keep up the most recent version on my server so that I am up to date for when the school year starts. Which area of code is it that you think that the discuss layout bug could be present?
Hi Rolley, did you have any luck recreating the discussing forum topics bug I am seeing? I am not sure where to look in the code for where the issue is occuring, where was it that you made changes for when Teegan was seeing it?
I am currently live in school with moodle 2 using your theme if you want to check it out. https://moodle.lodeheath.org.uk
Hey Gary
I just installed Moodle 2.1+ stable release.. and I’m testing the Créatif theme now using IE8 in a VM on my mac. I can’t find any problems at all, anywhere! No big gap problems like you’ve described in the discussion forum.. what version of IE in particular are you using? I don’t have a VM with IE9 set up yet, but I do have one with IE7 so I’ll look at that too.
I’m not sure what to do, or why you’d get the problem and I wouldn’t.. Let me know what IE version, and any other specific details which might help pin point the problem.
Ta
R
Hi Rolley
Agh! The gap on my site appears when you are replying to threads in the forum. I was hoping you would see it straight away after your upgrade. Im using windows server 2008 and IIS instead of apache… maybe that is the cause. I have IE9 on my machine but the rest of the school is on IE8. I can send you log on details to our learning platform if that would help?
Thanks
Gary
Hrmm ill report back when I get IE9 set up as a new VM (tomorra!)
R
I am only seeing the issue when I am using IE. It appears fine in chrome and safari. Shame the school are using IE.
Hey Gary I got bad news, I can’t duplicate that issue even when I’ve tested the site in Moodle 2.1 with my Windows 7 VM using IE9… My other IEs were also fine .. soooooo I’m totally not sure what the go is : /
You should grab the files again anyway, perhaps try the other theme I did too as I fixed a lot of M2.1 issues with it, Université – you can customise it to the colours of your school using JQuery’s theme roller and some find-replace trickery.
; ) I suppose it’ll all go crap again when Moodle 2.2 comes out haha.. crikey!
I will do, its half term here soon so I can spend some time editing moodle then without affecting anyone. Can you see the bug when you log on to my moodle with the log on details i sent you?
Thanks for looking. Hopefully Il find a way of sorting it during half term
Hey Gary!
I’ve tried to log in, I’d like to see it actually, but it reckons invalid username/password, even though I copied and pasted directly from your email! Not sure what the go is at all : s its weird.
R
Sorry its case sensitive and microsoft automatically put a capital letter at the begining of my typing. Its all lower case 🙂
I’m trying to download the theme, but I keep getting an error that the account is inactive. Where can I get the files? Thanks.
Wayne Sykes
Hey mate,
you’ll be able to download the theme in the next couple of days from Moodle.org, I have no where to store the files anymore, and I’ve just put it in moodle.org for review then official release : )
http://moodle.org/plugins/browse.php?list=category&id=3
R
Hi,
I tried to download your theme from the Moodle themes page, but it gave me a “account inactive” error.
Hmm weird, i just downloaded it fine. is this the page you went to?
http://moodle.org/plugins/view.php?plugin=theme_creatif
I just visited that page and now I got another error: “You do not have permission to view this plugin”
yeah, the buggers, they haven’t approved it yet, so it’s sitting there with the status “waiting approval”, after the moodle team look at it (i assume), they’ll approve it (I assume, again), and THEN FINALLY it’ll be up for download : )
sorry bout that hehe. hope you get it soon though!! 😀
Hello,
Awesome theme! I was wondering if you know of where one can change the “lightbulb” highlighting code for the theme? In the other standard themes I have tried the course highlighting section works fine, however with this theme the highlighting darkens the border of the topic and doesn’t actually highlight it nor does the icon change. I am running the latest build of Moodle 2.1 on a LAMP setup. Any help or insight would be greatly appreciated. I have worked with CSS some but I can’t seem to find what is overriding the normal highlighting effect.
GDay Michael!
Thanks!
I reckon you totally could go ahead and make a change of some kind to make it better for you; I’m not sure what you can do about the icon apart from finding a better replacement, and tracking down the right spot to put it – but, to change the CSS just open courseviews.css, and on line 15 you’ll see the classes that customise the highlighting that you’re talking about.
The system calls it “current”, so when you highlight a particular week or whatever (or I think doesn’t it highlight the active week by default?), it adds the .current class to that week/topic, and takes on the css from here. So if you’d like for example the background colour to change, just put in what you need there and it should be good as gold I think.
Or, actually, am I getting confused – have I neglected to skin the highlight week feature completely and getting it confused with the current week highlight code?
: D
haha.. let me know! I’ll look on my end as well but my server is down at the moment.
R
Hi Rolley,
Not sure if anyone else has had this problem but I included a custom menu in my moodle (2.0.4) when I went to check the grades for a unit (moodle/grade/report/grader/index.php) I noticed the theme was not displaying correctly, it had white area at the bottom of the page and menu was being hidden a bit under page content. I added the following code to config.php line 157
// The pagelayout used for reports
‘report’ => array(
‘file’ => ‘standard.php’,
‘regions’ => array(‘side-post’),
‘defaultregion’ => ‘side-post’,
)
Seems to fix it.
Tegan
Thanks Tegan, I better chuck that in my copy then hey! thanks a ton!
R
I saw that in my copy too, thanks Tegan
Hi Rolley, I have not received the photoshop file yet I think our security system may be blocking the external email with attachments. Please could you post a link here for us to download.
Thanks,
Belinda
Hey Belinda,
Sorry, I don’t have anywhere to host the file anymore, so I need to send it to you somewhere/somehow.
My email did get bounced back by a spam/security filter it seems.. i did just send another test one.. without the attachment to see if it can reach you at all..
Let me know if it does or doesn’t get to you again – and maybe tell me another email address of yours (like gmail or something) in a comment and i won’t approve the comment so that it’s not published to the world. Up to you ; )
R
Hi Rolley
I was hoping you would be able to point me in the right direction, I would like to edit the rollover pop up that comes up when you look at the calendar to change the font size. But I cant find where it is to edit it! I am not sure whether this attribute is in the theme or in the calendar block but I can find any code relating to that pop up. Do you have any idea where it is?
Thanks for your help.
Have you looked at dropbox for hosting your files? Its prety good, you can create public folders in there and put all your files in there and then just give out url for where the file is stored.
GDay Gary!
I think I know what you mean, its the ummmm tooltip like thing that appears when you roll over an event on the calendar right?
It’s probably going to be in the calendar block and/or somewhere else because moodle uses the YUI stuff for that functionality. Some YUI stuff is easy to override with CSS though in the theme, so you could add some css to the theme if you know the right class names to target. Sometimes overriding YUI css in moodle is a real pain in the arse though, as the YUI stuff gets loaded after the theme stuff (i think?) and can be impossible to override. sigh! I tried it with something, can’t remember what though, man it was annoying. The main menus I think.
So, in your browser do you have a code inspector? if you’re using safari enable the developer toolbar, or if you’re in firefox get firebug, then right click on that popup that you wanna find out the css for, and click inspect element. That’ll then show you basically the code and the css for that area, which you can explore and stuff, then all you need to do is copy the css styles in to the theme css and change the font size.
Send me stuff if you want some help, i don’t have much time cuz work is crazy but yeah send me stuff and ill see if i can help.
I was thinking of drop box… hmmm.. but i ended up hosting the themes on the actual moodle.org site : ) which i suppose makes more sense anyway, maybe : )haha
ta
r
Thanks
Im trying it now using firebug, I have found the attribute that I want to change
I want to change the style=”left” bit to a different position on the screen so it doesnt hide the calendar when the popup appears. At the moment I have only figured out how to change it for individual dates rather than every time the pop up appears… im working on it though!
Got it! If you put a position fixed in the eventmanager.css of the calendar yui it stops the popup from overlapping the calendar 🙂
Hi Rolley, Please could you send me the photoshop file so that i can add my own images to the theme?
Also on IE7 when i click something within the dock it doesn’t display fully, is there any way this can be fixed?
Thanks
Heather
hello rolley, I like your theme, could you mail me the photoshop file ? I wish to insert some of local images of town here on background. thank you, kind regards nally
Hi
Has anyone tried creatif on moodle 2.2.3 yet? Im thinking of upgrading mine from 2.1
Gary
Hey Gary!
I had to make changes to the themes because moodle 2.2 did have some differences that broke a few things. but, i haven’t tested version 2.2.3 which only came out this month or so right? The version I’m running is probably 2.2.2 or plain old 2.2, I can’t remember what I downloaded but it’s definitely 2.2 at the very least.
So download the theme files to get an update, and try it on a separate install maybe on your local machine before you roll it out on the server : )
Let me know how you go.
I haven’t had and probably won’t have time to make updates for some time, my workload is just way too crazy unfortunately : (
But yeah, talk soon
Thanks!
R
I have it installed on 2.2.3 and works like a charm.
Nice! Il backup and then upgrade my version during the schools half term next week 🙂
Hi Rolley – the latest version on Moodle.org (http://moodle.org/plugins/pluginversions.php?plugin=theme_creatif ) is stating October 2011 – is there a more recent version of Creatif than that?
Thanks!
Lael
GDay Lael : )
Nooooo I haven’t updated the theme since late last year, so that would be correct. I just noticed that the moodle themes stuff down again, I wonder how often that happens :s
🙂
r
Hi Rolley, thanks for this charming theme… excuse me, but i’m so newbie in moodle themes, as i can see from “edition mode”, i can’t be able to move one block, for example, the calender, from the right side to the left one, in order to left the main content column in the center, the calendar to the left, and other stuff in the right side… con you tell how can i do that?
Thanks in advance 😉
GDay Nachous 😉 Sorry mate, I’m not sure what you’re trying to do, and, it’s probably too late now since it’s taken me sooooo lonnnnng to get back to comments (sorry about that). You won’t be able to move the blocks from left to right though, the theme files are written with the code in a location that either renders the blocks on the left, or right, or wherever the author has the code really – the css also controls a lot of the display.. so basically if you want to shift it, you’ll have to get stuck in to rewritting the code ; )
cheers!
R!
Im now using this theme on moodle 2.5, I had to make a few changes in the ie fixes files and adjust the position of the log on box to make it in the center of the page but apart from that the theme still seems to work well
Thanks Gary, just emailed ya 😉 good stuff!