Moodle 2.0 Theme Contest Submission

Here is one of the submissions we've received for our Moodle 2.0 Theme Contest. Please take as much time as you can to look it over before providing your rating.

Splash

by Caroline Kennedy

About

Splash features a clean modern look and also boasts a javascript color switcher that allows users to select from one of four color palettes.

Features
  • Uses both Base and Canvas as parents.
  • Has javascript color switcher.
  • Uses new Moodle 2 dock.
  • Includes settings page to include custom CSS.

Rating period has ended.
Comments
  1. Dan wrote:

    I’ve noticed that there’s a ‘flicker’ of the background image when switching between pages. It appears that the Red image is always set and when refreshing or changing pages the Red colour comes through on the links and other text on the page, but after a few micro-settings the colour chosen appears.

    Would it be possible to alter how the CSS was set, E.g. So that we dont see the Red default colour appearing on the theme.

    Perhaps you might be able to use the Theme Settings to apply a colour or set it dynamically in PHP so that if the colour selected is not the default dont load it?

  2. .(JavaScript must be enabled to view this email address) wrote:

    The language you use in the header is nice but it is hardcoded in the page, this means that speakers of foreign languages will only get the english header options (login, profile, etc) regardless of their language choice. That is an issue.

    The dock is also not working properly in a couple browsers, for example, in safari clicking to dock a block causes it to disappear, but if you dock another block, both show up in the dock, but they are oddly placed. If you dock too many items, you can’t get to the undock all icon and have to undock them one at a time.

    I would put the javascript into the config, and let the theme engine do the work. Instead, you have it hardcoded into the page and are loading jquery via google.

    Finally, there are some problems with the send message pop-up with your theme (I think you just need a simple embed page that does not have all of the mark up).

  3. Dan wrote:

    You might want to have a look at this:

    http://docs.moodle.org/en/Development:Themes_2.0_adding_a_settings_page

    Adding a theme settings page to your theme would allow the user to replace the logo text, tag line, and potentially select and colour they like.

    Rather than specifying colours in your images try making the coloured parts transparent and setting the background colour on the element they are contained with. Not always easy I know but the benefits are huge - It means the user can make there theme really integrated with any existing branding or color schemes.

  4. Rolley wrote:

    Hey ; ) Nice one! I just noticed there’s an issue with body margin when you enable the dock, and the horizontal scrollbar appears in the browser window ; )

  5. Dan wrote:

    Really small thing which should be easily fixed.

    The words “Topic Outline” get cut off at the top in FF, adding CSS:

    #page-content #region-main-box .region-content {
      padding-top:7px;
    }

    Seems to fix the issue.

    Also on some of the blocks with editing turned on the editing icons are overlapped by the content of the block. Again probably a simple fix, like adjusting the padding/margin or setting a height on the .commands div.

    Lastly when the blocks are ‘docked’ it makes it difficult to make out the block editing icons when editing is turned on. Some are black on the black background of the dock heading.

    Other than that its a 5 star theme : )

  6. .(JavaScript must be enabled to view this email address) wrote:

    Looks fantastic.  Don’t see the flicker problem mentioned above.
    I’m no Moodle expert, but from a designers point of view - its the best theme of the lot.
    Good work.

  7. Dan wrote:

    @Steve just to calrify the flicker of background images only appears when switching between the colour schemes for the first time. This is because the browser, on first load, hasnt loaded the images so has to fetch them from the server.

    You will also notice the flicker when moving between pages in Moodle, so for instance select the Green colour scheme, then select a course. The course loads with the Red theme then the Green colour scheme is applied.

    Just thougt i’d justify my comment : )

  8. .(JavaScript must be enabled to view this email address) wrote:

    Thanks for all of your comments and feedback on my theme.

    1. I’ll be looking into and fixing the ‘flicker’ of the red background, most likely by altering the CSS with a mix of PHP thrown in. Will also look into the theme settings area and evaluate which is the best option to get this working smoothly, thanks for your ideas/contribution on this Dan.

  9. .(JavaScript must be enabled to view this email address) wrote:

    2. Joe thanks for your feedback on the languages, I’m going to look into the possibility of pulling in this information if it’s available within the Moodle language files, if not I’ll provide detailed instruction of how to update this, however if this theme is lucky enough to be selected for inclusion in Moodle 2.0 I can discuss the possibility of the language files being updated within Moodle to include this words and phrases…don’t quote me on that yet though we’ll see how the voting goes first ;o)

    The docking area will be amended to fully work within the final release of Moodle 2.0, I’ve picked up on a few areas that conflict with the base and canvas stylesheets and fed back to Patrick on these already. Regardless of the outcome in the competition I will be releasing the theme to the Moodle community and supporting it to fully work in all browsers in the final release.

  10. .(JavaScript must be enabled to view this email address) wrote:

    3. I have added a theme setting page in to allow custom CSS to be added via the site administration menu. This was added in at the last minute and I’ll look into including additional features to keep the theme as easy to customise for users as possible with their logo etc, thanks for the link Dan!

    4. There are a few areas that need a bit of ‘tweaking’ to the code and I will of course apply fixes to ensure all browsers display these areas correctly.


    Thank you all for your feedback and votes. Your thorough testing is appreciated and is helping me to identify minor issues in specific areas. I will be looking into all areas outlined and updating the theme with minor fixes and patches which are mainly down to browser specific issues.

    Caroline

  11. Dan wrote:

    Great work Caroline : )

  12. Patrick Malley wrote:

    A couple general thoughts:

    1.) When a site doesn’t make use of the custom menu option in Moodle, what happens to that space on the theme?
    2.) What is the behavior of this theme with javascript disabled. Martin will have issues with the switcher if it doesn’t a.) hide or b.) continue to work for users who don’t have javascript.
    3.) The flicker is no doubt being caused by the necessary load time for the header images. Users will or will not see it more pronounced depending on their download speed. Since you’re already using javascript, you might want to try using that to preload the images in the theme footer.

    http://www.google.com/search?client=safari&rls=en&q=javascript+preload+images&ie=UTF-8&oe=UTF-8

  13. .(JavaScript must be enabled to view this email address) wrote:

    I have very mixed feelings about this theme - it is cool with jquery color selector and pretty design but also a little buggy and not using moodle 2.0 theming style given in http://docs.moodle.org/en/Development:Themes_2.0

    Splash could use http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js instead of old http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js and like Patrick suggests it should somehow render at least the css if javascript is disabled in browser. Furthermore all servers (XAMPP) do not support short tags - in layout files there are 2 short tags <? instead of <?php that may break theme on some sites. And <?php include(“js.php”); ?> should be removed from general.php because such file does not exist…

  14. .(JavaScript must be enabled to view this email address) wrote:

    Patrick - Good points!

    1)  I have updated the theme so that when the custom menu is not in use, it simply displays the breadcrumb in this space.

    2)  The theme currently assists the user by encouraging them to enable Javascript or download a newer browser. However, I will be looking into a better alternative or the option of hiding the Switcher completely if this is the case.

    3)  Thanks, I will take a look at this option.

  15. .(JavaScript must be enabled to view this email address) wrote:

    You could forget file serversideSwitch.html and try to use for example tags like

    <a href=”<?php echo $_SERVER[‘PHP_SELF’]; ?>?style=orange” rel=“orange” class=“styleswitch”>

    instead of

    <a >wwwroot .’/theme/’. current_theme() ?>/serversideSwitch.html?style=orange” rel=“orange” class=“styleswitch”>

    to keep moodle in default settings if javascript is disabled and themeswitcher can’t be used…

  16. .(JavaScript must be enabled to view this email address) wrote:

    Thanks for your suggestions Mauno. I will take a look at these alternatives smile

  17. .(JavaScript must be enabled to view this email address) wrote:

    Theme has been updated to cover almost all relevant points made above. Thank You.

  18. Dan wrote:

    I dont seem to be able to switch the colour…..

  19. .(JavaScript must be enabled to view this email address) wrote:

    Hi Dan,

    Yes, I am in contact with Patrick. Seems to be an older version. Will get the new version up asap.

  20. .(JavaScript must be enabled to view this email address) wrote:

    The reason why styleswitcer does not work in current code with tags like

    <a >wwwroot?>” rel=“orange” class=“styleswitch”>...

    is that 1)it just leads to wwwroot (front page of moodle) and 2) variable part ?style=orange is missing from links.

    Did you try my suggestion, Caroline?

    <a >...

    that keeps the page where you are clicking the switcer image + adds the style variable to address. Still it’s not the only way…

  21. .(JavaScript must be enabled to view this email address) wrote:

    Mauno that was an old testing theme accidentally uploaded which is why it didn’t run properly. The links are fine - the updated theme is now in place. Thanks for the testing though.

  22. .(JavaScript must be enabled to view this email address) wrote:

    this is hot - i love moodles and noodles smile

  23. Martin Dougiamas wrote:

    Very cool, Caroline!

Leave a comment

Please leave any comments that you have about this theme in the spirit of helping the developer improve his/her work. Have questions? Please ask.

Commenting is not available in this weblog entry.