Details

    • Type: Task
    • Status: Resolved
    • Priority: Critical
    • Resolution: Fixed
    • Component/s: moodle.org
    • Labels:
      None

      Description

      2.4 theme based on designs

        Gliffy Diagrams

          Attachments

          1. about page study 01.jpg
            about page study 01.jpg
            327 kB
          2. docs page study 13 (footer revised).jpg
            docs page study 13 (footer revised).jpg
            347 kB
          3. home page study 01c.jpg
            home page study 01c.jpg
            344 kB
          4. home page study 01d.jpg
            home page study 01d.jpg
            378 kB
          5. language-icon.png
            language-icon.png
            2 kB
          6. moodle-logo.png
            moodle-logo.png
            18 kB
          7. moodle-org-html-css-bootstrap-mockup.zip
            929 kB
          8. planet page study 01.jpg
            planet page study 01.jpg
            370 kB
          9. study 08 home header a.jpg
            study 08 home header a.jpg
            75 kB
          10. study 08 home header b.jpg
            study 08 home header b.jpg
            73 kB
          11. study 08 home header c.jpg
            study 08 home header c.jpg
            72 kB
          12. study 08 inner header a.jpg
            study 08 inner header a.jpg
            33 kB
          13. study 08 inner header b.jpg
            study 08 inner header b.jpg
            36 kB
          14. study 09 contents a.jpg
            study 09 contents a.jpg
            102 kB
          15. study 11 docs d.jpg
            study 11 docs d.jpg
            40 kB
          16. study 12 docsfooter a.jpg
            study 12 docsfooter a.jpg
            200 kB
          17. study-13-sites-menu-a.jpg
            study-13-sites-menu-a.jpg
            94 kB
          18. study-13-sites-menu-b.jpg
            study-13-sites-menu-b.jpg
            95 kB
          19. tertiary-menu-org-dropdown.png
            tertiary-menu-org-dropdown.png
            58 kB
          20. tile.png
            tile.png
            13 kB

            Issue Links

              Activity

              Hide
              tsala Helen Foster added a comment -

              Assigning this issue to you first Barbara, then when your cool designs are finalised it can be re-assigned.

              Show
              tsala Helen Foster added a comment - Assigning this issue to you first Barbara, then when your cool designs are finalised it can be re-assigned.
              Show
              barbararamiro Barbara Ramiro added a comment - Here's the link for the design studies https://docs.google.com/presentation/d/1e73B2gZBkcDhOWYS-KTBxMcS0PwbdRJGii4J_qnWsv0/edit#slide=id.g15a96685_0_46
              Hide
              dougiamas Martin Dougiamas added a comment -

              We need to get onto this soon, shall we meet on Wednesday to see what we have so far?

              Show
              dougiamas Martin Dougiamas added a comment - We need to get onto this soon, shall we meet on Wednesday to see what we have so far?
              Hide
              dougiamas Martin Dougiamas added a comment -

              Assigning this to Sam as I think Dan is just too flat out on integration at the moment to do enough on this in the short term.

              Sam let's meet tomorrow morning and discuss.

              Show
              dougiamas Martin Dougiamas added a comment - Assigning this to Sam as I think Dan is just too flat out on integration at the moment to do enough on this in the short term. Sam let's meet tomorrow morning and discuss.
              Hide
              dougiamas Martin Dougiamas added a comment -

              Barbara can you upload all your current graphics files?

              Show
              dougiamas Martin Dougiamas added a comment - Barbara can you upload all your current graphics files?
              Hide
              barbararamiro Barbara Ramiro added a comment -

              Attached all approved studies and current images (language-icon.png, moodle-logo,png, tile.png)

              Show
              barbararamiro Barbara Ramiro added a comment - Attached all approved studies and current images (language-icon.png, moodle-logo,png, tile.png)
              Hide
              tsala Helen Foster added a comment -

              Linking to MDLSITE-1876 which includes meeting notes on appearance stuff we decided upon.

              Show
              tsala Helen Foster added a comment - Linking to MDLSITE-1876 which includes meeting notes on appearance stuff we decided upon.
              Hide
              dougiamas Martin Dougiamas added a comment -

              Assigning to Aparup, working closely with Barbara obviously.

              Show
              dougiamas Martin Dougiamas added a comment - Assigning to Aparup, working closely with Barbara obviously.
              Hide
              nebgor Aparup Banerjee added a comment -

              Ok. i think i queried during last meeting but ftr, i think moodle.org being 2.5 with no issues this will be based on bootstrap base.

              Show
              nebgor Aparup Banerjee added a comment - Ok. i think i queried during last meeting but ftr, i think moodle.org being 2.5 with no issues this will be based on bootstrap base.
              Hide
              nebgor Aparup Banerjee added a comment -

              Matthew, i've added you as watcher. It seems sometimes before release clone.moodle.org (MDLSITE-1873) borked. Can we revive that clone? shall i reopen MDLSITE-1873?

              Show
              nebgor Aparup Banerjee added a comment - Matthew, i've added you as watcher. It seems sometimes before release clone.moodle.org ( MDLSITE-1873 ) borked. Can we revive that clone? shall i reopen MDLSITE-1873 ?
              Hide
              dougiamas Martin Dougiamas added a comment -

              Yes it should be based on Bootstrapbase, so make a clone of Clean and start with that.

              Show
              dougiamas Martin Dougiamas added a comment - Yes it should be based on Bootstrapbase, so make a clone of Clean and start with that.
              Hide
              lazydaisy Mary Evans added a comment -

              Can I work on this too?

              Show
              lazydaisy Mary Evans added a comment - Can I work on this too?
              Hide
              dougiamas Martin Dougiamas added a comment -

              Sure! As long as you don't mind it not being a public theme. (I don't want clone sites popping up).

              I guess Aparup can set up a repo and give you access to it to submit changes etc.

              Show
              dougiamas Martin Dougiamas added a comment - Sure! As long as you don't mind it not being a public theme. (I don't want clone sites popping up). I guess Aparup can set up a repo and give you access to it to submit changes etc.
              Hide
              lazydaisy Mary Evans added a comment - - edited

              Thanks ... and yes I see the need for it to be NOT public, as you say you don't want clones popping up everywhere.

              Show
              lazydaisy Mary Evans added a comment - - edited Thanks ... and yes I see the need for it to be NOT public, as you say you don't want clones popping up everywhere.
              Hide
              nitinwaves Nitin Jain added a comment -

              Hi, I was wondering how i can be part of this development. I have create few of very different plugins and themes for moodle and few are already published on moodle community and few are in pipeline.

              please suggest.

              regards
              Nitin Jain

              Show
              nitinwaves Nitin Jain added a comment - Hi, I was wondering how i can be part of this development. I have create few of very different plugins and themes for moodle and few are already published on moodle community and few are in pipeline. please suggest. regards Nitin Jain
              Hide
              nebgor Aparup Banerjee added a comment -

              Hi Nitin,
              Please contribute into the plugins directory @ moodle.org/plugins with your plugins. Development work is very much needed within the moodle core. Core issues are all at this link.

              Show
              nebgor Aparup Banerjee added a comment - Hi Nitin, Please contribute into the plugins directory @ moodle.org/plugins with your plugins. Development work is very much needed within the moodle core. Core issues are all at this link .
              Hide
              dougiamas Martin Dougiamas added a comment -

              Look how fast Julian has put together a nice 2.5 theme for this: http://2013.imoot.org/

              Show
              dougiamas Martin Dougiamas added a comment - Look how fast Julian has put together a nice 2.5 theme for this: http://2013.imoot.org/
              Hide
              nitinwaves Nitin Jain added a comment -

              Hi Aparup,

              Thanks for responding..

              Yes, I have contributed the plugins into plugin directory only and will continue doing that.

              I was wondering how can i contribute to core development work and related issues. i already had a look on the given link for issues but not sure how and on which issue i can work on.

              regards
              Nitin

              Show
              nitinwaves Nitin Jain added a comment - Hi Aparup, Thanks for responding.. Yes, I have contributed the plugins into plugin directory only and will continue doing that. I was wondering how can i contribute to core development work and related issues. i already had a look on the given link for issues but not sure how and on which issue i can work on. regards Nitin
              Hide
              nebgor Aparup Banerjee added a comment -

              Looks furious! i've setup a branch here called 'moodleorgcleaned' starting from scratch.(https://github.com/moodlehq/moodle-theme_moodleofficial/tree/moodleorgcleaned)

              I'll be pulling in the designs from Barbara and then we'll see what customisations to port over from the old theme.

              Show
              nebgor Aparup Banerjee added a comment - Looks furious! i've setup a branch here called 'moodleorgcleaned' starting from scratch.( https://github.com/moodlehq/moodle-theme_moodleofficial/tree/moodleorgcleaned ) I'll be pulling in the designs from Barbara and then we'll see what customisations to port over from the old theme.
              Hide
              lazydaisy Mary Evans added a comment -

              @Aparup...thanks for the link to MoodleHQ GitHub. However it does not go anywhere other than to a 404 requiring login details. I entered my GitHub UserID & Password but still see the 404 with the Jedi cat!

              Show
              lazydaisy Mary Evans added a comment - @Aparup...thanks for the link to MoodleHQ GitHub. However it does not go anywhere other than to a 404 requiring login details. I entered my GitHub UserID & Password but still see the 404 with the Jedi cat!
              Hide
              lazydaisy Mary Evans added a comment -

              @Martin...there are some errors with the Essential theme that I found last night while testing it. As far as I can make out, it's mainly to do with the incorrect naming of the custom block regions.

              Show
              lazydaisy Mary Evans added a comment - @Martin...there are some errors with the Essential theme that I found last night while testing it. As far as I can make out, it's mainly to do with the incorrect naming of the custom block regions.
              Hide
              nebgor Aparup Banerjee added a comment -

              Dan is taking care of your access as i type

              Show
              nebgor Aparup Banerjee added a comment - Dan is taking care of your access as i type
              Hide
              nitinwaves Nitin Jain added a comment -

              @Aparup, is the link working now? or is there any different link? as far as i checked, its not working at my end.

              Show
              nitinwaves Nitin Jain added a comment - @Aparup, is the link working now? or is there any different link? as far as i checked, its not working at my end.
              Hide
              barbararamiro Barbara Ramiro added a comment -

              Apu, attached is moodle-org-html-css-bootstrap-mockup.zip

              Show
              barbararamiro Barbara Ramiro added a comment - Apu, attached is moodle-org-html-css-bootstrap-mockup.zip
              Hide
              barbararamiro Barbara Ramiro added a comment -

              Apu, just to give you an idea for the sites menu on the top left. The styles are temporary only.


              study-13-sites-menu-a.jpg

              study-13-sites-menu-b.jpg

              Show
              barbararamiro Barbara Ramiro added a comment - Apu, just to give you an idea for the sites menu on the top left. The styles are temporary only. study-13-sites-menu-a.jpg study-13-sites-menu-b.jpg
              Hide
              lazydaisy Mary Evans added a comment -

              @Aparup, while creating a new theme for Moodle 2.4 recently I was able to use the normal custom menu incorporating some bootstrap styles. So the menu Barbara has loaded should work exactly as she has it.

              If you want the CSS I can add it here.

              Show
              lazydaisy Mary Evans added a comment - @Aparup, while creating a new theme for Moodle 2.4 recently I was able to use the normal custom menu incorporating some bootstrap styles. So the menu Barbara has loaded should work exactly as she has it. If you want the CSS I can add it here.
              Hide
              lazydaisy Mary Evans added a comment -

              @Aparup, or @Dan,

              I'm having problems trying to add the new theme to my localhost server.
              I'm not used to adding themes built as a branch off another theme. All in all I ended with errors.

              I tried to clone it directly into the theme directory on my Moodle(master) but got the wrong branch.
              git clone git://github.com/moodlehq/moodle-theme_moodleofficial/tree/moodleorgcleaned gave me errors.

              I have not tried fetch yet as I don't think that will work.

              I must be doing something wrong. HELP!

              Show
              lazydaisy Mary Evans added a comment - @Aparup, or @Dan, I'm having problems trying to add the new theme to my localhost server. I'm not used to adding themes built as a branch off another theme. All in all I ended with errors. I tried to clone it directly into the theme directory on my Moodle(master) but got the wrong branch. git clone git://github.com/moodlehq/moodle-theme_moodleofficial/tree/moodleorgcleaned gave me errors. I have not tried fetch yet as I don't think that will work. I must be doing something wrong. HELP!
              Hide
              lazydaisy Mary Evans added a comment -

              Panic over...I just figured it out!
              It's like a mini moodle.git...

              Show
              lazydaisy Mary Evans added a comment - Panic over...I just figured it out! It's like a mini moodle.git...
              Hide
              lazydaisy Mary Evans added a comment - - edited

              @Aparup,

              I was trying to figure out the menu renderers last night, and got totally lost in all the code. I can't understand why the sub-menus don't work as they do in bootstrapbase.

              Also, when using a screen resolution of 1024px x 768px the actual area from the logo to the search bar is limited to about three items and the language icon.

              I also found that the dropdown menus of the mycourses and language, were displaced. However, I did find that if I changed the class, as is set for those two menus in the renderers.php, from 'pull-right' to 'pull-left' the drop-down menus are spot on.

              The biggest problem that I got was with the blocks on the frontpage. For some reason they do not appear to be able to be opened, nor closed, neither do the any of the links work. If the block is open you cannot select any of the links, or expand a collapsed link, yet they work OK when the page is using the general.php. Given that the frontpage uses a new layout and different php for the blocks, I'm guessing it's this that is causing the problem.

              Show
              lazydaisy Mary Evans added a comment - - edited @Aparup, I was trying to figure out the menu renderers last night, and got totally lost in all the code. I can't understand why the sub-menus don't work as they do in bootstrapbase. Also, when using a screen resolution of 1024px x 768px the actual area from the logo to the search bar is limited to about three items and the language icon. I also found that the dropdown menus of the mycourses and language, were displaced. However, I did find that if I changed the class, as is set for those two menus in the renderers.php, from 'pull-right' to 'pull-left' the drop-down menus are spot on. The biggest problem that I got was with the blocks on the frontpage. For some reason they do not appear to be able to be opened, nor closed, neither do the any of the links work. If the block is open you cannot select any of the links, or expand a collapsed link, yet they work OK when the page is using the general.php. Given that the frontpage uses a new layout and different php for the blocks, I'm guessing it's this that is causing the problem.
              Hide
              nebgor Aparup Banerjee added a comment -

              Mary, yes its all very gitly , glad you got it working.

              I'm assuming there must be a responsive way that the navbar menus should behave for smaller screens, ah yes; it becomes the grey hamburger icon with a drop down header area of all the menus, in theme_clean. The sub-menus are working there too in both modes. Will have to get it working similarly, looking into it, i suspect i might have to implement custom_menu in a way that inherits from theme_clean, the current one is probably too old.

              I'm working with frontpage atm to work out all the kinks, thanks for pointing out the blocks. (frontpage is quickly becoming my theme_clean learning curve page )

              Show
              nebgor Aparup Banerjee added a comment - Mary, yes its all very gitly , glad you got it working. I'm assuming there must be a responsive way that the navbar menus should behave for smaller screens, ah yes; it becomes the grey hamburger icon with a drop down header area of all the menus, in theme_clean. The sub-menus are working there too in both modes. Will have to get it working similarly, looking into it, i suspect i might have to implement custom_menu in a way that inherits from theme_clean, the current one is probably too old. I'm working with frontpage atm to work out all the kinks, thanks for pointing out the blocks. (frontpage is quickly becoming my theme_clean learning curve page )
              Hide
              lazydaisy Mary Evans added a comment -

              Hi Aparup,

              It's a steep learning curve but can be fun too. It's actually easier if you learn how Bootstrap works as a normal web page. Here is the first of a set of tutorials I came across which I found very useful. Bootstrap 2.0 Intro

              As for the navbar/menu it would be just as easy to clone Clean Theme and adapt the menu there, or extend the bootstrapbase/renderers/core_renderer.php is perhaps the quickest.

              Show
              lazydaisy Mary Evans added a comment - Hi Aparup, It's a steep learning curve but can be fun too. It's actually easier if you learn how Bootstrap works as a normal web page. Here is the first of a set of tutorials I came across which I found very useful. Bootstrap 2.0 Intro As for the navbar/menu it would be just as easy to clone Clean Theme and adapt the menu there, or extend the bootstrapbase/renderers/core_renderer.php is perhaps the quickest.
              Hide
              nebgor Aparup Banerjee added a comment -

              thanks, yes i've got the menus and sub-menus working here locally with hamburger icons .
              and i got to extending bootstrapbase renderer as well (which is better, agreed). working on the footer atm.

              Show
              nebgor Aparup Banerjee added a comment - thanks, yes i've got the menus and sub-menus working here locally with hamburger icons . and i got to extending bootstrapbase renderer as well (which is better, agreed). working on the footer atm.
              Hide
              lazydaisy Mary Evans added a comment - - edited

              @Aparup, I can see the need for change, but sorry to see that the Moodle logo has gone from the front page

              I hope it's only temporary?

              I came across a fluid display problem just now while testing this theme. It looks like it's a Bootstrap one or one created in Bootstrapbase. I have a feeling it was added to adjust the page for docking blocks, I may be wrong, anyway, it's wrong.

              This is coming from the page-content set as...

              <div id="page-content" class="row-fluid">

              then further down we have...

              <section id="region-content" class="span12">

              which in turn is styled as follows...

              .row-fluid [class*="span"] {
                  -moz-box-sizing: border-box;
                  display: block;
                  float: left;
                  margin-left: 2.5641%;
                  min-height: 30px;
                  width: 100%;
              }
              

              You cannot have a width of 100% and have a margin at the same time, without adjusting the width. So in the above case, the width needs to either be auto or 97.87234% (100% - 2,12766% = 97.87234%) to make the overall page 100%. At the moment the page looks lopsided.

              Also $page->requires->jquery(); has been left off in the theme's lib.php at line 49

              Show
              lazydaisy Mary Evans added a comment - - edited @Aparup, I can see the need for change, but sorry to see that the Moodle logo has gone from the front page I hope it's only temporary? I came across a fluid display problem just now while testing this theme. It looks like it's a Bootstrap one or one created in Bootstrapbase. I have a feeling it was added to adjust the page for docking blocks, I may be wrong, anyway, it's wrong. This is coming from the page-content set as... < div id = "page-content" class = "row-fluid" > then further down we have... < section id = "region-content" class = "span12" > which in turn is styled as follows... .row-fluid [class*="span"] { -moz-box-sizing: border-box; display: block; float: left; margin-left: 2.5641%; min-height: 30px; width: 100%; } You cannot have a width of 100% and have a margin at the same time, without adjusting the width. So in the above case, the width needs to either be auto or 97.87234% (100% - 2,12766% = 97.87234%) to make the overall page 100%. At the moment the page looks lopsided. Also $page->requires->jquery(); has been left off in the theme's lib.php at line 49
              Hide
              lazydaisy Mary Evans added a comment -

              @Aparup,

              I have just checked this and find it is set in the original Bootstrap CSS. Even so I would consider this a bug. Which will affect Bootstrapbase themes.

              This is probably what's throwing Clean theme too much to the right too.

              Show
              lazydaisy Mary Evans added a comment - @Aparup, I have just checked this and find it is set in the original Bootstrap CSS. Even so I would consider this a bug. Which will affect Bootstrapbase themes. This is probably what's throwing Clean theme too much to the right too.
              Hide
              lazydaisy Mary Evans added a comment - - edited

              @Aparup, ul.thumbnails could do with margins left and right to make it display better...

              ul.thumbnails {
                  margin: 0 55px;
                  width: auto;
              }
              

              Show
              lazydaisy Mary Evans added a comment - - edited @Aparup, ul.thumbnails could do with margins left and right to make it display better... ul.thumbnails { margin: 0 55px; width: auto; }
              Hide
              nebgor Aparup Banerjee added a comment - - edited

              thanks for the feedback Mary, i hope i've improved the lopsidedness now.
              i've got the logo back but for some reason on clone the menu is floating over onto it. (not locally )

              edit: fixing that now, i had a local hack to my moodle in render_custom_menu while testing 'pull-right' ...

              Show
              nebgor Aparup Banerjee added a comment - - edited thanks for the feedback Mary, i hope i've improved the lopsidedness now. i've got the logo back but for some reason on clone the menu is floating over onto it. (not locally ) edit: fixing that now, i had a local hack to my moodle in render_custom_menu while testing 'pull-right' ...
              Hide
              nebgor Aparup Banerjee added a comment -

              As its not really reflected in this issue, the designs have evolved within MDLSITE-1890. I'm now working with the ideas portrayed in heading-org.png in that issue, mainly the other menu starting with "About, News .." and having that responsive as well.

              Show
              nebgor Aparup Banerjee added a comment - As its not really reflected in this issue, the designs have evolved within MDLSITE-1890 . I'm now working with the ideas portrayed in heading-org.png in that issue, mainly the other menu starting with "About, News .." and having that responsive as well.
              Hide
              nebgor Aparup Banerjee added a comment -

              trying epics

              Show
              nebgor Aparup Banerjee added a comment - trying epics
              Hide
              nebgor Aparup Banerjee added a comment -

              attached menu design (copied from MDLSITE-1890)

              Show
              nebgor Aparup Banerjee added a comment - attached menu design (copied from MDLSITE-1890 )
              Hide
              mspurrier Matthew Spurrier added a comment -

              One thing I noticed was the 'you are currently using guest account' is really really tiny.

              Show
              mspurrier Matthew Spurrier added a comment - One thing I noticed was the 'you are currently using guest account' is really really tiny.
              Hide
              nebgor Aparup Banerjee added a comment -

              re duplicate lang menu in top sites menu : -

              will wait for a fix to MDL-40771 before attempting to duplicate a responsive renderer for this theme.

              temporarily, will just display:none for now.

              Show
              nebgor Aparup Banerjee added a comment - re duplicate lang menu in top sites menu : - will wait for a fix to MDL-40771 before attempting to duplicate a responsive renderer for this theme. temporarily, will just display:none for now.
              Hide
              nebgor Aparup Banerjee added a comment -

              Theme has been successfully created and deployed to moodle.org!

              Show
              nebgor Aparup Banerjee added a comment - Theme has been successfully created and deployed to moodle.org!
              Hide
              mspurrier Matthew Spurrier added a comment -

              End of an Era..

              16/8/12 - 30/1/14.

              Show
              mspurrier Matthew Spurrier added a comment - End of an Era.. 16/8/12 - 30/1/14.
              Hide
              tsala Helen Foster added a comment -

              Great work Apu, Barbara and everyone else who has worked on the new theme for moodle.org. I love it!

              Just reopening this issue though, as there are open subtasks. Apologies for the mix-up.

              Show
              tsala Helen Foster added a comment - Great work Apu, Barbara and everyone else who has worked on the new theme for moodle.org. I love it! Just reopening this issue though, as there are open subtasks. Apologies for the mix-up.
              Hide
              derekcx Derek Chirnside added a comment -

              Guys, this is looking great. Awesome in fact. However, lots and lots of things here, there even seems to be two lists I can see, and I'm finding it difficult to decide if what I'd like to suggest is here or not. What's the best way to look at this? Is this 1-22 list sort of definitive, and should we add to it? (Can we add to it?) How bad is it really if I add a couple of things that are distractions and duplicates?

              -Derek

              Show
              derekcx Derek Chirnside added a comment - Guys, this is looking great. Awesome in fact. However, lots and lots of things here, there even seems to be two lists I can see, and I'm finding it difficult to decide if what I'd like to suggest is here or not. What's the best way to look at this? Is this 1-22 list sort of definitive, and should we add to it? (Can we add to it?) How bad is it really if I add a couple of things that are distractions and duplicates? -Derek
              Hide
              tsala Helen Foster added a comment -

              Thanks Derek, glad you like the new theme for moodle.org. You're welcome to add to the list, though of course we can't promise to fix everything.

              Show
              tsala Helen Foster added a comment - Thanks Derek, glad you like the new theme for moodle.org. You're welcome to add to the list, though of course we can't promise to fix everything.
              Hide
              tsala Helen Foster added a comment -

              Re-resolving as all open subtasks have been moved issues in the epic MDLSITE-1862.

              Show
              tsala Helen Foster added a comment - Re-resolving as all open subtasks have been moved issues in the epic MDLSITE-1862 .

                People

                • Votes:
                  1 Vote for this issue
                  Watchers:
                  11 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: