EduMoodle Theme - NEW

EduMoodle Theme - NEW

Dan Humpherson -
回帖数:46
I have recently been working on creating a Moodle Theme suitable for Secondary and Primary Education in the UK.

The theme is based on a Joomla theme produced by a group of users at www.edugeek.net - so big thanks to them for allowing my to produce a Moodle clone.

Theme designed on Moodle 1.8.4+

The theme can be viewed here: http://moodle.jonahosting.com/moodle/

The topic section details two zip files:

1. Download the complete theme

2. Download the icon set used (famfamfam.com credit for icon designs)

Also used the Newbury navigation bar.

I have submitted the theme to the database in the hope it will be added, any feedback appreciated.
平均分:Useful (1)
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Julian Ridden -
Great stuff. Love the reflection in the footer.

Your theme is now available inside the Themes Database as well.

Hope you keep producing more to share when you have the time.

Julian
回复Julian Ridden

Re: EduMoodle Theme - NEW

Dan Humpherson -
Theme has been updated. Some very basic mistakes made by myself in the intial theme setup, E.g. Meta.php pointing to the incorrect theme. Notes in the theme database on what has been edited and how to update the theme if you have already downloaded it.
回复Dan Humpherson

回复: EduMoodle Theme - NEW

罗 逆光 -
where? it's like to cann't be downloaded!
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Jaap Marsman -
I forgot that the forum was the correct place to discuss stuff regarding the theme... apologies for cluttering the theme-page... 微笑

Below a reprint of the issues I'm currently facing with this fantastic theme:

Question 1:

Now I'm really liking that menubar.php. I've tried to modify header.html and removed the:

<div class="menubar">
<?php
{
include('menubar.php');
}
?>
</div>

code from the "mainpage only" area. I've put it in the "<?php } else if ($heading) {" area.

This works beautifully, the menubar gets printed on every page. However, it also gets printed on (here we go again) the messages-window etc. Is there an easy way to exclude those pages from getting this menubar?

Question 2:

Unfortunately, I've stumbled across another fixed-width issue... when trying to view a glossary-item, the window isn't resized properly as well. I've tried adding the following to styles-layout.php, but no success:

#mod-resource-view #page {
width: 980px;
margin: 0;
}
#mod-glossary-showentry #page {
width: 980px;
margin: 0;
padding: 0;
}
#mod-glossary-index #page {
width: 980px;
margin: 0;
padding: 0;
}
body#mod-resource-view {
width: 980px;
margin: 0;
padding: 0;
}
body#mod-glossary-showentry {
width: 980px;
margin: 0;
padding: 0;
}

It is the mod/glossary/showentry.php file that is called, so I'm somewhat baffled how to fix this... am I using the wrong syntaxis?
回复Jaap Marsman

Re: EduMoodle Theme - NEW

Africa Riviera -
Hello Jaap,
Did you get a response for Question #1?

You stated that that changed - I've put it in the "<?php } else if ($heading) {" area.
I am not sure what you're referring to. Can you elaborate?

If so, please post by informing us know how to accomplish to display menu navigation bar and slide show on all moodle pages.

Thank you for your time. smile
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Bambang Wijanarko -
Good and i am try to build this webmoodle for student central kalimantan Indonesia www,gurumandiri.com
回复Bambang Wijanarko

Re: EduMoodle Theme - NEW

David Brighton -
This is really nice, thanks Dan! We are hoping to use this from September, it certainly looks very slick and professional, well done! I am having a bit of trouble with firefox though, the slideshow seems to be centering on the right margin. I have attached an illustration, also the breadcrumbs seem to be right aligning as well. IE seems ok. I have tried digging about in the code but my knowledge of how divs and layout work is pretty shaky! Anyone else having this or is it just me?

Cheers

D
附件 themeprob.jpg
回复David Brighton

Re: EduMoodle Theme - NEW

Jaap Marsman -
Hi David,

Which version of Moodle are you using? For me it worked perfectly in 1.9.0 and 1.9.2. Tested in Firefox, IE and Safari.
回复Jaap Marsman

Re: EduMoodle Theme - NEW

David Brighton -
Ah, I have just reverted to a pristine version of this and it is working correctly,blush I think there may be an error in my css file as I had edited that to make the hidden items distinct. Even after I mangled it, our staff were stiff very impressed with the design of this. Will start again with the localisation!

Cheers

D
回复David Brighton

Re: EduMoodle Theme - NEW

David Brighton -
All working now, thanks again Dan for sharing this, I think our site looks fantastic! I have found a couple of little issues, mostly with small odd layout errors (we run 1.9.2), the message above will indicate my inability to fix this sort of thing, but would you like things I find here or by PM? Nothing crucial.

Cheers

D
回复David Brighton

Re: EduMoodle Theme - NEW

Dan Humpherson -
Feel free to post any niggles here, that way everybody sees the benefit by me replying, or others may also be able to help you.

Glad you like them theme!
回复Dan Humpherson

Re: EduMoodle Theme - NEW

David Brighton -
Hi Dan

Sorry, I am busy setting up for the next intake so this may come in dribbles. From the user's perspective I think it is ok.
  • There is a slight layout problem in IE6 for the login block on the front page, the username and text box do not line up properly. It is ok in Firefox.
  • Also, would it be possible to indent subsections of the admin block? I find that easier to navigate.
  • There are some layout problems with other third party blocks, eg the User Admin tool, but I suspect that is an issue there, have attached a pic anyway.
On our live site I have also compressed the header and footer etc graphics and changed the slideshow to improve speed a little. Have changed it to a single random image using http://ma.tt/scripts/randomimage/ which reduces the loading time. I have had no negative comments from our teachers or students, they all seem to love it!

Cheers

David
附件 probs.jpg
回复David Brighton

Re: EduMoodle Theme - NEW

Dan Humpherson -
Are you using Moodle 1.9 or 1.8?

EduMoodle was designed to work with 1.8 rather than 1.9 and has had only limited testing on 1.9.

Im looking into the Login box but with work picking up its hard to find the time.

Regarding the 3rd party block, this may have its onw style which needs correcting to fix the issues, it may also not be well suited to a fixed with theme.
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Jaap Marsman -
Hey Dan,

Have you had time to look into my question regarding the menubar being rendered on all pages, except the popup-windows? Or is this simply not feasible?

Thanks again!
回复Jaap Marsman

Re: EduMoodle Theme - NEW

David Brighton -
Hi Dan, yes, this may be a 1.9.2 version issue, as this is the version we are using. I also suspect IE. None of the issues I have found are critical imho, and they are all admin facing rather than student, so I am in no hurry! I suspect that the start of your academic year is looming too close for most of us.

Cheers

D
回复David Brighton

Re: EduMoodle Theme - NEW

Nicholas Sell -
I finally found the padding section for the menu...

After this:
.block_admin_tree .admintree {
text-align:left;
}

Put in this:

.block_admin_tree .admintree .depth1 {
padding-left:16px;
}

.block_admin_tree .admintree .depth2 {
padding-left:32px;
}

.block_admin_tree .admintree .depth3 {
padding-left:48px;
}

.block_admin_tree .admintree .depth4 {
padding-left:64px;
}


I love this theme, so I'll continue working on the leftover fixes...
回复David Brighton

Re: EduMoodle Theme - NEW

andrew singleton -
did you ever solve the ie6 allignment of the username password fields - driving me crazy! any help be greatly appreciated
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Geof Duncan -
Dan,

LOVE your theme. When I saw it, I knew I had to adopt it to one of my moodle sites.

A couple of minor details..

1 - When a resource or activity is hidden from student view, moodle themes usually dim the link so that the instructor can see that it is hidden. This is left out of your theme...

Change line 37 of styles_color.css to the following and it works as expected.
a.dimmed:link,
a.dimmed:visited {
color:#AAAAAA;
}

2 - When highlighting a topic as a current topic your css uses the same cell background as a topic that is hidden from student view. When viewing a course with hidden topics and a current topic, this gets to be a little confusing.

I elected to use a light goldenrod to highlight the current topic. It worked well with my color scheme, but, your mileage may vary. I also elected to show the highlight color on both sides as opposed to just the left side to be more consistent with hidden topics. I made the following changes to lines 595 - 600 of styles_color.css:
* Changed .left to .side to enable color on both sides - line 597
* Changed background color to light goldenrod (#FAF8CC) - line 598
* Changed text color back to black to work better with goldenrod - 599

/*Change .left to .side for both sides*/
#course-view .weekscss .current,
#course-view .current td.side{
background: #FAF8CC;
color: #000;
}

Just my own additions, the second change was purely cosmetic, but, I really did miss the dimmed links as an instructor. Great theme, love using it!!!

-Geof
回复Geof Duncan

Re: EduMoodle Theme - NEW

Dan Humpherson -
Cheers Geof, glad you like it and i appreciate your changes they make them theme much more functional.

------------
Login Box:

I've also got a bit of code which should solve the login box error in IE:

Add the following to the end of styles_layout.css

.block_login .loginform{
padding: 0;
margin: 0;
}
#login_username{
width: 150px;
}
#login_password {
width: 150px;
}
.block_login .c1 {
margin: 0px 10px 0px 0px;
}

Should do the trick and makes the box a bit neater.

------------------

Navbar appearing on all pages, do you want it to appear on all pages or do you not want it appearing on all pages?

回复Dan Humpherson

Re: EduMoodle Theme - NEW

Jaap Marsman -
The thing is, I've been trying to have it appear on *almost* all pages. I don't want it to appear in popup-windows. Like, the message-boxes, glossary, etc. So far, I haven't figured out how, unfortunately!
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Smita Aggarwal -

A great theme Dan!

I have used on my site and it looks good, though my site is still in development.

Further I tried making some minor changes to the theme, however in vain. Hope you can help with this.

I will like to have the slideshow only for the home page and have a very different header image (instead of slide show) on the Home Page of a logged in user.

Currently the code written in the header.html as follows:

if ($home)
Show slideshow
<?php }
else if ($heading) ?>
Show image 1
<?php } ?>

This code shows the slideshow on Home page (irrespective whether the user is logged in or not) and for any page with a heading like 'Categories' the image 1 is shown. However I want the logged in user (user landing on main page of website after login) to see image 1 as well. How can I achieve this?

Any help will be greatly appreciated.

Thanks!

-Smita

回复Smita Aggarwal

Re: EduMoodle Theme - NEW

Dan Humpherson -
Im not sure it is possible to switch the header html via php if the users is logged in or not.

I am only aware of switching the header based on front page or any other page.

It my be possible but you would need to know what the variable is which will let you add html based on logged in or not logged in.




回复Dan Humpherson

Re: EduMoodle Theme - ICONS

Geof Duncan -
Hey Dan,

I was working today in my Moodle site and noticed that the icon for "Exercise" was missing in my Administration: Modules: Activities page... (see http://yourmoodlesite.com/moodle/admin/modules.com). Well, this led me to want to change a few of the other icons on this page to match the famfamfam.com icon set. So, I made the following changes and have attached them to this post in a zip archive for ease of use.

Simply unzip the attached file to your 'pix' folder inside of the EduMoodle theme folder and everything should be put in the correct place.

I've modified/added six icons from the famfamfam.com Silk icon set:
  • Database (Base icon)
  • Exercise (Exercise icon)
  • Game (Game icon)
  • Journal (Journal icon)
  • Label (Label icon)
  • Workshop (Workshop icon)
Enjoy!
-Geof
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Marta Fonseca -

Hi Dan,

 

I hope you can help me with a little theme problem in IE! In Firefox is ok.

 

When I switch between edition button off to edition editing on, the page grows to the right.

 

附件 theme.GIF
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Jaap Marsman -
After some tinkering, I've come up with a way to render the menubar on the front page, course category page and all the course pages.

It's a very simply (not really elegant, but hey, it works!) modification of header.html. Search for the area where it calls for "div1.php" and "div2.php" and all will be revealed.

I'm sure there's a clean way to add HTML code inside the PHP code, but I couldn't really understand that part. 微笑

This way, overhead on my server is lowered slightly because the main page is rather graphic-intensive. I've built a rather complete menubar (kinda like Newbury College) so it was a hassle to constantly surf back to the main page to navigate.

I hope others enjoy this just as much as I do!
回复Jaap Marsman

Re: EduMoodle Theme - NEW

Africa Riviera -
Hello,
Can you show me your moodle site that uses your changed header.html page?
I tried what you recommended and I still cannot get it to work properly.
When I navigate to another page, the menu and the slide show does not appear - only on the front home page.

The site is: http://www.acupuncturefoundation.com/

Your reply would be greatly appreciated.
Thanks for your time.

回复Africa Riviera

Re: EduMoodle Theme - NEW

Dan Humpherson -
For those of you who want the slideshow and menu to appear on every Moodle page and not just the front page you need to edit header.html:

Open header.html and locate the line:

<div class="FrontSlideshow">

Copy this line and every line below it till you reach:

<div class="menubar">
<?php
{
include('menubar.php');
}
?>
</div></div>

If you want the slideshow on everypage but not the menu stop above <div class="menubar">

If you want the slideshow and menu on everypage copy these lines as well.

Now once you have copied the lines scroll down till you find:

<div id="header-home" class="clearfix">
<h1 class="headermain">&nbsp;</h1>
<div class="headermenu"></div>
</div>

PASTE THE LINES HERE!!!!

<?php } ?>

Paste the lines where indicated above, and save. That should do the trick.


回复Dan Humpherson

Re: EduMoodle Theme - NEW

Africa Riviera -
Hello Left Foot,
Thank you so much for the reply.
This theme is awesome and I really appreciate your help! smile

Just wanted to add that when I added the code above <div class="FrontSlideshow">:

<!-- Slideshow Code - This must not be place in the <HEAD> as it breaks the HTML Editor-->
<script type="text/javascript" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/slideshow/rokslideshow/mootools-release-1.11.js"></script>
<script type="text/javascript" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/slideshow/rokslideshow/rokslideshow.js"></script>
<link href="<?php echo $CFG->themewww .'/'. current_theme() ?>/slideshow/styles/style.css" rel="stylesheet" type="text/css" />
<!-- Slideshow Code End -->

That added the slideshow and menu on all pages.

Thank you again!
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Nelma da Conceição -
Hi Dan, first of all...congratulations for your theme...it´s great!

I´m using it in my website and I´ve made some changes in it´s layout. Now, could you help me making the slideshow bar smaller (it´s height)?

Thanks in advance for your help.

Nelma
回复Nelma da Conceição

Re: EduMoodle Theme - NEW

David Brighton -
Hi Nelma, we changed the slideshow completely, I have just had a look and I think that the setting you want is in styles_layout.css. Make a backup in case this is wrong, but I think if you chanbe the height setting and the image heights to match. The example below is set to 80 pixels.

#header {
}
.headermain, h1.headermain {
float:left;
margin:2px;
padding:10px;
margin-left: 20px;
color: #fff;
background-image: url('logo.gif');
background-repeat: no-repeat;
height: 80px;
width: 500px;
}

Good Luck!
回复David Brighton

Re: EduMoodle Theme - NEW

David Brighton -
Also, while I am here, we seem to be having a problem displaying scorm. If you show it on the same page it is too small and the height and width settings have no effect. I reset the theme in the affected course and it works as expected. I could not find any settings that seem to relate to scorm in the theme files though, any tips on where this is set?

Cheers

David
回复David Brighton

Re: EduMoodle Theme - NEW

Dan Humpherson -
Sorry I have been so poor at replying to queries regarding the EduMoodle Theme, very busy at work and also attempting to create 2 themes for 2 other private companies.

I'll try my best to look at one or two of the issues, and hopefully ill be releasing an updated version of the theme which i have been working on.


回复David Brighton

Re: EduMoodle Theme - NEW

Stuart Hector -

Can someone advise me where I would make this change in the Moodle 2.0 version of this theme ?

回复Stuart Hector

Re: EduMoodle Theme - NEW

Mary Evans -

Does the EduMoodle for Moodle 2.0 work in your version of Moodle 2.0, because I can't get it to work at all in mine, and I am using the most up-to-date version of Moodle.

In fact, as far as I know, EduMoodle for Moodle 2.0 has not been updated in quite a while, and the last time I checked it still had the faults.

So I am not sure what you are asking to change. If it is related to the question above then, I can't help you for the reasons I have just pointed out.

Here is the Moodle 2.0 version of the theme. And its related forum discussion

Mary

回复Mary Evans

Re: EduMoodle Theme - NEW

Stuart Hector -

Hi Mary,

I've not had any problems with EduMoodle. I was just trying to find out how to resize the Slide show.

Thanks for pointing me to the other discussion.

Stuart.

回复Stuart Hector

Re: EduMoodle Theme - NEW

Mary Evans -

Resizing the slide-show is a bit tricky, but there should be a seperate CSS style sheet for the slider.

EDIT: I've just found that the css for the slider is in edumoodlecustom.css file

Width changes are done via the css.

HTH

Mary

回复Dan Humpherson

Re: EduMoodle Theme - NEW

Africa Riviera -
Hello,
I hope all is well.

May I ask for your assistance please?

Regarding the EduMoodle theme and having the menu bar and slide show appear on all pages, is not currently working - only appears on home page. Can you inform me of code that needs to change in the header.html or menu.php file so that the menu navigation bar and slide show is visible on all moodle pages?


Current code in header.html:

<div class="menubar">
<?php
{
include('menubar.php');
}
?>
</div>
</div>

<?php } else if ($heading) { // This is what gets printed on any other page with a heading
?>
<div id="header-home" class="clearfix">
<h1 class="headermain">&nbsp;</h1>
<div class="headermenu"><?php echo $menu ?></div>
</div>
<?php } ?>


This would be a huge help and I appreciate your time.

Thank you so much.

Africa Riviera

回复Dan Humpherson

Re: EduMoodle Theme - NEW

Giovanni Pineda -
Hello everybody!

Very nice theme!

I have a simple question: I would like to have logo.png (see atached image) converted into a link or insert a link somewhere inside class="headermain".
How do I proceede?

thanks in advance!
附件 copia.png
回复Giovanni Pineda

Re: EduMoodle Theme - NEW

Giovanni Pineda -
Hello!

I found the solution: Very simple, I just included a link after
 <div class="headermenu"><?php echo $menu ?></div> and thats all.

cheers.
回复Dan Humpherson

Messaging problems

Matt Gibson -
Love the theme, but the message window is a mess. Anyone else finding this?
回复Matt Gibson

Re: Messaging problems

Dan Humpherson -
Have you got a screenshot of the problem? Or could you define the problem a little more?
回复Dan Humpherson

Re: Messaging problems

Frank Ralf -
Hi Dan,

Here's a screenshot of the problem (Firefox 3).

* You have to scroll up to see the messages.
* You have to resize the window to see the menu for "Add contact" etc.

There's a similar problem with the messages window (moodle/message/index.php)..

Frank
附件 EduMoodle_message_window.png
回复Dan Humpherson

Re: EduMoodle Theme - NEW

Jose Pizarro -

First of all thanks to all of you that are helping the newbies getting along with this awsome product. Right now we have a challenge for the pros. We want to move the slideshow to the main content area if it can be done. I'm posting a picture for reference and thanks in advance....

How