New Theme "Funky" soon to be released. Feedback wanted

New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
Number of replies: 61
Yesterday Mauno put me onto a great theme set designed for Joomla ( http://moodle.org/mod/forum/discuss.php?d=74902#p335092 ). i liked the theme as it used transparencies well.

I decided to try to see if i could reverse engineer it as I have not tried to use transparent boxes before and it has come up a treat. I have emailed the original designer seeking his permission to release the theme as GPL into the Moodle community.

Best thing is that the way I have built it, it is very easily customisable by using a 'parent theme' and a single simple css file to make changes to create variations.

To create the many variations below required only 5 changes to a css file.

Have a look, provid feedback/suggestions and hopefully I will be able to release this.
Attachment screenshot.jpg
Average of ratings: Useful (2)
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mikko Turunen -
Brilliant work!

I would love to use something like that to my upcoming project moodle site. The only thing I can think of is the contrast issues with the background. I would go for light yellow/whiteyish background. But they look really great!

Mikko Turunen
Tampere-Finland
In reply to Mikko Turunen

Funky Theme - Progress made but help needed

by Julian Ridden -
Hi All,

I have made some progress with Funky but need some help from the CSS guru's out there.

The issue is that this theme looks great in everything BUT IE6.

I have made some strong leeway by looking at what others have done on the web and have gotten to this point.

http://playpen.riverview.nsw.edu.au/course/view.php?id=24?&theme=funky

As you can see on this site, it is nearly all looking right..but all of a sudden you cannot click on anything on the page anymore!! (again only in IE, works fine in the Fox)

I am using the attached theme (this is not final, so don't use on your sites)
In reply to Julian Ridden

Re: Funky Theme - Progress made but help needed

by Mauno Korpelainen -

Hi Julian,

links work in IE6 if you add to the end of styles_ie6.css

*a{position:relative;}

and DO NOT add anything relative or z-index to tags before it in  styles_ie6.css.

Paths for images are another problem (blank.gif in iepngfix.htc and theme/funky/... in styles_ie6.css) if moodle is not installed to the webroot...

In reply to Mauno Korpelainen

Re: Funky Theme - Progress made but help needed

by Julian Ridden -
Thanks Mauno for the pointer.

i have tried adding your tag as suggested but couldn't get it to work sad I say again how much I hate IE6 sad
In reply to Julian Ridden

Re: Funky Theme - Progress made but help needed

by Mauno Korpelainen -

I tested it before sending previous message and got it working - it still works with my test moodle (after 100 trials) ... end tag } was also missing from .forumpost .left and I changed images to different folder but it should not matter.

Check once more attached styles_ie6.css (the last row and missing } added)

I guess that IE6 trouble is the main reason why png alpha transparency is so rarely used.

In reply to Julian Ridden

Re: Funky Theme - Progress made but help needed

by Albert Ramsbottom -
The theme should have been tested, you cant blame IE6. I have been a web developer for ten years and always make sure that all of my sites, skins, themes render in all browsers.

Its very basic really!

Cheers
In reply to Albert Ramsbottom

Re: Funky Theme - Progress made but help needed

by Patrick Malley -
I'm sure that Julian tests his themes in IE6 as well. He was simply lamenting the fact that his PNG transparency fix wasn't working as it should ....
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Splendid!

Rockettheme.com has of course copyright to all their themes ( http://www.rockettheme.com/Terms_amp_Conditions/ )

but ideas are free. If it is not possible to use these themes as they look right now you could certainly make some changes so that releasing these themes as GPL is possible (those marvellous background and header images for example - but I hope it is not necessary)

And if you get tired to transparency all backgrounds can be changed to "normal" again big grin

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
Ok, I have changed the images to take it away from their work. The code is all new as I had to moodalise it anyways. So looks like I could have a release here. big grin

I have also added a two more, just for fun.
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Anthony Borrow -
Picture of Core developers Picture of Plugin developers Picture of Testers
Julian - Excellent work on the funky themes, I look forward to seeing these themes - the transparency provides some fun options. I recently posted about having a sample install set that could be used for testing and troubleshooting. I think your playpen courses would be a great start. You can populate a list of users and begin creating some standard activity. Would you be willing to send me a backup of those courses (with or w/o user data). Peace - Anthony
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Anthony Borrow -
Picture of Core developers Picture of Plugin developers Picture of Testers
Julian - Are you thinking of adding the "Funky" themes to the Themes database? We are looking at launching a site and I would love to use the transparent png theme ideas. As I read, the IE issues were addressed but I figured I would double check with you. Peace - Anthony
In reply to Anthony Borrow

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
I never got the IE issues fixed and ended up giving up on the project due to lack of time.

I am more than happy to share what I had achieved. Maybe if someone else can get it working in IE I can the repost as a finished product.

Current version works well in everything except IE6. Ill add to the DB today.
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Matt Campbell -
Incredibly cool, Julian. I may be changing my theme soon....

How easy would it be to replace the images? Would it be possible to code the theme so the background image changes on a regular basis?

Thanks,
Matt

In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by David Fountain -
Wonderful...but not in IE?
In reply to David Fountain

Re: New Theme "Funky" soon to be released. Feedback wanted

by Ulrike Montgomery -
Julian,

these themes are really super - just what I have been looking for. I hope you'll get them to work in IE, too. I think my students will love them.

Thanks for the great work.
In reply to Ulrike Montgomery

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

That can be fixed...it is an old bug of IE6 and IE5.5 on Windows and there are a couple of fixes that allow IE to properly render PNG alpha transparency. I have archieved one theme that has a small javascript for this purpose - if you need it Julian...

Thinking of those old browsers it could be also possible to have separate css for IE6 in styles_ie6.css (moodle 1.8->) or use gif images for old browsers. Using alpha filter (like any other filter) makes pages to load images a little slower but it might be the best solution.

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

In http://demo.rockettheme.com/jul07/index.php?option=com_content&task=view&id=21&Itemid=42 trick is done with files template_ie6.css and iepngfix.htc

You may check it with IE6 or IE5.5 and view the source code...

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by David Fountain -
Great to see it's possible.

In my case it's not limited to 5.5 and 6, IE7 has the same problem.
In reply to David Fountain

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

David,

what do you mean? Could you explain the problem you have with IE7.

I have IE7 and I haven't seen any problems with IE7 so there must be something special with your version of IE7 or some setting...

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by David Fountain -

Mauno

Yes it was my mistake, working fine in IE7.

In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by A. T. Wyatt -
Greetings, Julian!

They are truly beautiful, but I feel compelled to be a wet blanket and mention that I would really like to see at least one that is ALSO beautiful but has higher contrast for the visually impaired. I am not visually impaired, merely starting to encounter some difficulty, but I find the dark backgrounds with light text, or the busy images underneath (like Lost) are more difficult to read. I can't imagine trying to take a typed quiz and stressing over the test as well as trying even a little harder to read the text. I also think I would have trouble reading large amounts of text with the combination of font color, background, and font size. I can control font size with the browser, but it might be nice to have one with a larger default font as well.

Certainly a person could alter a released theme to make this happen, but a lot of people don't really have access to their themes or have the css skills necessary to make those kinds of changes. So I will beg for one more accessible theme for the set, if you have time for that, for those of us who have a bit of trouble in the eye department but still love beautiful things!

And wow, I'll say it again, these are beautiful!
atw

In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Chad Outten -
Picture of Testers
very funky themes julian! range of colours is excellent & transparency is spot on. cheers, chad big grin
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mark Drechsler -
Very cool themes Julian - love your work.
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Matt Brabender -
These themes are truly spectacular.
Can I please (with a cherry on top) get a copy?
In reply to Matt Brabender

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
You can download the Funky themes from the Moodle Themes database. Here is the direct link: http://moodle.org/mod/data/view.php?d=26&rid=1010


Please note, as said above, currently this theme will not work on IE6. If anyone does get it working, please email me your code so I can update the package for everyones enjoyment.
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Chad Outten -
Picture of Testers
Im playing with the funky themes in moodle 1.9 beta using firefox & safari on MAMP 1.4.1. themes dont display activity, resource navigation breadcrumbs, but instead display the word 'Array'. Standard themes display breadcrumbs. I previously tested themes no problems on 1.7. Any ideas?
In reply to Chad Outten

Re: New Theme "Funky" soon to be released. Feedback wanted

by Chad Outten -
Picture of Testers
fyi > i upgraded to latest version of funky themes from moodle database > breadcrumb issue resolved! smile
In reply to Chad Outten

Re: New Theme "Funky" soon to be released. Feedback wanted

by Matt Campbell -
I'm getting this also, with the funky theme downloaded through the themes database yesterday afternoon.

I looked at header.html, on all the funky themes I see the following code to drive the breadcrumbs:

<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
if ($navigation) { // This is the navigation bar with breadcrumbs ?>
<div class="navbar clearfix">
<div class="breadcrumb"><?php print_navigation("$navigation"); ?></div>
<div class="navbutton"><?php echo $button; ?></div>
</div>

Simply removing the quotes in print_navigation fixed this issue, so I now have:

<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
if ($navigation) { // This is the navigation bar with breadcrumbs ?>
<div class="navbar clearfix">
<div class="breadcrumb"><?php print_navigation($navigation); ?></div>
<div class="navbutton"><?php echo $button; ?></div>
</div>

Julian, is anyone else having this issue?

Thanks,
Matt
Average of ratings: Useful (1)
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Julian,

the fix that I sent before works but the main problem is not in IE - it is that your themes do not read meta tags at all. I made those two changes to theme funky styles_ie6.css, added styles_ie7.css and meta.php with styles_ie7 code, added to funky config.php (parent theme)

$THEME->metainclude = true;
$THEME->standardmetainclude = false;
$THEME->parentmetainclude = false;

and for other "children" of funky

$THEME->metainclude = false;
$THEME->standardmetainclude = false;
$THEME->parentmetainclude = true;

If moodle is not in web root, you must also change in styles_ie6.css paths /theme/ to "real paths like /moodle/theme/

Test with IE6 in http://korpelainen.net/moodle (theme selector). Attached changes.

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
You my dear friend, ARE BRILLIANT!

I have tested and updated Mauno's changes to the package in the themes database.

So now it is there for everyone to enjoy in any browsre.

Have fun smile
In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

I forgot one thing: because standardmetainclude is false Standard tab system fixes for IE6 (that Urs has made) are not included and Standard tabs are not very suitable for this kind of a theme. One possibility would be to add Standard theme styles_ie6.css tags to Funky styles_ie6.css or to CREATE DIFFERENT TABS FOR FUNKY

Moodle logo is partly repeated in IE and editing /funky/funky_color.css helps:

#header-home, #header {
}

#header-home h1.headermain {
  background: url(logo.png) no-repeat;
}

#header h1.headermain {
  background: url(logo_small.png) no-repeat;
}


Finally some icons + readability (font size/contrast/text colors...) might be changed ...but this is a matter of taste and we can all make Funkies look just as "cool" as we like. smile

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by joe bamford -
Hi. Ive installed moodle 1.7.3 windows package locally to test this theme. Im having trouble with the transparencies in IE6. How do I change the paths in styles_ie6 to 'real paths'... nothing i write seems to work. An example image is here c:/moodle/moodle/theme/funky/logo.png
Eventually I'll be uploading this theme to my school site. Thanks for any help.
In reply to joe bamford

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

if your http://localhost is c:\moodle\moodle then /theme/funky/logo.png should be ok

if localhost is c:\moodle try /moodle/theme/funky/logo.png

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by joe bamford -
thanks a lot for your speedy reply. I have corrected the real paths as you suggested. styles_ie6.css works now... but i'm having to force it to be used by editing header.html to include it

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="<?php echo $CFG->themewww ?>/funky/styles_ie6.css" />
<![endif]-->

I only downloaded this theme a couple of days ago. Ive check that the meta.php is correct, and that the config.php s are correct with regard to setting metainclude, standardmetainclude, parentmetainclude according to an earlier post you made. The download seems fine. So im a little curious why it doesnt work without me having to edit the header.html.

Also smile I'm noticing the problem with z-index preventing buttons to work on my pages now. Is there another change that i can make to styles_ie6.css to help. I really like this theme but fear that IE6 is going to beat me... and unfortunately all school computers use IE6 still.
In reply to joe bamford

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Meta.php and styles_ie6.css & styles_ie7 do not exist in moodle 1.7 (or moodle 1.6) - Urs added them to moodle 1.8 - so you really need to add those tags to themes to get different css for ie6 and ie7.

Attached one modified example of styles_ie6.css (I have taken away login block code from other css files and and trans-10/15.png from ie6)- extra code like

.box,.generalbox,generalboxcontent,textarea .generalbox {
background-image: none;
position:relative;
z-index:100;
}

may be usefull if you have problems with some buttons or textareas (editor)...

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by joe bamford -
Thanks again that works really well smile Everything is great now... apart from what one little thing in IE6. The problem is that the page-bottom doesnt meet up eactly to the shadow-rocket. There is about a 20 pixel vertical gap between them. Absolutely fine in others browsers. I cant work out what's wrong with it. Ive attached a small screenshot of it. Thanks.


Attachment bug.JPG
In reply to joe bamford

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Try to add this to styles_ie6.css:

.article_seperator {
 display:none;
}

(it's not standard moodle theme's code but there is a small div in footer.html that could be taken away or hidden with this code)

Average of ratings: Useful (1)
In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by joe bamford -
Thanks a lot, that's absolutely brilliant. No more problems smile
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Matt Campbell -
Love it love it love it! Plotting my way into putting this onto our install when we go to 1.9 and I can have separate themes for each category. I'm not much of a designer, so I'll have some Graphic Design students help me rework the theme to give us a standard format with different images for each of our programs.

Looking at the login block, it works fine with Firefox, but it doesn't with IE7. Hitting enter just beeps - what do you expect from Microsoft? I think it's because with display: none, it doesn't have anything to focus on (but what do I know?).

I haven't tested this on any browsers other than IE7 and Firefox, but would it work to change the CSS in /funky/funky_layout.css for the login button to:

.block_login .loginform .btn {
position: absolute;
top: -9000px;
left: -9000px;
}

Thanks for the great theme!

Matt


In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mario Zamora -
All the links and references to the funky themes are broken. Please fix all of them.

Best regards
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Ron Cordoba -

Hi Julian,

I love your theme it look fantastic, I also like this theme as well...

Julian's Theme

Is this theme available???, and I love your expandable menus...

Ron

In reply to Ron Cordoba

Re: New Theme "Funky" soon to be released. Feedback wanted

by Patrick Malley -
In reply to Patrick Malley

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mike Forshaw -

Hi,

I have had a go at making sideblocks transparent. I have

.sideblock {
  margin-bottom: 7px;
  width: 100%;
  filter:alpha(opacity=70);
  -moz-opacity:.40;
  opacity:.40;
}

This works, however, any text or links also become slightly transparent too. How would I go about keeping them in full colour like in the funky themes?

Thanks,

Mike

In reply to Patrick Malley

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
This is not a theme I made, but one crated by Patrick Malley. You can get them (and a whole bunch of other cool themes) from his site.
In reply to Ron Cordoba

Re: New Theme "Funky" soon to be released. Feedback wanted

by Chad Outten -
Picture of Testers
Hey Ron, wrt the expandanble menu > its not actually part of the theme. there are two downloadable options from the plugins area of moodle.org

Course menu
YUI course menu

Cheers, Chad big grin
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Rod Spears -
I installed this theme last week on one of my moodle sites running version 1.8.2 and it is working fine. However, I installed it on a second site tonight running version 1.8.3 and the background will not display properly. The icons are showing up, but no red background.

What would cause this to happen?

I followed the same steps as I did with the first installation.
In reply to Rod Spears

Re: New Theme "Funky" soon to be released. Feedback wanted

by Alex Rowan -
im also having the same issue, very strange as it worked also perfect in 1.8.2 (same in all browsers)

moodle.jpg
In reply to Alex Rowan

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Alex,

did you install the parent theme funky or just funky_red ? (parent theme must be installed)

Another explanation could be config.php (wrong wwwroot or dirroot or empty rows at the end of config.php). I have seen css broken in moodle 1.8 also when I edited moodlelib.php or some other lib files with notepad (editing with wordpad did not break the code)

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Alex Rowan -
Hi Mauno,

thanks for that mate, i was stupid enought to not enclude the parent theme. all seams gravy now.

however im still having issues with IE6, with the latest version of funky?

moodle2.jpg





In reply to Alex Rowan

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

Did you check this (from previous post):

If moodle is not in web root, you must also change in styles_ie6.css paths /theme/ to "real" paths like /moodle/theme/ ?

In reply to Rod Spears

Re: New Theme "Funky" soon to be released. Feedback wanted

by Rod Spears -
It has been two weeks since I posted this problem and I still have not found a solution. I really like this theme and would like to use it for my site, but the red background and the custom logo will not display.

Which file directly controls this?

As I said before, it works fine with another moodle I have on 1.8.2
In reply to Rod Spears

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
Sadly I need more info to answer your question. The fact it works in your other site shows the theme is fine. So it means there is something different about the moodle instals themselves. Have you read the previous posts relating to paths?

have you got the parent theme uploaded?
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Rod Spears -
Julian, thanks for your reply.

Yes I have uploaded the parent theme.

Yes I have read the previous posts relating to paths, but I will read them again to see if I have missed anything. I am having the same problem with IE, Firefox and Safari on several different machines.
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Alex Rowan -
IE7 issue,

is anyone else having this problem?

Untitled.jpg

just like to add, i love this theme :D


In reply to Alex Rowan

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -
In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Julian Ridden -
Bugger. I have to remember to update the package with your changes Mauno.

Will hopefully remember to do so tomorrow when I get back to work.

If I forget again..will you thump me occasionally?
In reply to Julian Ridden

Re: New Theme "Funky" soon to be released. Feedback wanted

by Mauno Korpelainen -

IE6 is too buggy and needs all kinds of hacks and tuning to work properly so in the future it could be just easier to create totally different theme for IE6 (using styles_ie6.css) without png-alpha-filters, just gif or jpg background images or "normal" opacity outside other divs...and IE6 has too many problems with z-index ("layers" hide other layers and you should know correct order of layers for all divs, tables, forms, images etc) and absolute positioning. Z-index only works on elements that have been positioned and it is too hard to give both position and stack order of all elements only for IE6...smile

For example login block and course view (and all areas that may need editor or links) work better without extra layers over them - but they look so fabulous...

In reply to Mauno Korpelainen

Re: New Theme "Funky" soon to be released. Feedback wanted

by Alex Rowan -
hi guys,

im back with more browser issues, this time firefox.

cvoodle.gif
In reply to Alex Rowan

Re: New Theme "Funky" soon to be released. Feedback wanted

by Carlos Andrade -
Hello, can someone tell me where can i download these themes? I really enjoyed them but the links here seems to be broken. I'm mostly interested on the darkblue one. Thanks a lot!