Hi everyone!
Does anyone know how to add buttons like the "moodle.org" homepage? I've made basic css rollovers before (see header on www.traininghat.com), but I don't know how to create the rollover buttons like on moodle.org.
Also, I wasn't sure what CSS file I should add my rollover code to. I'm using the SkyBlue theme.
For now, I've added rollover images, but they don't look good if you make the window smaller: www.smtraining.org
Thanks!
Micky
Hi,
The trick here is not to use tables to display the images use <div></div> tags instead and style it using css and @media queries as my attached example shows.
Cheers
Mary
Thanks! I'm going to assume that I should just replace background-color with background-URL.
I'll look up on Google how to change the DIV background when hovering over it.
Any suggestions on where to add the CSS code? Right now, I'm just linking to my own style.css doc. However, I'm happy to add it to a moodle theme file if that is best practice.
Yes, more or less, but it depends on the version of Moodle you are using. If it is Moodle 1.9 then you would need to add the CSS as I did in the example I have added here as a zip file.
If you ware using Moodle 2.0+ then you you would need to add the background-image using this notation...
background-image: url([[pix:theme|fire-engine]]);
providing the image is stored in your theme's pix folder.
Hope this helps?
Mary
Thanks! That does help! Do you know if these homepage DIVs / images will show up in the Moodle app? We are about to upgrade to 2.5 and enable the Moodle app. I'm curious to know how much customization carries over to the Moodle app.
Thanks!
Micky
...when I say "moodle app", I mean the mobile Moodle app for iPads.
Thanks!
Micky
The Moodle app is a whole different technology, I believe using its own theme that is built for it. Perhaps ask on the Moodle for Mobile forum -> https://moodle.org/mod/forum/view.php?id=7798.
I'm not even sure I'd call it a 'theme' as such Gareth ('not as we know it, Jim') Although it can be restyled to some extent with its own css file, but that is completely outside the normal Moodle Themes setup as far as I am aware.
http://docs.moodle.org/25/en/Mobile_app#Style_customization - the customisation css can be in a theme or in a local plugin, but basically you point the app to a specific css file for itself, it does not require a 'standard' theme, simply a single css file for the html5 that the app uses.
As for adding buttons like the moodle.org home page to the front of the mobile app - well, its written in a completely different way to the front page of moodle as a website. You could probably restyle the buttons/links that are in the app, after all they are just html5, but I've never tried it
FYI - With your guidance and some help from Google, I was able to get it working! Yay!
CSS CODE:
#DIV-button-holder{
min-width: 500px;}
.DIV-bg {
background-image: url(
);
background-repeat: repeat-x;
height: 130px;
width: 33%;
min-width: 90px;
border: 1px solid #FFE29E;
float:left;
}
.DIV-bg:hover {
background-image: url(
);
}
.icon-center {
text-align: center;
padding-top: 5px;
}
HTML CODE: ( I just attached my own style sheet, so i didn't have to go hunting for CSS theme files.)
<link href="http://www.smtraining.org/homepage_rollovers/frontpage_buttons.css" rel="stylesheet" type="text/css" />
<p style="text-align: center;">South Metro Training University brings training and line together in one central location to provide the best training available.</p>
<p style="text-align: center;">
<div id="DIV-button-holder">
<div class="DIV-bg"><div class="icon-center"><img src="http://www.smtraining.org/homepage_rollovers/admin_icon.png" width="162" height="121"/></div></div>
<div class="DIV-bg"><div class="icon-center"><img src="http://www.smtraining.org/homepage_rollovers/admin_icon.png" width="162" height="121"/></div></div>
<div class="DIV-bg"><div class="icon-center"><img src="http://www.smtraining.org/homepage_rollovers/admin_icon.png" width="162" height="121"/></div></div></div>