I've just been reworking Aardvark Lite for Moodle 2.0 and made some modifications. In other words I've given it a 'makeover'. hence the new name. It's an experiment in layout more than anything. Here's a screenshot.
Version 1 (download)
You can download this latest version of the theme HERE
Cheers
Mary
Mary,
I'd like to try this out, but unfortunately I keep timing out trying to reach your server.
Hi Mary
This is brilliant. I just need to work on the banner now. Where do I switch off the additional menus that have appeared "Logout, My Profile etc".
Also need to work out where to turn off the Pinkish text and change the colour - the lads I teach will not apprechiate pink
What do you mean switch off the logout/my profile/my courses humph!!! this is what people want! this is my "Pièce de Résistance" - and YOU want to leave it out!
OK...If you dont want the extra tabs after logout then you need to modify the renderers.php by VERY CAREFULLY deleting the following highlighted lines of code... Use Notepad for this.
if (isloggedin()) {
$branchlabel = get_string('logout');
$branchurl = new moodle_url('/login/logout.php');
$branchtitle = $branchlabel;
$branchsort = -3;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
$branchlabel = get_string('mycourses');
$branchurl = new moodle_url('/my/index.php');
$branchtitle = $branchlabel;
$branchsort = -2;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
$branchlabel = get_string('myprofile');
$branchurl = new moodle_url('/user/profile.php');
$branchtitle = $branchlabel;
$branchsort = -1;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
}else{
Hey - the menu is excellent - just I really want to shift the logout option off the menu back to the top (beside the name) - especially because most of the access to our Moodle will be via NTLM login. In addition, I need to have extra menu options to keep my Headteacher happy Especially linking back to the main school website. We have 2 websites - Moodle which will act as a Portal for all things learning and the 'corporate side'.
Mary, what you do for the Themes along with Sean is amazing. Both of you have a really sense of design. I am getting to grips with Moodle after a 4yr break of being forced to use the local authority option. I've gone straight in with Moodle 2 and am amazed at the radical changes there have been (mostly for the better).
Oh you can join the We Aardvark Fan Club with talk like that! LOL
OK...what exactly do you want in the header as far as login on goes?
Well when you are a happily stressed Head of ICT trying to now get things sorted from a dreadful base - plus have a nearly 3 yr old at home and a wife whose a Dept Head I use all the resources I can get hold of to boost learning and make my life easier and so spend more time with my family.
I am looking to have Welcome to Moodle X! (Logout). I'd really like Good Morning, Afternoon, Evening but I guess a little PHP coding might have to be done later
It would be good to have the Name link to the profile as well.
The only other theme I love will be if the mymobile one will come of age.
We can fix that easy enough. The theme has a profile block which can be adapted to suit your every whim! Just needs a little adjustment, here and there.
Arctic theme works in a similar way...
Cheers
Mary
Brilliant. Thanks....
I've been playing with the php so the menu changes when someone logs on.
The two things I like from Sean's site - http://moodle.newbury-college.ac.uk are that the width of the menu is shorter - in particular it varies for different menus. In addition, the use of the House icon for home. Which would be nice to replicate.
Finally I really like the date in the theme. Would be good to have it in there somewhere. It gives any site the 'feeling' it is constantly updated.
I also feel his Calendar layout is a little bit better - but then I've still not seen many good calendar layouts with 2.0 - has something changed with the Calendar block to make it more cumbersome to get a good layout? I do like the bigger numbers for a start and bolder lettering.
Thanks
James
I'd like to see your diff for the logged in/logged out menus - as that's the way we use it now, but isn't readily available in 2.0
Hi Daniel
You need to play with renders.php and add things in manually. If you look at the php code you will see that there is a different routine if you are logged in compared to if you are not.
As we are using NTLM in school and some of the URLs used (e.g. careers software) we have paid for access and therefore can't give away. I've just added in something manually at the moment. I'll need to take apart renders.php to create a more hierarchical menu system manually, but I am afraid that is for the summer hols and if I have time - which I doubt!
J.
Hi James,
You are aware that you can populate the custom menu in Site Administration > Appearance > Themes > Theme settings page (scroll right to bottom of that page).
All the renderer.php does is takes the data entered in the theme setting page for the custom menu items and styles it. It bypasses the most annoying YUI CSS custom menu styling, and gives you a nice looking menu.
Cheers
Mary
Hi Mary
Yes, am using both. Just I am having to play having some extra menus available once a student has been logged in because of the licensing issues with some online facilities. We have access to a careers database where you get a 30 character key code as part of the URL of random letters and numbers so we can login. I'd be shot if I made such codes available to all!
Hi Daniel,
Did you get the link to my GIT download page?
All the info is in the renderers.php. I got the idea after reading the tutorial Sam Hemelryk wrote How to extend the custom menu.
Cheers
Mary
If you use Firefox, try changing the advanced features for custom layout of font sizes, by making the minimum font size 14pt, and then see what it does to the calendar!!! (Tools > Options > Content > Fonts & Colours > Advanced > Min Font Size=14)
Browsers are great if you have them set right.
Mary
Hi
I see - but my trouble is people (especially students!) don't know how to setup browsers correctly or like me flick between IE, Firefox and Chrome! I'll just change the mini cal CSS from 0.8em to 1.1 or 1.2em.
You could try setting it to 100%.
Have sorted it and the menu (to auto) and so it looks good given the other CSS changes.
It hasn't been easy - but well worth it.
James
It looks stunning! I'm really impressed. I could do with adding this CSS into the theme. I'll make you co-author of the theme! LOL
Here is the code for the date...
<?php
echo '<div id="mainmenu-date">';
echo '<a href="'.$CFG->wwwroot.'/calendar/view.php">';
echo userdate(date('U'));
echo '</a></div>';
?>
it adds time too.
HTH
Mary
Where would you place this?
Mary
Hi - I am struggling with editing renders.php - I want to add a link to left of the home icon - this link points to the site the moodle system is held within e.g http://talkmedicalonline.co.uk and moodle sits in the following = talkmedicalonline.co.uk/moodle.
For example - this is where I am but I am not sure how to set $branchurl to the wwwroot
$branchlabel = "";
$branchurl = ".$CFG->wwwroot";
$branchtitle = get_string('mainhome');
$branchsort = -3;
$branchlabel = "";
$branchurl = new moodle_url('/index.php');
$branchtitle = get_string('home');
$branchsort = -2;
The top link should point to the external site - I can see that in weblib.php that new moodle_url is a function - I just start getting lost and I am sure it is simple but the moodle_url has several if clauses that deal fine with the normal situtaion (of /index.php) but I cant seem to work around. I am not an ace at PHP but I can see basically what happens.
Hi,
Why are you wanting to add a new HOME link?
$branchurl = new moodle_url('/index.php'); is the same as $CFG->wwwroot
HTH
Mary
Hi Mary
Yes it may seem a little confusing but I suppose I was looking for a sensible solution to feedback given to me. My site has moodle one level down (talkmedicalonline/moodle) with a main site with lots of info etc found on talkmedicalonline ---the main site points uses a home icon to get browsers back to the index.php page and a different button for pointing users into the learning envirnoment via a student login button- I use a home icon on the main talkmedical site and users said they were confused with the same icon appearing in moodle - so on the moodle login page I intend to leave the breadcrumb as is but the menu on the top I want to have a home icon for real home and another icon to indicate you are on the home of the learning environment - does that make sense ? I would appreciate your take on this as I am sure others have a similar setup out there where moodle sits almost wrapped in a mother site.
Hi,
You are partly right in what you are doing it's just the URL is the problem.
Try adding just the full URL like so...where path-to-file is the full name of the link.
= "http://path-to-file/";
Mary
For the banner all you need to do is rename the aardvark logo to logo1.jpg and add your banner and call it logo.jpng (jpg or gif) and upload it to the pix/header directory and it should work as long as it is not more than 100px in height and not too wide. The layout is pretty fluid so will resize with different browsers....hopefully!
As for the 'Pretty in Pink' you need to look in the aardvark_styles.css for the color code #c06 here...
a:link,
a:visited {
color:#036;
text-decoration: none;
}
a:hover, a:active {
color: #c06;
text-decoration: none;
}
a.dimmed:link,
a.dimmed:visited {
color:#aaa;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
color: #c06;
}
You can choose a nice websafe colour from www.visibone.com/colorlab
Mary
Hi Mary, I´m trying to change my header but it´s not working
I sent you a private message, could you help me?
My LMS is www.julyana-art.com.br/lms
Hi Julyana,
The easiest way to make this work is to change the CSS in aardvark_layout.css so that your logo is in the header twice.
#page-header {
height: 155px;
width: 96%;
margin: 0 auto;
background: #fff url([[pix:theme|header/logo]]) right top no-repeat;
}
Or if you take a small piece of your logo banner 1px wide by the hight of the logo and add it to your pix/header directory and call it header_bg.jpg you can add this code instead and it should work OK...
#page-header {
height: 155px;
width: 96%;
margin: 0 auto;
background: #fff url([[pix:theme|header/header_bg]]) left top repeat-x;
}
Also you can change the height of the header css I have highlighed to the height of your logo.
That should fix the problem.
Cheers
Mary
Mary,
I hope you don't mind, I've reworked your images to use css3 gradients. You could drop this in at the end of your css declarations, and if they don't work the images will be the fallback.
Also, I noticed that you have an image loading in the background of .commands in a forum post that loads a transparent png that looks a little strange.
Great theme!
Hi Daniel,
I missed this earlier. Thanks for the code, I've added it.
I was messing with some CSS3 code the other day...followed a tutorial how to make a page curl...was fasinating.
I'm just checking what the effect of the CSS3 is that you have added.
As for that opaque image in the command background, it's from Shaus Aardvark Pro 1.4/1.5 theme. Not sure it is working as it should. What do you think?
Thanks again for the little gems you keep leaving here...is wonderful to see the changes to this theme already!
I'm finding the more you work with Moodle 2 theme new avenues of thought open up and give you ideas to develop better looking themes. Now that the layouts are pretty stable.
Cheers
Mary
Hey! I found you hid the home_icon in there too! Here's how to enable it for anyone else that wants it:
Renderers.php addition to the class:
$branchlabel = " ";
$branchurl = new moodle_url('/index.php');
$branchtitle = $branchlabel;
$branchsort = -4;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
aardvark_menu.css addition:
ul.dropdown > li:first-child a {
background:url([[pix:theme|menu/home_icon]]) no-repeat scroll center center transparent;
}
ul.dropdown > li:first-child a:hover { background--color:#5b5b5b }
super duper trooper! you are a genius!!!
I was looking for a simpler way to do this...you found it !!!
YEAH!!!
Glad you like it! One change that should be made is this:
$branchtitle = get_string('home');
That way title will be whatever your Home string is and not " ". Of course you'll have to add a string entry for home in the lang files.
I did the right-hand date too, I'll post that tomorrow.
Daniel, thank you for all of the code! I got the custom menu to appear, added the date AND home icon to the menu. The only thing I am having problems with is when logged out, the home icon remains and shows behind the next link in line. What am I doing wrong? :o(
the value of the home needs to be one lower in the branch sort. e.g. if it's -4, change it to -5
hI Shanna,
It all depends on if you added other custom items to the menu. If the home is the only item you have added, using the code Daniel gave earlier, then use -1 which will put the home icon in the first position before the custom menu items which are written in the setting page.
HTH
Mary
Daniel and Mary,
I tried both with no luck, as well as adjusting the My Profile menu item in the code. I have menu items in the renderers.php doc, PLUS extra menu items added in the settings page. As for the HOME icon, it doesn't need to show up when the user is logged out. When logged in, the home icon shows correctly:
Here is my PHP code:
if (isloggedin()) {
//this adds home icon on menu bar
$branchlabel = " ";
$branchurl = new moodle_url('/index.php');
$branchtitle = get_string('home');
$branchsort = -5;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
//this ends home icon on menu bar
$branchlabel = get_string('myprofile');
$branchurl = new moodle_url('/user/profile.php');
$branchtitle = $branchlabel;
$branchsort = -4;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
$branchlabel = date("F j, Y");
$branchurl = new moodle_url('/calendar/view.php');
$branchtitle = get_string('today');
$branchsort = +5;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
}
Hi Shanna,
Your home icon will only show up when the user is logged in because it is inside your if(isloggedin()) conditional statement. If you want it to show for everyone you would need to move it like below:
//this adds home icon on menu bar
$branchlabel = " ";
$branchurl = new moodle_url('/index.php');
$branchtitle = get_string('home');
$branchsort = -5;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
//this ends home icon on menu bar
if (isloggedin()) {
$branchlabel = get_string('myprofile');
$branchurl = new moodle_url('/user/profile.php');
$branchtitle = $branchlabel;
$branchsort = -4;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
$branchlabel = date("F j, Y");
$branchurl = new moodle_url('/calendar/view.php');
$branchtitle = get_string('today');
$branchsort = +5;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
}
HTH
Richard
You guys are awesome!!! Richard that worked! I didn't want the HOME icon to show when they were logged out, but I could not figure out how to get it to stop showing up. I'm okay with it showing when someone is logged out. My biggest concern was that the Home icon was hiding behind the text of another menu item when people were logged out.
Thank you, Richard!
Hi
I've got all this in a ZIP I am going to upload.
Mary
My website has got serious issues now, and so I decided to upgrade to Moodle 2.0 while I'm redoing it. I was looking through the themes, and I really liked the look of the Aardvark Makeover theme, but when I try to download it, I'm getting a page can't be found or something similar. I tried the Aardvark lite and got the same message. I understand servers going down, and that may be the issue here, but I just wanted to check. I would really like to download and use the theme if possible. Thanks for all your work on it.
Chris Howard
Mary has posted on the forum that she has taken the themes down while she is doing some work on them. They will be back up as soon as that is done I'm sure.
Richard
Thank you for letting me know. I'll just keep checking back or watch the forums to see when it is available again.
Chris Howard
Hi Chris,
you can dowwnload the theme now...I've just uploaded a new revised copy...
http://moodle.org/mod/data/view.php?d=26&rid=4764
if you have any problems just start a new discussion...it's easier that way.
Hope you enjoy the theme
Thanks
Mary
Thanks, I will...
Hi Daniel,
I've just noticed the -4 in the $branchsort which you added for the Home image, this needs to be changed to $branchsort = -5 thus shunting it to the left on the other side of Login where $branchsort = -4;
otherwise login is lost!!!
Cheers
Mary
Hi How do you do set this in Custom Theme? My Home Menu now has a long list of choices in a dropdown.
thanks
J.
Hi James,
This extra code is added to the renderers.php at the top above the Login $branch.
If you did away with the original renderers.php you can alwasy add it back with just that code in it...in the right contect of the original login branch code that is.
Cheers
Mary
Hi Mary
You've seen my site - I just want to keep the rest of the Home menu from the first drop down - rather like Shaun has his site. I just think that way makes it look tidier. I am sure I've seen comments on the themes forum before that it is achievable with the Custom Menu - or did I mislead myself with some scan reading!
cheers
J.
Oops, good catch - I had replaced the login/out with the home button
I've just editied your original post...just the image is wrong...but no worries as it's the home icon which counts!
Great work thanks!!!
Mary
After I customized Aardvark Makeover, I just needed to customize login page. So I´ve changed login.php layout, but now It seems its not connecting (making login) and I can´t go to my moodle page. Any clues?
The login page you linked to looks OK to me.
Can you upload the login.php so I can take a look at it. it may be you have disturbed some PHP or missed off some vital code?
Thanks
Mary
Daniel, how do I get the dropdown menu navbar to show? I downloaded the theme today and activated it, and the navbar shows hover over links, instead of the dropdown menu. Plus, the background graphic for the navbar is missing.
Also, when I added the code you provided above to the renderers.php, my blocks heading went away. Is there a specific place to put that code in the renderers.php file?
Shanna
Here's the code to get the date like in the original Aardvark,
renderers.php:
$branchlabel = date("F j, Y");
$branchurl = new moodle_url('/calendar/view.php');
$branchtitle = get_string('today');
$branchsort = +1;
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
aardvark_menu.css
ul.dropdown > li:last-child {float:right;}
forgot a css line:
ul.dropdown {width:100%}
otherwise the right float won't really do anything.
Mary,
I'm really having fun with this theme - I hope you don't mind me pushing my changes back to you. I've rewritten the custommenu.css to work out a few of the alignment issues and such, this should work a little better.
drop this picture in the pix/menu folder for the above change. Grr! it's in the bottom left - it's a white arrow, trying to link to it causes the filter to replace with the arrow, just drag and highlight until you see it...
LOL ... crazy png files!
By the way you were right with the -4 it was me who get it wrong with your image.
I had a problem with getting the image to show up, it needed height: 17px and all worked well.
Cheers
Mary
Thanks for this CSS Daniel, I have made some changes already with some css James sent me which is proving to work really well.
I'll test your css later today...I am so pleased you are engoing working with this theme.
Personally I think we have a very special theme in the making.
Thanks for all your imput.
Cheers
Mary
Hi Mary,
Love this theme.
I wonder if you or anyone can advise me why viewing it with IE8 & Windows 7 at home and work produces different views:
Work - content area is about 20px wider on both sides
Text on Docked item is not formatted?
See capture below:
Home - Looks fine:
Many thanks,
Alick
Any number of things can cause the formatting to go haywire. Computer's operating system plays a big part, also how your browser is configured, if work PC is on a network...allsort of different things can cause these changes in display.
By the way =, you don;t have a menu. Is that by choice? To activate the menu you need to go to Site Administration > Appearance > Themes > Theme settings and add the menu items in the text box. Instructions for this are written below the box.
Thanks
Mary
Thanks Mary,
I was used to having to tweak css for differences between browsers when I designed webpages a while back. I hadn't come across differences with the same browser.
I was wondering why the menu did not display! Is it possible to remove 'My Profile' from the horizontal menu, as I think it would be a distraction for our users, and it's accessible from the navigation sidebar.
Thanks
Alick
Hi Alick,
It very frustrating to try and design a theme which suits all computers as well as cross-browser compatibility too.
To delete any of the additional custom settings for the menu is done in renderers.php. If you read a comment earlier in this discussion thread ...
http://moodle.org/mod/forum/discuss.php?d=174281#p764568
you will find instructions on how to remove the profile menu item. You just need to make sure, after you delete the section, that the $branchsort value stays sequential eg: -3 -2 -1 as the main custom menu starts at position 1 hence the minus values to push the custom items to the left.
If you read all of this discussion thread you'll find lots of other additions to customize it further. I'll also be incorporating these changes in an updated version of this theme shortly.
HTH
Mary
Just looking again at my problem with the Content area being 20px wider on each side and the dock text not displaying correctly when viewed on IE8 at school - I noticed that the version in school displays with 'Local intranet, Protected Mode Off'. At Home (which displays perfectly on IE8), it is 'Internet, Protected Mode: On)
Arctic displays the content area correctly both at Home and School but also fails to format the dock text or show rounded tab corners at School (Local Intranet security setting)
I wonder if this helps identify what needs adjusting?
Incidentally, the headings text when docked is much smaller in Firefox 4 than IE.
The reason I began giving Aardvark a 'Makeover' is because I wanted to see if I could display the side block header 'ribs' over hanging the page as in Aardvark Pro 1.5 (Moodle 1.9 Theme by Shaun Daubney).
Aardvark is a bit of a legion in this forum. Shaun has been building these themes one after another for a couple of years, each with a little bit more added on.
The layout for this version of Aardvark differs quite a bit from Arctic. Which will be the reason why you are seeing this extra content width.
Actually it's good that you are interested enough to test this theme and give me the much needed feedback. So thanks for that. And as you say it is a good way to see what needs adjusting...but I'm not sure quite how yet!
Firefox 4 is a strange beast, or turning into one, becasue it has been casuing us some problems. Or perhpas highlighting problems which earlier version glossed over. FF4 seems to be getting a little more strict in its delivery.
The fonts for all Moodle Themes are generated by the YUI3 CSS which may be casuing this odd behaviour. However, FF4 like other versions of FF has the ability to make a big difference to a page if your have set "Minimum font size" enabled in advanced settings. You can try this if you want to...in FF4 Tools>Options>Content>Font & Colours>Advanced>Minimum Font Size =14 (save and return).
Thanks again for the feedback.
Cheers
Mary
For info - if anyone else has the problems I showed in my original post with the dock not displaying properly. I tracked down what causes the failure: Compatibility settings.
Using IE8 or 9 with compatibility settings breaks the display of the dock.
Our school system hosts the vle, and so IE treats it as an intranet page.
Clearing the 'Display Intranet sites in Compatibility view' checkbox in the Page | Compatibility View settings menu solved the problem.
Alick
Hi Alick,
Thanks for this...make it easier knowing that the theme is safe so long as IE compatibility mode is switched off.
I did read that compatibilty mode is not really compatible to anything! LOL
Thanks again,
Mary
Hi Mary,
I have to say I'm a big fan of your work. About this topic and IE9 compatibility mode I just found that if the document is declared in the header to be <meta http-equiv="X-UA-Compatible" content="IE=edge" > or <!DOCTYPE html> this problem could be solved. However, I couldn't find in wich file or line is decleared the document type in moodle, so I'm not able to solve this yet.
You can do this in Moodle 2.0.3...if you go to...
Site Administration > Appearance > Additional HTML
"...These settings allow you to specify HTML that you want added to every page. You can set HTML that will be added within the HEAD tag for the page, immediately after the BODY tag has been opened, or immediately before the body tag is closed.
Doing this allows you add custom headers or footers on every page, or add support for services like Google Analytics very easily and independent of your chosen theme..."
You can add the meta tag there.
Thank you for this bit of information!
Mary
I love this theme, thank you so much! 1 Question-
Hi and thanks!
Do you mean the the docking tabs from Arctic? If you do then download the Arctic theme fromMoodle Themes and look for the dock.css and copy the code over to Aardvark Lite.
It should work OK but you may have to change the colours.
Mary
Mary,
I found the docks.css code in artic (in the styles folder), but aardvark_lite didn't have a docks.css in the styles folder, so nothing happened when I copied it over. I'm guessing it's not going be as easy as I had hoped
After copying it over you need to tell the theme to load it by adding it to the config files sheets array.
Ah! that's becasue the css for the Docking Module is in the pagelayout.css in Aardvark Lite.
All you need to do is make delete the existing Docking Module css in pagelayout.css and copy and past the css from dock.css into pagelayout.css.
It will work then...hopefully!
Mary
Well, it worked, but it's wonky.
The tabs are on the side, but they overlap the header. (see screenshot) I compared the page layout css from both artic and aardvark and I think the #page-wrapper might be the key, but since aardvark doesn't have that IN their css, I believe I'd have alot of revisions to add references to that into all the css files of aardvark, and I'm not confident enough that I could do it and make it work.
However, maybe I'm completely wrong, and there is an easy way?
hi,
its not that hard to fix if you look in the css rules for the dock that you copied to aardvark its a margin value I think. it will be somewhere at the beginning of the docking module css. something like #dock {margin-left: 5px} or something similar. the wrapper isn't the problem as the dock is in the body of the the wrapper shifts over to allow for the docked tabs.
If you can wait a couple of hours give me chance to check this out ill get you the correct code.
Mary
Hi I was nearly right.
You need to just change the value of one element in the CSS for the docking module. change left: 2.5%; to left: 2%; that should fix it. You can adjust that value to suit your webpage.
#dock {
width:3%;
position:fixed;
top:0px;
left: 2%;
height:100%;
z-index:11000;
}
Try setting it to zero...
left: 0; and then change it in small fractions of percentages
1% > 1.5% > 1.75% etc., until you are satisfied it's in the correct place.
HTH
Mary
Hello! First i would like to thank for this awsome theme!
Second i would like to ask for help because I'm having problems in something that should be the easiest part: changing the logo. I renamed the file in themes/aardvark_makeover/pix/header/logo.png to logo1.png as you said before. Then I uploaded my company logo with the name logo.png and it simply doesn't change the logo. My logo has 299x100 size. Even if I delete the old logo file, it will still appear when i access my moodle. Can anyone help me out with this problem?
Thanks, Marco Duarte from Portugal
Marco,
Make sure you have cleared the cache - either turn on theme developer mode if you are likely to be making a number of changes, or if you are just changing the logo, Purge All Caches from the admin menu.
Richard
Thanks for the fast answer Richard. All caches are clear but i still get the aardvardk logo on it. Can't figure it out, i've been searching in all .php files for an error on the logo calling but i can't find anything...
About the theme developer mode, how can i activate that?
Well i found the theme developer mode.. :P
but i can't stil make the logo appear..
Thanks for the attention, Marco!
Well looks like it's working now. I cleared all cookies from my browser and reseted it and it's now working!
Thanks Richard!
Its on the Theme Settings page, Marco.
Site Administration->Appearance->Themes->Theme Settings
As for your logo, if you have even deleted the original image (though having renamed it that shouldn't be necessary), then it has to be in a cache somewhere, either in the Moodle cache itself, or in your browsers local cache as it would no longer exist in the theme folder for there to be a php error in calling it.
Richard
Edit: Just seen your other posts Marco - excellent, glad you got it sorted
Rich
Hi
For the Calendar if an event lasts more than 1 day e.g. school holiday I don't see all the days highlighted in some manner. How can I do this? Just the first day when the event starts is currently highlighted.
Hi James you do this when seting the event. You need to fill in the start and stop dates and times. Then the days of the event 2day three day etc are highlighted automatically. If you don't then they won't!
HTH
Mary
Hi Mary
I am doing this - but it hasn't worked. MSG me if you'd like a login to have a look.
J.
Hello Mary!
First of all, thank you for nice Moodle theme but i have few questions / problems with that.
I modified a little bit header (profilebock css div and logo) which is normal in small resolutions but if i stretch it bit then its broken. At the moment there are "sub div" .pic to profileblock which displays corner (triangle) to profileblock div
here
I also tried CSS transforms to make that style header but it doesnt work too. .
I wanted to do that theme is no fixed and normally view with all resolutions but i have no ideas how to do it right - do you have some ideas how to do it right? (correct view picture)
correct view
Also i have a little problem with grades report show , its messed up - is it related with header modifications?
pic
Profileblock and .pic css
#profileblock {
float: right;
text-align: right;
width: 65%;
height: 100px;
background: #f7bd06;
margin: 0;
padding: 0; }
.pic {
float:right;
width: 4%;
height: 100px;
background:url([[pix:theme|core/overlay]]) no-repeat;
Hi Margus,
Themes 2.0 FAQ and CSS FAQ are good stating points for learning more about how to customise a Moodle 2.0 theme. Also using Firebug may be a useful tool when trying to solve CSS problems with your theme.
Did the theme work OK before you changed it?
I think the problem with gradebook will probably be associated with your CSS changes.
Can you send me a link to your website in a priviate message, then I will take a look at your site? I it difficult for me to try and solve a problem which I can't see!!!
Cheers
Mary
Hi Mary,
I am enjoying the new theme but had a question.
Why are all the glossary linked words underlined? (See attached pic). Does this have to do with the glossary module or is it part of the CSS and autolink? It does not happen in stand themes but with Artic and aardvark makeover it does. Can this be fixed with code?
Using Moodle 2.0.2
Thanks,
Jeff
Have you checked to see if your browser it is not adding the underline?
In the meantime I'll check this out and let you know what's happening...looks like I could have missed something in the Glossary CSS.
Check to see that the following code is in yout version os Makeover the rule highlighted in particular. If it's not there then add it . The file to look in is called aardvark_styles.css Openit using Notepad and make the changes then save it, and then upload your new version to the server.
a:link,
a:visited {
color:#036;
text-decoration: none;
}
I have updated some files, so am not sure if that rule is in both versions. There are 2 versions...downlods are at the very top of this discussion.
That said, there may be some rule coming thru from the Mod, so will need to check this further.
I'll let you know later
Mary
Thank you Mary. I will check this out.
Jeff
Hi Jeff,
When you set the Glossary up in the first place, did you happen to set them to link automatically. If so then this may have triggered the underline action.
Mary
Hi Margus,
What was the solution for the second problem (breadcrumb moves up into header)? I am using a fresh installation of Moodle 2.0.3 and added Aardvark Makeover without any customization. I use Firefox 4.0.1. The user report of the gradebook looks like this:
Changing report.php to default.php in the config.php file according to Richard Oelmann's advice (see HERE) helped only partly as it moved the breadcrumb down, but not enough. It still covers the custom menu line.
Any help is highly appreciated.
With kind regards,
Hartmut
Hi
Had a look at the profileblock coding. I'd like to display the full name of the person at the top of the screen instead of the first name. I'd also like a (Logout) option next to the name. Not used to html_writer in php so any help apprechiated.
Original code below.
<?php if (isloggedin()) {
echo html_writer::start_tag('div', array('id'=>'profileblock'));
echo html_writer::tag('div', $OUTPUT->user_picture($USER, array('size'=>80)), array('class'=>'user-pic'));
echo html_writer::start_tag('div', array('id'=>'pro-opt'));
echo html_writer::tag('h3', get_string('loggedinas', 'moodle', $USER->firstname, $USER->lastname));
echo $PAGE->headingmenu;
echo $OUTPUT->lang_menu();
echo html_writer::end_tag('p');
echo html_writer::end_tag('div');
echo html_writer::end_tag('div');
} else {
echo html_writer::start_tag('div', array('id'=>'profileblock'));
echo html_writer::start_tag('div', array('id'=>'post-log'));
echo html_writer::tag('h3', get_string('loggedinnot','moodle'));
echo $PAGE->headingmenu;
echo $OUTPUT->lang_menu();
echo html_writer::end_tag('div');
echo html_writer::end_tag('div');
} ?>
I think you can peek at the profile block in my zebra 2.0.4 - I rewrote it to use the standard function library.
Daniel,
Is the code you talk about here in your modules.css? If so where do you add it in the Aardvark_Makeover theme please?
Ta!
Frosty
the HTML for the profile block is in the layout files (general.php)
Hi Mary,
Thanks so much for this awesome theme...thanks also to everyone else who has made this what it is today
May I ask please if it is possible to remove the ALT tags from the menu? At the moment when you hover over the Home icon it says   and Logout says Logout etc!
Thanks
Frosty
Hi,
First of all you can change the in renderers.php (use Notepad to open and make changes) ...but you can't stop the Alts from working, at last I am not aware of this, if you can, as I think these form part of the browser function.
Mary
It is possible to remove the ALT tags by simply deleting them (from where Mary has said in her post) However, this is not really a good idea as they are what is used by some browsers should any user have a screen reader activiated and form part of the browser functionality for images (other browsers use the title which is why you really need to have both in place). It is much better to decide on what you want them to say and put this in rather than removing them completely.
Richard
Hi,
I would like to change the font colour on the menu bar from white to black but can't seem to find the .css for this. Would you please be able to point me in the right direction?
Thanks
Frosty
Hi,
Open aardvark_menu.css using Notepad
Search for #fff; and replace with #000;
HTH
Hi,
Sorry for the delay in trying this...am I missing something here as it only changes the vertical lines and not the text colour...
Thanks
Frosty
Can you upload your copy of aardvark_menu.css in your next comment, for me to check.
Thanks
Mary
Attached as promised.
Thanks for looking I really appreciate your help.
Frosty
Hi,
Is it possible to have a separate header for course pages (from the full header with profile block on the home page)?
Ideally I'd like to reduce the space it takes on other pages - to show reduced size logo, Course Title, Logininfo().
Many thanks
Alick
Hi Alick,
Yes you can have a different header on other pages which is smaller than on the frontpage. Here are the steps you need to take to achive thisL
1. Copy & Paste frontpage.php from Base theme andin your layout directory in 'aardvark_makeover theme folder'.
2. Open config.php in 'aardvark_makeover theme folder' and find
$THEME->layouts = array(...
and in the list below it look for the following and replace default.php with frontpage.php as highlighted below.
// The site home page.
'frontpage' => array(
'file' => 'default.php',
'file' => 'frontpage.php',
3. Using Notepad open frontpage.php and add class="header-home" to the <div id="page-header"> so that it looks like this...
<div id="page-header" class="header-home"> this allows you to style the home header differently than the default.php pages..dont forgrt to SAVE file.
4. Same steps as 3. but open default.php and add class="header" to the page-header div...SAVE file
5. Add the following to the aardvark_default.css file...
#page-header .header-home { width: 100%. height: 100px; margin: 0; padding: 0;}
#page-header .header { width: 100%. height: 50px; margin: 0; padding: 0;}
Save files and away you go...you can adjust the css to suit.
HTH
Mary
Many thanks, Mary.
All sorted (almost - got to tweak to make it fit)
Much appreciated,
Alick
What if I simply want to make the header height smaller on every page?
If I change height from 155 to 135, only the height of the header image seems to change and I get a space between the image and the menubar.
#page-header {
height: 155px;
width: 96%;
margin: 0 auto;
background: #fff url([[pix:theme|core/overlay-rose]]) center top repeat-x;
}
Is there something else I have to change, or is something in the profile block and profile pic preventing the header from "shrinking down"? I want to remove some of the space at the very top.
Hi Mary,
On our main domain I have a customized version of your theme Aardvark Makeover (changed color and logo). Moodle 2.0.3 is installed, but docking blocks looks weird as the docks move even below the footer. This happens also on a non-customized subdomain with Moodle 2.0.3 installed. Both times I only tried this in FF 4.0.1. Can you give me some advice what I need to change or what may cause this strange behavior?
Thanks and with kind regards,
Hartmut
I'm not sure about this...I don't know if it is the version of Moodle or the theme as I dont recall this happening orignially. My own version is acting the same way.
And I don't know why!
Mary
Hi Dietmar,
I think I know what happened. I had started trying to make the horizontal dock to work, but lost patience with it. I forgot to change the dock.css round. I think there are 3 dock.css in that theme, (dock.css, dock1.css, dock2.css) one of them should work...LOL
I'll check the download and fix the theme.
Thanks
Mary
Hi,
Is there a way to have a logon section at the top right of the page, similar to the 1.9.x version?
Thanks,
David
Mary
Can you (and this is probably my lack of understanding) in the menu section have an item that opens in a new window?
I have used the theme settings, and have created a link to our school email, however this opens in the same window and is slightly annoying because you lose what you are doing, can i set it so that once selected it opens in a new window? i managed to do this in 1.9 when i set up the original php file but i am unsure where to go
thanks
J
Sorry Jon, I missed this earlier.
You might be ably to add target="_blank" after the url in the menu settings.
so that you can achive something like this...
<a href="http://www.yourschool.com/contact.html/" target="_blank">Emai l Us</a>
You would need to write something like...
Email Us|http://yourschool.com/contact.html/" target="_blank
What you are doing here is closing off the URL by adding the " at the end of the link location and another " at the start of the target element "_blank but be sure you LEAVE the last " off as this will be added automatically in the process of creating the menu.
So just copy this example...and substitute your own URL and menu item name.
Email Us|http://yourschool.com/contact.html/" target="_blank
HTH
Mary
David,
It should be possible to include the username/password in the profile block as it used to be in 1.9. I have just tried it out by copying the aardvark 1.5 profileblock into my current theme and adding the css needed.
It seems to work, although I haven't tested it exhaustively
Richard
Hi David can you upload the profileblock.php from that 1.9.x theme. and I'll test it for you on Aardvark Makeover.
Cheers
Mary
Here is the profile block from my current 1.9 theme.
Thanks,
David
Not sure if you'll need the profilepic.php file, but here it is as well.
Thanks,
David
The login block has shifted from the right side, to the left side. Once you log in, it goes back to the correct place. (See picture.) I'n not sure when it went "bad", but that last thing I changed was to add a bit of code so that IE wouldn't stretch the middle area indefinetly to the right.
Hi,
What was the code you added and where?
What is perhaps needed is this...
#page { position: relative;}
adding to the bottom of aardvark_layout.css file
that will stop IE from stretching sideways.
Mary
Mary- I posted here on 6/13/11 and this is your reply "Hi This behaviour is only present in older browsers like IE6, IE7. You can also see create this bug in IE8 (Compatibility Mode), however, IE8 and IE9 will render this theme without the bug. If you are using IE8 then my first suggestion is make sure you have Compatibility Mode turned off. Look in the tools section of the menu you should find a section where you can choose which sites you view using compatibility mode. If you are viewing this in IE7 then here is the patch to fix it. Using Notepad open aardvark.css and add the following CSS rule to the bottom of the file... #page-content-outer { position: relative;} This will fix the IE Bug. HTH Mary"
So that is exactly what I did. I just removed that bit of code, and now the login is in the correct place again, but the page stretched on to the right. So somehow that bit of code affects the box before login. Any help would be appreciated Thank you!
HI,
Was that post from another theme? I seem to recall that it was Aardvark-Lite or Liteheaded which worked because the structure to that theme is slightly different than this one.
You could try adding this instead...
#page-content { position: relative;}
which should have had it in but I removed as I did not think it necessary as overflow: hidden was removed from that container. See this page for more details.
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
If the middle part works but the profile block shifts over again, let me know as it will be easier fixing the profile than the body.
HTH
Mary
Oh, Mary, of course you are right. It was for Aardvark-Lite. (How do you keep track of all these posts when I can't keep track of my own?!)
I did change this:
#page-content-outer { position: relative;}
to this:
#page-content { position: relative;}
and the profile block goes back to being in the right place, but the body stretches indefinetly to the right again. I commented it out as an experiment to see if anything happened, but nothing did, so I guess that code doesn't change anything.
Why does it matter to the layout if you are logged inor not? Because logged in, the box is in the correct place. It's only when you are not logged in that it is in the wrong place.
Hi,
There is something wrong in the layout file. It needs a major overhaul.
If you know how to change stuff in php pages, what is needed is a frontpage.php layout adding. The default is ok for every other page, but not the frontpage.
I was hoping to do this this week but time has run out. If you send me your email in a message I'll try and send you a copy im working.
Adding a front page means transfering some contents from default.php like the page container names but not the php, as this is not needed in the frontpage. Thats where the problem lies. The theme's config.php needs changing too to add frontpage.php instead of default.php for the Frontpage layout array.
Cheers
Mary
Hi Colleen,
Have you foud a fix for this issue? I have inserted David's profileblock.php and it all shifted to the left (when you are both loged in and out) with the profile image somewhere in the middle of the header.
Any ideas please how to make this right? I attach the code - hope it's someting simple. Any help very much appreciated!
Many thanks
Katerina
What fix are you looking for? If you use another profileblock, you need to use the CSS to style it. I suggest you look in the css from the same version of Aardvark that the profile came from.
HTH
Mary
Hi Mary,
Thanks for the reply - I borrowed the profileblock from David's posting above on 20/6 as I really l like the 'Update profile/courses/logout...' options in the profile on the right. David - can you please let me know where I can find the css to this?
Or is there a quick way we could have the profile block options displayed the same way (i.e. horizontally) as they were in the old Aardwark-Lite version for Moodle 1.9?
Thanks!
Katerina
PS: I guess you may be tired of hearing it by now, but many thanks for the great themes and helping those of us who are still learning!
I'm off for the summer now and won't have direct or remote access to my server until September. It looks like there has been a lot of ideas for the profile block posted over the last couple of weeks, can't wait to get back at it.
David
Great work!
I noticed that when I turn on the editing, the editing icons are skewed. Quick fix for that one?
Use another theme?
I'm not kidding, if you go to Theme settings page, and activate "Allow theme changes in the URL" and then save the settings you will be able to switch between standard theme and Aardvark Makeover by adding ?theme=standard at the end of your homepage address...
http://yoursitename.com/moodle/?theme=standard
I'm currently trying to fix this problem...and haven't found time this week.
So that really is the quickest fix.
HTH
Mary
I will poke around a bit and if I figure out a fix I will post.
Thanks
I implemented your code today and it works just fine.
Thank you
Your Design: http://moodlestudio.visible-expression.co.uk/login/index.php
I would like to remove the Resouce Name popping up after my Pages Name or any other resource. See attached image 1.
Also if you noticed the login page how you have it nicely organized, I'm not getting that. Im missing formating.
Please advise
Hi,
To get the login to look the same as the one on my website you need to set it up in Site-Administration > Plugins > Authentication > Manage Authentication (see image)
This is the page you add the text for the users to read when they login, but you also need to set Site-Administration > Plugins > Enrolments > Self Enrolment as this triggers the two column page of the login.
As for the resource page, I don't find that happening. On my site I have a page called About and that is the title I gave it. There is no reference to 'page' at the end of the title.
HTH
Mary
I did exactly what you told me to do. And still nothing. Is there a way I can get another copy of your template. Not from the downloadlink. Cause I think there are some differences.
Hi Peter,
Well whatever I said in my last post does not make much sense because I said Self Enrollment when I meant to say "Email based Self Registration" which is what you need to activate.
What you need to check is that the EYE is OPEN in the part of that same place I sent you to, the "Manage Authentication" page.
At the top of that page there is a list with closed eye icons (looks like eye-lashes when sleeping). You need to CLICK on the one next to "Email based Self Registration" and if you read the rest of the page, make sure you have all the correct settings checked, menus selected thene...save your changes and then refresh your screen, Ctrl + F5 and you should have that Login page when you click on Login. SEE Image attached:
Yup I checked that. Still not working. . . . What can it be?
Try Purging all caches...
Site Administration > Development > Purge all caches
Hi
Am testing Aardvark M on 2.1 and so far so good. It is behaving much better.
Just one question - how do I put (Logout) next to the person's name on the profileblock.
thanks
J.
PS Thanks for all your hardwork Mary.
Hi
Where abouts can you change the breadcrumb link colour. I need to change it to Red from Pink! (to match the theme!)
thanks
J.
Hi Mary,
Thanks for the new download, but still didnt work for me. The Login Page has only 1 column. Where can I go in and edit that directly?
Also, the help popups that come up whn somone clicks a ? shows with a transparent background. What file needs to be edited to fix that?
Thanks in advance for your help
Send me a user account with Admin permissions in a private message and I'll set the login for you!!! I can also check the problem with the pop-up too.
Mary
I want to thank you so much for all your help.
Hi Peter, Thank YOU for allowing me Admin permissions to fix the problem directly on your MOODLE site. I must say you have done a lovely job of resyling, or should I say 'Makeover' of 'Aardvark Makover' to blend with the colors of your site.
In fixing the problem at your site, a point I must raise as an important issue here, is that you MUST NOT delete the following themes from your Moodle install. You can delete all those you do not want, but you must keep BASE, CANVAS and STANDARD as these are parent themes. Also it is wise to check which themes are the parents of the theme or the themes you decide to use, as there may be a possibility that your favorite theme has another parent other than the main ones I have just listed above.
HTH
Mary
Where I can find the topic "Aardvark Makeover"?
Thank you very much for your help.
Greetings from Chile.
Mary,
Firstly, thanks for all the work you have put into this excellent theme.
We have implemented this in the way recommended using your theme as a parent theme so we can upgrade without losing all our changes.
Using this method, how would we add our links to the relevant social media buttons (or remove some of them) but keep the code valid for upgrading?
I hope this makes sense!
Thanks for any help,
M.
Hi GB,
What you have create in your instance of Moodle stays the same regardless of theme. Try this to prove my point. Go to the themes setinng page...
Site Administration > Appearance > Themes > Theme settings
In this page click the box which says 'Allow theme changes by URL' then scroll to the foot of the page and click 'SAVE' to save these settings.
Go back to your Home page type /?theme=standard after you Moodle site name...for example...in my site I have the same content in whatever theme I choose...
so here is my Moodle 2.0 website...
http://moodlestudio.visible-expression.co.uk
and here is the same site with another theme...
http://moodlestudio.visible-expression.co.uk/?theme=afterburner
as you can see the content stays the same.
The only thing you need to do when upgrading is remove your custom theme from the themes directory orelse there is greater possibility it will getting deleted.
Hope this answers your question?
Mary
Mary thanks for this theme, I'm trying to get the profile block to look more like the old one and have the name to the left of the picture, however I can't see how to do it, can you help?
Dave
Which version of this theme are you using, as the Makeover theme has the profile block as you want it. You can see it here...
http://moodle.org/mod/data/view.php?d=26&rid=4764
Mary
Mary,
On the ground that I wasn't sure what version I had I downloaded the version from that link and replaced all the files I had been working on to see if it was something I had done, however when I viewed moodle with your theme it appears as per the image attachment.
Hi David,
There appears to be a problem, I don't know if it's my new Windows7 & Firefox 5 or Moodle 2.1, but I don't see the image you have uploaded.
However, as Moderator I can edit posts, so I was able to view the image you have uploaded. I can't for the life of me remember why I changed the location of the Username. in this theme. I remember styling it though.
I'll check it out on my website and get the CSS for you to add to your copy of the theme.
Sorry about that...here's the code
Using Notepad open the following file...
aardvark_makeover/style/aardvark_styles.css
and look for ...
Mary
Thanks Mary that fixed the problem.
Hi Mary,
its a really good theme. thanks for sharing.
I was just wondering, on http://bishopshalt.co.uk/moodle/ in Firefox, Chrome and certain versions of Internet Explorer (but not the latest with compatibility off) we get unneccessary vertical scroll bars on our RSS feed blocks.
any suggestions of settings that could be changed to try to remove them? I take the point you made already on this forum its a nightmare trying to deal with all different browsers...
thanks again
David
Hi David,
Try adding
perfect
problem solved
thanks again
Hi Mary,
regarding unwanted scroll bars on the RSS feed blocks,
by adding .no-overflow { overflow: hidden; } at the bottom of aardvark_styles.css it worked (thanks again for that solution)... but we also lost the scroll bars we wanted elsewhere (eg. on view_submitted_assignments screen where we sometimes need to scroll across to see the "grade" button).
if you get chance to consider this and possibly point me in the right direction to hide overflow only on the front page (or only within blocks) would be much appreciated
thanks again for the great theme.
David
Hi David,
I have been meaning to get back to you with hopefully a fix for this, but couldn't just find the time. So better late than never!
Looking at the source code on your school's website using Firebug you get the following HTML markup...
<div id="inst2885" class="block_rss_client block">
<div class="header">
<div class="title">
<div class="block_action">
<h2>hillingdon.gov Twitter</h2>
<div class="commands"></div>
</div>
</div>
<div class="content">
<ul class="list no-overflow">
I've faded out the parts which don't apply as they're self contained and dont relate to the section that we need to set the css rule for.
So breaking this HTML down further we can derive a set of CSS id and class selectors to use to target the element we want to style.
And this is what we get... (Legend: #=id . = class)
div#inst2885 .block_rss_client .block div.content ul.no-overflow
Now if we add the { overflow: hidden;} to theend of that we get the CSS rule to fix the problem.
So putting this all together we get...
div#inst2885 .block_rss_client .block div.content ul.no-overflow {overflow: hidden;}
where this CSS only relates to that specific block element.
You can copy and paste this using Notepad and add it to the end of the same css file as before inplace if the previous css I gave you.
I have not tested this...but it should work. Remember to Purge all caches after you add the code, unless you have switched on Theme Designer Mode. Either way you need to make sure the cache is cleared before you refresh the screen to see the changes.
HTH
Mary
Hi Mary
Just playing with this theme. I have downloaded this latest version and it all works well except the "Activity report" page display reverts to a different page layout and doesn't display the Aardvark header and pushes the blocks off the margin of the page.
using Firefox 5.0
Moodle 2 install
I have changed no CSS or layouts or Config yet. I have the 3 necessary themes, Base Canvas and Standard in the theme list too.
Any thoughts Mary or anyone?
cheers Bruce
Fixed it myself thanks folks. Couldn't delete the original post.
/moodle/course/report/outline/index.php?id=1
Changed
$outlinetable->attributes['style'] = 'width:2000px;';
to
$outlinetable->attributes['style'] = 'width:1600px;';
seems to work now.
Hi Bruce,
Sorry did not get to this until now..
If the fix you have works for you in this theme, can you check it has not spoiled standard theme as you have changed a core file.
I need to check what's happening with the report page as there have been and still are some problems with the gradebook....or at least the way it displays.
Thanks
Mary
Hi Mary!
This theme is really wonderful even for a new user like me. Specially I like the easy creation of custom menu items. But I am not able to create internal web pages which I can provide as link to these menu items. I have search and found that we can create web page using the "Add Resource-Page", on the front page. The moment I hide its display on the frontpage the link to that page from the menu also stop working. So kindly let me know how to create such pages which we can link to, from anywhere in the moodle, be it under course or to display to even any unauthenticated user.
Any link, studying which I can set proper persmissions and layout for such page.
Hi sudhir,
This isn't really a theme question as this is standard behaviour in moodle - when a resource is hidden, the menu links don't work because that resource is hidden
One solution is to add the link into a block such as the main menu block on the front page and then without hiding the individual pages, hide the block itself.
Another option i have used in the past is to create a separate course (which is open to guests with no password) specifically for shared resources like this and put those resources into a hidden section of the course - but this does end up confusing the breadcrumb at the top of the page if you're not careful.
HTH
Richard
Hi Richard!
Thanks for the solution. I placed it in the main menu block, it works.
Is it possible to hide Navigation block on certain page(s) or can we add it the custom menu item to give more display space to the new users.
Also let me know under which css style file of the theme I can add the custom CSS & java scripts for the new web pages created.
Hi !
Can anyone tell me how to adjust the spacing in the custom menu items. As my last menu item comes in new line as per the screeshot shown below:
Also in Goolge Chrome the last menu item has 2 seprator marks like :
Videos | | Contact US
Please guide me in which file I can custom CSS to be used in the other parts of the website
Hi sudhir,
Using firebug in firefox will tell you what needs to be changed and where to alter the padding/spacing on the custom menu items- it will also give you the opportunity to try out different values to make sure they work before you actually commit those changes in the css file itself.
As for what css to change for other parts of the website, it very much depends on what you want to change, but again, firebug will tell you what rules already apply to an element and where they come from.
HTH
Richard
Hi Sudhir,
For a start you have far too many items in the menu. I suggest you rethink what you need in there. As far as I am concerned the menu is set as part of the theme, and I am not prepared to start altering it as this will spoil the look I wanted to achive. If you don;t like it then find another menu type and add that instead.
In actual fact you could just as easy add some of the links to the Main Menu, or create a HTML block in the sidebar, using ADD BLOCK, and list them there, that way you could have a personalised menu in the side bar. Tutorial on Menu Lists can be found HERE.
Mary
Hi Mary,
Many compliments on a great theme!
I wonder if you might help me regarding an anomoly that occurs with question pages. I have installed the theme as standard and had no real issues but is seems that when a question's answer is displayed within a lesson, the layout goes a little crazy. The only modifications I have made are to colours, graphics and such.
In Chrome I get this (not the little menu 'lip' that appears below):
...and IE gives me this:
Do you have any suggestions as to what may be causing this? I'm relatively new to Moodle so I thought this would be the best place to come.
Thanks!
I would say first check the css in Validator by uploading your css file to that website.
http://jigsaw.w3.org/css-validator/#validate_by_upload
If you have been making changes to colours, images and such, then chances are you may have left off a { or ;
Thats all I can think of.
Mary
Hi,
I have a Quiz with 20 questions.... on the Quiz report [http://[mysite]/mod/quiz/report.php?id=...etc] the report exceeds the horizontal space but shows no scroll bar.
There is a scroll bar in other themes.
Any ideas?
Many thanks
Alick
Hi Alick,
I'm just testing this now...will let you know what I find, and hopfully find a fix for this.
Cheers
Mary
Hi Mary,
I see from another post on this forum that this fixes it:
.pagelayout-report #page-content .region-content { overflow: auto; }
Although as the poster Daniele says, it is a problem with the parent theme (Base): http://tracker.moodle.org/browse/MDL-29056
Thanks,
Alick
I did wonder that, as usually these things are goverened by the parent theme.
Thanks for the hint...no wander I wasn't getting anywhere
Mary
Hi all,
Can someone help me in getting the correct date showing up in breadcrumbs? The calendar view is okay (#1), but the date in breadcrumbs is behind. 
The default time zone In "Location settings" is set to UTC +10. All other settings in "Location" are left in their default setting. Any help is appreciated.
With kind regards,
Hartmut
The date is set from your computer, so check that first.
Mary
Hi Evans!
I added the login block on the front page using Add block and position it on the right side & on the front page only. Now my problem is that I am not able to change the position of this block now. As I can't do editing before login and after login as admin, the block doesn't appear (as it is set to appear on the front page only), so I am not able to do editing of it.
Can u pl. guide me from where I can change the settings of this Login block on the front page now?
Hi Singhal!
You will find that when you turn Editing on the Login re-appears again with the Editing tools below it.
HTH
Mary
Hi Mary!
It is not showing the Login blog, I tried manytimes by turning editing on the front page and clicking on home and searching on the other pages as well.
I think as I selected to appear login only on the front page, so it is not appearing again after login as the front page before login and after login might be taken as different pages with different settings. In fact in the ADD BLock option, I don;t find any login blog now, on the front page.
Thanks Mary!
I got the Login block back now. After turnung editing on it will appear on the next page after I selected to edit front page settings.
Hi Mary,
The date on my computer corresponds with the date in the Moodle calendar (see #1 in picture above) and is the actual date and time here on Guam. But the date displayed in the breadcrumbs seems to be a couple of hours behind.
Is it possible that the date in the breadcrumbs can only get the server time and date, but not the adjusted time and date (UTC +10) in Site administration -> Location -> Location settings?
Thanks for all considerations.
With kind regards,
Hartmut
Hi,
Have you set your Date/Time in Moodle settings?
This is nothing to do with the Theme...this is Moodle related. You have to tell Moodle what time it is...it's not that clever in that respect! LOL
Have you noticed the Forum how it has 2 different times/dates before you login and after? This is because Moodle.Org Admin has set the site to the time to whatever is the server time where this site is hosted. You have your settings on your computer mine on mine and we all have different times. So you need to make sure that your Moodle has been set to the correct time line for your area. Mine id GMT-1 because it is Summertime in the UK in October I will need to reset it to GMT as this will be the correct time for us Brits.
I don't have a clue where you set this...may be in your profile, as as well as somewhere else.
HTH
Mary
Hi Mary,
Thanks for your reply and for your patience. In our Moodle installation (version 2.0.3; theme selected: Aardvark-Makeover) I set the time to UTC+10
Our Moodle installation is hosted on a shared server somewhere in the Chicago area.
The screenshot on the right shows the different dates.
#1 is on my computer (August 31 is today and is correct for Guam)>
#2 is the Moodle calendar on our front page, also shows August 31, which is correct.
#3 shows Tuesday, August 30, 2011, which is not correct.
How can I make the date of #3 consistent with #2? So far I only know that I can adjust the time setting of our Moodle installation in Location settings. Is there another place that needs to be adjusted? I assume that #3 is only getting the server time, but not the adjusted server time.
With kind regards,
Hartmut
The date is also connected to the language setting too, so depending on what your Moodle is configured to for language will also have a baring on the date.
But if you want to try changing the date code in renders.php in the theme by replacing the code for the date to
userdate(date('U'));
instead of what is written for the date code already .
Another way might be to try on of these.
date_default_timezone_set('America/Chicago');
or
date("l, F j, Y");
HTH
Mary
Hi Mary,
Thank you for your reply and for your suggestions. I need more time to try out something in renderer.php for the date setting. For now I commented out the calendar in the custom menu as it irritated some users. I like your Aardvark-Makeover theme very much.
With kind regards,
Hartmut
Hi Marry!
The custom menu drop down options (set using theme settings) are not visible in IE 7.
So, which versions or browsers are best to use for this theme and any alternative for earlier browser?
Hi Sudhir,
The Menu should work in IE7. I presume you have set up the menu inTheme settings?
You can try Firefox, which is what I use all the time.
I know the dropdown menu will not work in IE6 but the menu will work in IE6 if there are no sub-menus.
HTH
Mary
Hi Mary,
Today I found out what you meant with userdate(date('U')); and how to change the date and time setting in the custom menu. Here is what I did. In Aardvark-Makeover/layout, I opened frontpage.php and default.php and searched for the text:
<span class="date"><a href="<?php echo new moodle_url('/calendar/view.php');?>" title="<?php echo get_string('today');?>"><?php echo strftime("%A, %d %B %Y"); ?><a/></span>
and replaced it with:
<span class="date"><a href="<?php echo new moodle_url('/calendar/view.php');?>" title="<?php echo get_string('today');?>"><?php echo userdate(date('U'));?><a/></span>
I just wanted to share this.
With kind regards,
Hartmut
Hi Mary,
I wonder if i can change the background colour to a pattern image.
If it's possible, how can i do that.
Great theme =)
Hi,
Yes you can change the background image. What you will need to do is add your image to the theme/aardvark_makeover/pix/core/ directory. Then in the theme/aardvark_makeover/style/aardvark_style.css make the following changes...
html {
background: #eee url([[pix:theme|core/overlay]]) center top repeat-x fixed;
}
Change the name overlay to the name of your image. And if you want this to repeat all over the page you can delete the words 'center top repeat-x' and the image will repeat itself by default. If you DO NOT want it to repeat then just change 'center top repeat-x' to 'no-repeat'.
HTH
Mary
Works perfect =) Thanks
I will try to explain what i wanted to do with my bad english.
I'm trying to put the logo of my project starting in the logo.png and ending on the background.png, but to do this right i have to fixed the width of the body, otherwise the logo will be broken with the difrent screen resolutions because the width is auto formatted depending of the resolution. I already change the width of the aardvark_makeover.css:
html, body {
width: 1280px;
align: center;
margin: 0;
padding: 0;
}
But now the body is aligned to the left and i can't put it in the center =\
Hi,
First of all I would set width parameters in page not body or html...as you will find it will work better. Also align is NOT a CSS property it is only used in HTML that's why it is not centering. A better way is to add margin: 0 auto; this will center it as it will set margin auto on left/right sides but nothing top/bottom.
So I would set it like this...
#page {
width: 1280px;
margin: 0 auto;
padding: 0;
}
Can you make a picture of what you want it to look like then I can help you achive that?
Eu gostaria de tentar ajudá-lo a tudo o que posso...OK?
Mary
Thanks mary.
Não sei se falar português, mas se não falares, eu depois traduzo :p
Isso resultou, consegui fixar a imagem de fundo e assim fazer com que o logotipo "saltasse" do header para o background.
Agora tenho um outro problema, alterei a cor da barra do menu, mas não consigo alterar a cor daqueles separadores. Podes-me ajudar a corrigir isso?
Não falo português. Eu só estava tentando ajudá-lo
The divider tabs are set in the CSS for the menu. (aardvark_menu.css)
Try this...
#custommenu ul li {
border-right: 1px solid #923c69;
border-left: 1px solid #c44a89;
}
Hope this helps?
Mary
With the right colors and everything... Mary, you'r the "man".
Obrigado =)
Hi Mary.
thanks so much for the advice on the gekko theme. have sqitched to make over and all seems to be going well.
Just a couple of issues i'm sure will probably be easy fixes. (I hope)
I can't seem to find the breadcrumb colour change.
and after a forum post on the page where is say you have 30 mins before it will be posted its displayed on my background color. i'm guessing that page has background: transparent at the moment, any idea where i can find that?
Thanks agian.
Adam.
EDIT Found the breadcrumb settings still need to know about the 30 min page.
sorry to be such a pain. i also need to know where i can center the buttons on lessons (next and back on branch tables)
Hi,
For the LESSON page and any other page come to that, I suggest...
1.) Get FireFox and the Add-On Firebug then you can "Inspect Element" with a right mouse click, after which you will see some HTML & CSS relevant to the element under inspection at the bottom of you browser window. This is what I an lots of other people use...a sort of DIY
2.) With Firebug at the ready you have to be quick to "RIGHT CLICK" in the 'Redirect Page' wher you see the 30 Mins notice you are talking about.
3.) When you find the CSS you think you need add it to the your themes CSS ... add it right at the BOTTOM of the stylesheet then you can be sure it gets picked up in the changes.
HTH
Mary
Hi Mary
Thanks for the great theme.
Am I missing something though, I don't see any tabs in any of the activities (e.g. glossaries, databases, wikis) - only see the menu items.
Check out the attached image.
I have searched for the code to sort, but had no luck.
Cheers
Anton
Hi,
EDITED!!!
I thought I had fixed this. Are you using the most uptodate copy of this theme?
I'll take a look at this and fix it if it needs fixing.
Edit:
See attached aardvark_tabs.css which I have just made. This needs adding into the existing theme style folder and changes need to be made to add this css to the list of stylesheets named in the aardvark_makeover/config.php
which should look something like this...
$THEME->sheets = array(
'aardvark_layout', /** Must come first: Page layout **/
'aardvark_styles', /** Must come second: default styles **/
'aardvark_tabs', /** FIX for Tabs**/
'aardvark_menu',
'aardvark_blocks',
'aardvark_dock',
'aardvark_calendar',
);
HTH
Thanks
Mary
Just to clarify my last comment (see above)
1. add aardvark_tabs.css to styles directory in aardvark_makeover theme
aardvark_makeover/style/aardvark_tabs.css
2. Amend aardvark_makeover/config,php like so...
$THEME->sheets = array(
'aardvark_layout', /** Must come first: Page layout **/
'aardvark_styles', /** Must come second: default styles **/
'aardvark_tabs', /** FIX for Tabs**/
'aardvark_menu',
'aardvark_blocks',
'aardvark_dock',
'aardvark_calendar',
);
HTH
Mary
Perfect - thanks for the super quick response and solution.
Anton
Hi Mary - thanks for the wonderful theme. We are using this for our Moodle site.
I'm not sure what happened, but the bullet points are missing! We can insert it, but it doesn't show up. Any suggestions on what to do to rectify this? Thanks a lot!
Hi,
When you say, "I'm not sure what happened, but the bullet points are missing! We can insert it, but it doesn't show up." Do you mean when you write text lists in the HTML Editor (TinyMCE) you can see them, but when you save page they don't show? If this is what you men then this is a Moodle BUG and although it was fixed your version of Moodle may be the problem.
To check which version you have go to Site Administration > Notifications and you will see the version information at the top of the main column.
HTH
Mary
Hi Mary - yes, that's what I mean. My apologies for not making it clear!
We're using 2.0.3+ as we are unable to upgrade to 2.1 because of some hosting issues. To see the lists, we'll have to upgrade to 2.1?
Thanks for your help!
No you don't need to upgrade. Here is the missing code.
/* Fix for ordered and unordered list in course topic summary & course weekly summary */
ul li,
.course-content ul.weeks .content .summary ul li,
.course-content ul.topics .content .summary ul li {list-style: disc outside none;}
ol li,
.course-content ul.weeks .content .summary ol li,
.course-content ul.topics .content .summary ol li {list-style: decimal outside none;}
Add these line to your aardvark.css file add then at the very bottom of the page.
PS: The use of the word 'none' in the above code means 'no image'..OK?
Cheers
Mary
Hi Mary - thanks for the quick reply. I'm not sure which css file we need to add it in so tried putting the code into 3 difference css file (css3, aardvark_styles, aardvark_layout) but the bullet points still did not appear.
Which file should we be putting the code in?
Thanks a lot!
cheers
Zifang
Hi,
You needed to add the style to the END of aardvark_styles.css. Then you need to refresh the browser, purge all the caches. Site Aministration > Development > Purge all caches
HTH
Mary
Hi Mary - Thanks a lot!
Zifang
How does one change your theme name? pluginname?
For example, on the force theme, I am hoping to display the theme as MAIN_BLUE?
--Brent.
Hi,
You will need to create a CLONE of this theme first. If you follow the instructions in this tutorial Development: Themes 2.0 how to clone a Moodle 2.0 theme as well as change EVERY instance of "aardvark_makeover" to "main_blue" in the renderers.php, then you will be able to link to it using ?theme=main_blue if this is what you mean by forcing a theme?
Also you can only use lowercase letters in Moodle 2 theme names.
HTH
Mary
Thanks Mary!
Wonderful help!! I was at a standstill and the uppercase was my issue!
Cheers,
Brent
You're welcome Brent!
Glad you got this fixed!
Cheers
Mary
Hi
to start the theme is fab
I just wondered how to change the posistion of the date in the menu bar? In firefox it displays over to the right which is what I want but in IE I cant seem to get it over there, it always displays to the left.
thanks
Dave
Hi this is one of the drawbacks using IE7 or IE8
However if you are using IE9 the chances are that you have this is Compatibility Mode, as this works in IE9 normally.
To check CLICK F12 (Function Key) this splits the screen and gives you the following window.
Just check were indecated in this image that you are in the right Mode. It should read IE9 Browser and IE9 Standards. Clicking on either of these headings will show a drop-down menu where you can change this view.
Cheers
Mary
Mary
thanks for replying so fast, at work we use ie8 at the moment.
Dave
Can you get your IT dept to upgrad to IE9?
hi mary
I dont think it is an option, we have over 500 branches, I dont think they will upgrading IE for a while yet.
Also is there a way to put the login block in the centre of the theme?
thanks
Hi David,
I can do you a customised menubar, if that helps...no problem?
As for a login block in the center of the theme. The theme is only the outer skin of Moodle...so depending how you want your install of Moodle to work when a user hits the login link in the menu. Normally the login page is the same no matter what theme you are using. However, I can add a login page that is "custom made" if that's what you mean?
If you are talking about the ADD BLOCK (Login) which you can only add to the side blocks, then yes this is possible but will need lots of coding. I am not sure why you would want a llogin block in the center of your frontpage of your site when you have a login/logout in the menu.
So before I come up with suggestions, as there are lots of options, some easy others needing lots of coding, you had better explain to me how you would like your users to login first.
Cheers
Mary
Mary
Thnaks so much for the offer to help me out The plan is to have it looking like this.
I have got it looking right I am just stumped about having the login part in the middle and the date over to the right.
Thanks in advance for the help.
Hi David,
Have you done all this to the login block yourself? It looks really nice.
If you have made this and you want this login block in the center of the main content you should be able to achive this by putting the code you wrote inside a div container, and center that using width: 95%; margin: 0 auto; that should work.
If what I see here, in the image you posted, is visible on your site can you send me a link to it in a PM then I can get a better idea of how to center it?
Cheers
Mary
Mary
Sorry I should have explained that is how I want the front page to look like. But you can only have the login block on the left or right??
That looks sweet. Can I ask you a question? Where do I go to tweak the login page? I'd like to do something similar to what you have done, but I can't figure out where this is located in the code. In particular I'd like to increase the size of the fonts (Login / Password) and the size of the text input fields.
Is it in moodle/login/index.php? Is there CSS somewhere for styling the login page? Is it part of the theme?
And that grey bit at the bottom - very nice! Hard to do?
Sorry to reply to your question with a question!
Nick
Nick
Changing the background was really easy. The image above is how I would like the login part to look to, we havent actually got it like this as of yet.
Also is there a way to remove the date from the menu bar at the top?????
You should find the date in the layout files (frontpage.php and default.php) about a third of the way down the page. where it says...<span class="date"> delete the whole line of code including the span tags.
<span class="date"><a href="<?php echo new moodle_url('/calendar/view.php');?>" title="<?php echo get_string('today');?>"><?php echo strftime("%A, %d %B %Y"); ?></a></span>
I see. I also notice that your block header "ribs" on the right side are not aligned properly to the edge. I have this problem too when I view this theme in Internet Explorer (at least in IE8. Haven't tried 9 yet). It's easy to see the difference if you compare it to how it looks in Firefox or Chrome.
In addition to the right sight not being aligned, on both sides, the block headings sit too low on the block, which sometimes can restrict access to cliking the top item in a block. It drives me mad.
I wonder if there's a way to get this to display properly in IE...
Hi,
Although I updated this some weeks ago, I never got round to adding the updated file to the download area for this theme. Anyway I have just done this, and so you can get the new version HERE.
I see what you mean about IE8 although the new version does not have the same displacment of the sidebar heared ribs, there is certainy some strange behaviour going on. This is most likely casued by the overflow hidden/IE confict. I'll have to take a better look at this and see if I can adjust for that browser. If you find you want to tweak the CSS all you need to do is ad .1e8 infront of the css selector you are wanting to style and this will only work in ie8 same goes for ie6 & ie7 with .ie6 & .ie7 respectively.
HTH
Mary
Ok! I'll check out the new version and fiddle with the CSS myself as well. Thanks!
Hi All
I hate to post what is most probably a stupid question but ...
We have been using Aardvark Makeover for about 2 months now. I was recently asked to add a log out function at the top of the page instead of the footer. It was only when I started looking through this forum that I notice everyone else has a nice menu bar with logout button included. For some reason I dont think we have ever had this!
I haven't mucked around too much with the original files, other than to change the site from fluid width to fixed width. I modified the aardvark_menu.css to make it fixed width too, and noticed a commented out line: /*position: fixed; */
I've tried with this on and off - no joy
Is there something special I need to do to activate this menu bar? Am I missing something obvious?
Thanks
If you go to Site Administration>Appearance>Themes>Theme Settings you will find an area near the bottom of the page where the custom menu can be set. Once you have something in there, then the menu bar will be activated - It gives an example of how to set out the menu 'code' on that page
Ah, so obvious - when you know how. Thanks Richard
Thanks Rich!
mary...now that you and richard helped me get my moodles back up and running, and once i got the nerve to attempt to install new themes (the problem was as you said, themes should be installed using the same method as moodle was installed-in my case using cpanel, not ftp) i was able to install a couple new themes succesfully without crashing the site...and i just have to say i love your aardvark lite theme-i reeeeallly like it!! i cant wait to try to customize it a little! wish me luck and thank you for not only your wonderful themes but in general just helping folks out!!!
Hello, I have a problem, at first thought it was easy to solve but I can not.
I can not change the text color of the menus, it is in black with white left, I want only the text is white and without shade.
Thank you!
Hi,
Just delete this from aardvark_makeover/style/aardvark_menu.css
#navigation span.date,
#custommenu {
text-shadow: 0 1px 0 #000;
}
That should fix it.
Cheers
Mary
Thank you,
Unfortunately the color I'm using to link is in my way as you can see in the image below, I know where to change the link color: the file is aardvark_styles
But how I can change the color of the link only when he's on the menu?
What did you do to remove the color? It was white originally.
Hello!
Please could you help me?
I would like to know how to change the menu for each course. (version of moodle: 2.0.3)
that is, on the front page I have a menu. But, I would like to modify this menu to the courses.
I've tried to do this procedure. but in all courses appears the same menu of the main page ...
thank you!
Hi Alessandro,
Miriam has answered this query where you posted a duplicate here
Hi, I tried to install this theme in moodle 2.2 with linux (centos) but it does not work, I can't selecct it.
I unzip the theme in theme carpet but when try to select it, it does not apear.
I can do install and selecct another themes.
Please advise.
Hello everyone and thank you Mary for an another awesome theme! I was having some trouble with this theme in IE9 and I was wondering if any of you would be able to offer some help...
I have no issues with this theme in Firefox, Chrome, and Safari, however, the layout changes once I use IE9. Here's what I see in IE9:
And what I get in Firefox (what I'd like to see) is this:
Any help would be greatly appreciated!!!
It looks like it's a fault with the theme. I'll take a look at this and get back to you. Thanks for letting me knoe about this.
Cheers
Mary
Hi Daniel
Are you using IE-9 in Compatibility View mode?
you can try " <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" > " At top of the head tag in source code.
I'm considering updating this and making it into a responsive theme ready for 2.8.
A touch of 'Retro' comes to mind after revisiting this.
Cheers
Mary
