re-arrange site admin block

re-arrange site admin block

by Wen Jie -
Number of replies: 6
hi, i understand for moodle, the site admin block lies vertically on the left side by default..

but i need to put it horizontally, just below the site name. how do i do it so that further upgrade will not be affected?

is there a theme for it?

many thanks
Average of ratings: -
In reply to Wen Jie

Re: re-arrange site admin block

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Not in Moodle 1.9 without major hacking. Will be possible in Moodle 2.0, given the right theme.
Average of ratings: -
In reply to Tim Hunt

Re: re-arrange site admin block

by Wen Jie -
hmm major hacking..

I was thinking of inserting in header.html but im not sure how..any guidelines on how to do it?
Average of ratings: -
In reply to Wen Jie

Re: re-arrange site admin block

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Well, you could try copying the relevant code from blocks/admin_tree/block_admin_tree.php (get_content() method) to header.html.
Average of ratings: -
In reply to Wen Jie

Re: re-arrange site admin block

by Frank Ralf -
Hi Wen,

Inspired by Drupal's Administration Menu (http://drupal.org/project/admin_menu) I started tampering with the Admin block myself some time ago, to see how far one could come with only CSS.

The following CSS is merely a starting point and proof of concept but might give you some hints:

div#page {
margin-top: 100px;
}

.block_admin_tree {
position: fixed !important;
top: 2px !important;
left: 5px !important;
width: 1000px !important;
}

.block_admin_tree .header {
background-color: lime !important;
}

.block_admin_tree .content {
background-color: yellow !important;
font-family: Tahoma, Arial, sans-serif !important;
font-size: 80% !important;
margin: 0px !important;
padding: 5px !important;
}

.block_admin_tree .content li {
padding: 0 !important;
margin: 0 !important;
line-height: 0.5em !important;
}

.block_admin_tree div.depth0 {
display: inline;
}

This will make the Admin menu display horizontally (using "display:inline;") in a fixed position on the very top of the page so it won't scroll with the rest of the page. To make room for the menu the whole page content is pushed down a bit.

The markup of the Admin menu is a quite complex in Moodle 1.9 which makes this kind of modification a bit hard (see User:Frank Ralf/Moodle HTML for further details).

A very good tutorial on how to make a horizontal menu is http://more.ericmeyeroncss.com/projects/06/

hth
Frank



Attachment Horizontal_menu.png
Average of ratings: -
In reply to Frank Ralf

Re: re-arrange site admin block

by Wen Jie -
hey frank, thank you so much..this would be a great starting point for me..

i will try and and report on my progress
Average of ratings: -
In reply to Wen Jie

Re: re-arrange site admin block

by Frank Ralf -
I finally found the two articles on A List Apart on horizontal menus I remembered:

"Drop-Down Menus, Horizontal Style"
http://www.alistapart.com/articles/horizdropdowns/

"Suckerfish Dropdowns"
http://www.alistapart.com/articles/dropdowns/

Note that all tutorials mentioned above use an unordered list as a starting point which unfortunately isn't given with Moodle 1.9's Admin menu.

Another tip:
Use Development:Firebug and Stylish for testing CSS modifications.
See CSS FAQ and Themes FAQ for further information.

Cheers,
Frank
Average of ratings: -