diff --git a/theme/anomaly/config.php b/theme/anomaly/config.php index 1f32394c915..d435a8d9f4f 100644 --- a/theme/anomaly/config.php +++ b/theme/anomaly/config.php @@ -7,7 +7,7 @@ $THEME->name = 'anomaly'; -$THEME->sheets = array('base', 'general', 'browser','dock'); +$THEME->sheets = array('base', 'general', 'browser', 'dock', 'menu'); /// This variable is an array containing the names of all the /// stylesheet files you want included in this theme, and in what order //////////////////////////////////////////////////////////////////////////////// diff --git a/theme/anomaly/pix/menu/nav-arrow-left.jpg b/theme/anomaly/pix/menu/nav-arrow-left.jpg new file mode 100644 index 00000000000..177f823a0a3 Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrow-left.jpg differ diff --git a/theme/anomaly/pix/menu/nav-arrow-right.jpg b/theme/anomaly/pix/menu/nav-arrow-right.jpg new file mode 100644 index 00000000000..e9a89f559fa Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrow-right.jpg differ diff --git a/theme/anomaly/pix/menu/nav-arrowover-left.jpg b/theme/anomaly/pix/menu/nav-arrowover-left.jpg new file mode 100644 index 00000000000..596b6ff366d Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrowover-left.jpg differ diff --git a/theme/anomaly/pix/menu/nav-arrowover-right.jpg b/theme/anomaly/pix/menu/nav-arrowover-right.jpg new file mode 100644 index 00000000000..15f8cf177eb Binary files /dev/null and b/theme/anomaly/pix/menu/nav-arrowover-right.jpg differ diff --git a/theme/anomaly/renderers.php b/theme/anomaly/renderers.php index d5b82968660..016f2fb837d 100644 --- a/theme/anomaly/renderers.php +++ b/theme/anomaly/renderers.php @@ -81,4 +81,89 @@ class theme_anomaly_core_renderer extends core_renderer { return $output; } + /** + * Renders a custom menu object (located in outputcomponents.php) + * + * The custom menu this method override the render_custom_menu function + * in outputrenderers.php + * @staticvar int $menucount + * @param custom_menu $menu + * @return string + */ + protected function render_custom_menu(custom_menu $menu) { + + // If the menu has no children return an empty string + if (!$menu->has_children()) { + return ''; + } + + // Add a login or logout link + if (isloggedin()) { + $branchlabel = get_string('logout'); + $branchurl = new moodle_url('/login/logout.php'); + } else { + $branchlabel = get_string('login'); + $branchurl = new moodle_url('/login/index.php'); + } + $branch = $menu->add($branchlabel, $branchurl, $branchlabel, -1); + + // Initialise this custom menu + $content = html_writer::start_tag('ul', array('class'=>'dropdown dropdown-horizontal')); + // Render each child + foreach ($menu->get_children() as $item) { + $content .= $this->render_custom_menu_item($item); + } + // Close the open tags + $content .= html_writer::end_tag('ul'); + // Return the custom menu + return $content; + } + + /** + * Renders a custom menu node as part of a submenu + * + * The custom menu this method override the render_custom_menu_item function + * in outputrenderers.php + * + * @see render_custom_menu() + * + * @staticvar int $submenucount + * @param custom_menu_item $menunode + * @return string + */ + protected function render_custom_menu_item(custom_menu_item $menunode) { + // Required to ensure we get unique trackable id's + static $submenucount = 0; + $content = html_writer::start_tag('li'); + if ($menunode->has_children()) { + // If the child has menus render it as a sub menu + $submenucount++; + if ($menunode->get_url() !== null) { + $url = $menunode->get_url(); + } else { + $url = '#cm_submenu_'.$submenucount; + } + $content .= html_writer::start_tag('span', array('class'=>'customitem')); + $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title())); + $content .= html_writer::end_tag('span'); + $content .= html_writer::start_tag('ul'); + foreach ($menunode->get_children() as $menunode) { + $content .= $this->render_custom_menu_item($menunode); + } + $content .= html_writer::end_tag('ul'); + } else { + // The node doesn't have children so produce a final menuitem + + if ($menunode->get_url() !== null) { + $url = $menunode->get_url(); + } else { + $url = '#'; + } + $content .= html_writer::link($url, $menunode->get_text(), array('title'=>$menunode->get_title())); + } + $content .= html_writer::end_tag('li'); + // Return the sub menu + return $content; + } + } \ No newline at end of file diff --git a/theme/anomaly/style/general.css b/theme/anomaly/style/general.css index d6951869be8..cfc2ecfc03f 100644 --- a/theme/anomaly/style/general.css +++ b/theme/anomaly/style/general.css @@ -11,21 +11,17 @@ a:visited { a:hover { text-decoration: underline; } - img.icon, img.iconhelp { vertical-align: middle; } - html, body { background-color: #C8C9C7; } - #page-content { background-color: #FFF; min-width: 0; } - /** Header **/ #page-header { @@ -36,14 +32,12 @@ html, body { padding: 0; width: 100%; } - h1.headermain { float: left; font-size: 2.3em; margin: 15px; line-height: 1; } - #page-header .headermain span { color: #C8C9C7; } @@ -54,7 +48,6 @@ h1.headermain { border-bottom-color: #3A4D28; border-bottom-width: 3px; } - #page-header .navbar { background-color: #697F55; width: 100%; @@ -96,7 +89,6 @@ h1.headermain { background-color: #E3E3E3; padding: 4px 5px; } - .coursebox { width: 100%; margin: 10px 0; @@ -120,55 +112,44 @@ h1.headermain { .course-content .headingblock.outline { margin-top: 0; } - .course-content .section.main { border:1px solid #E3E3E3; margin-bottom: 10px; } - .course-content .section.main .left.side { float:left;width:20px;padding:5px; } - .course-content .section.main .right.side { float: right; width: 20px; padding: 5px; } - .course-content .section.main .content { padding: 5px 5px 10px; background-color: #FFF; } - .course-content .section.main .content .section_add_menus { text-align: right; } - #page-report-outline-user .section { border: 1px solid #DDD; margin: 0 5% 1.5em 5%; } - #page-report-outline-user .section h2, #page-report-outline-user .section .content { margin: 5px 1em; } - #page-report-outline-user .section table td { border: 0; } - .generaltable { border: 1px solid #DDD; } - .generaltable .cell { background-color: #FFF; border:1px solid #EEE; border-collapse: collapse; } - .generaltable .header { background-color: #EEE; border: 1px solid #EEE; @@ -180,17 +161,14 @@ h1.headermain { margin-top: 15px; margin-bottom: 15px; } - .loginbox .loginform { margin-top: 15px; } - .loginbox .loginform .form-label { width: 44%; float: left; text-align: right; } - .loginbox .loginform .form-input { width: 55%; float: right; @@ -200,42 +178,34 @@ h1.headermain { .loginbox .loginform .form-input input { width: 6em; } - .loginbox.twocolumns { border: 1px solid #DDD; } - .loginbox.twocolumns .loginpanel { float: left; width: 49%; text-align: center; } - .loginbox.twocolumns .signuppanel { float: left; width: 50%; border-left: 1px solid #DDD; } - .loginbox.twocolumns .signuppanel h2 { text-align: center; } - .loginbox.twocolumns .signuppanel div { margin: 1em; } - .loginbox.twocolumns .signuppanel div li { font-size: 90%; } - .loginbox .loginsub { margin-left: 10%; margin-right: 10%; padding: 10px; margin-bottom: 5px; } - .loginbox .guestsub { margin-left: 10%; margin-right: 10%; @@ -243,7 +213,6 @@ h1.headermain { margin-bottom: 5px; border-top: 1px solid #DDD; } - .dir-rtl .loginbox .loginform .form-input {width:50%} /** Blocks **/ @@ -260,15 +229,12 @@ h1.headermain { .block h4 { margin: 0; } - .block .header { margin: 10px 6px 3px 6px; } - .block .content { margin: 10px 6px 3px 6px; } - /** Admin **/ .box.adminwarning { text-align: center; @@ -282,62 +248,50 @@ h1.headermain { font-size: 90%; padding: 10px 10%; } - #adminsettings fieldset { border: 1px solid #C8C9C7; background-color: #E3E3E3; } - #adminsettings fieldset .generalbox { margin: 1em 0.5em; border-color: #C8C9C7; } - #adminsettings .form-buttons { margin-left: 13em; } - .form-item { width: 100%; margin: 1em 1em 2em 1em; } - .form-item .form-label { width: 12.5em; text-align: right; float: left; margin-right: 0.5em; } - .form-item .form-label .form-shortname { display: block; color: #666; font-size: 75%; } - .form-item .form-setting { margin-left: 13em; } - .form-item .form-setting .defaultsnext { display:inline; } - .form-item .form-setting .form-defaultinfo { display: inline; margin-left: 0.5em; font-size: 90%; color: #666; } - .form-item .form-description { margin: 0.5em 1em 0.5em 13em; } - .form-item .form-textarea textarea { width: 495px; } - #authmenu .informationbox { width: 80%; margin: 0 auto 10px; @@ -347,13 +301,11 @@ h1.headermain { #authmenu table td { border-width: 0; } - #categoryquestions { margin-left: auto; margin-right: auto; width: 100%; } - #categoryquestions th, .user th, .user th.header, @@ -365,7 +317,6 @@ h1.headermain { border: 2px solid #697F55; border-bottom-color: #111; } - .user th a:link, #categoryquestions th a:link, .group th a:link, @@ -373,7 +324,6 @@ h1.headermain { color: #FFF; text-decoration: none; } - .user th a:visited, #categoryquestions th a:visited, .group th a:visited, @@ -381,7 +331,6 @@ h1.headermain { color: #FFF; text-decoration: underline; } - .user tr td.cell, #categoryquestions tr td.cell, .group tr td.cell, @@ -389,39 +338,32 @@ h1.headermain { border: 1px solid #C8C9C7; border-width: 0 1px; } - .user .r1 .cell, #categoryquestions .r1 .cell, .group .r1 .cell, .admin table .r1 .cell { background-color: #EEE; } - .singlebutton, .buttons { text-align: center; margin: 20px; } - .buttons form { display: inline; } - .buttons div { display: inline; } - .buttons .singlebutton { display: inline; padding: 5px; margin: 0; } - .admin .generalbox { background-color: #EEE; border-color: #C8C9C7; } - #admin-mnet-index table td, #files-index .column-content table td { border-width: 0; @@ -436,7 +378,6 @@ h1.headermain { .tag-management-form { text-align:center; } - #tag-management-list { margin-top:1em; } @@ -446,12 +387,10 @@ h1.headermain { border-width: 0; vertical-align: top; } - .userinfobox .side { width: 120px; text-align: center; } - .userinfobox .list .label {font-weight:bold;text-align:right; } @@ -463,7 +402,6 @@ h1.headermain { border: 1px solid #DDD; border-collapse: separate; } - .forumpost, .forumpost .left.picture { background-color: #EEE; @@ -484,13 +422,11 @@ h1.headermain { .forumpost .topic .author { padding-left: 10px; } - .forumpost .content, .forumpost .options { background-color: white; padding-top: 10px; } - .forumpost .content .shortenedpost a { margin: 0 10px; padding: 0; @@ -505,7 +441,6 @@ h1.headermain { .forumpost .options .link { padding-right: 10px; } - .forumpost .content .shortenedpost a, .forumpost .content .shortenedpost span.post-word-count, .forumpost .commands, @@ -517,13 +452,11 @@ h1.headermain { .forumpost .row .left { clear: left; } - .forumpost .posting.shortenedpost {margin-left: 10px;} #page-mod-forum-discuss #page-header { /* fixes broken header in forum discuss */ margin-top: 10px; } - /** Calendar **/ .block.block_calendar_month td, .block.block_calendar_month th { @@ -533,12 +466,10 @@ h1.headermain { width: 14%; line-height: 18px; } - #calendar abbr, .block.block_calendar_month abbr { border-bottom-width: 0; } - #calendar .weekend, .block.block_calendar_month .weekend { color: #A00; @@ -547,19 +478,16 @@ h1.headermain { .block.block_calendar_month .today { border: 1px solid #444; } - #calendar .eventnone a, .block.block_calendar_month .eventnone a { color:#444; } - #calendar { width: 98%; margin: 0 1%; border-spacing: 5px; border-collapse: separate; } - #calendar td, #calendar th { border-width: 0; @@ -569,43 +497,35 @@ h1.headermain { line-height: 18px; vertical-align: top; } - #calendar .maincalendar { width: auto; border: 1px solid #DDD; } - #calendar .maincalendar .heightcontainer { height: 100%; position: relative; margin: 1em; } - #calendar .maincalendar .header { padding: 5px; font-weight: bold; } - #calendar .maincalendar .header .buttons { float: right; } - #calendar .maincalendar table { width: 100%; } - #calendar .maincalendar .calendar-controls { width: 100%; overflow: hidden; font-size: 1.1em; } - #calendar .maincalendar .calendar-controls .previous { display: block; float: left; width: 20%; } - #calendar .maincalendar .calendar-controls .current { display: block; float: left; @@ -613,43 +533,35 @@ h1.headermain { text-align: center; margin-top: 0; } - #calendar .maincalendar .calendar-controls .next { display: block; float: left; width: 20%; text-align: right; } - #calendar .sidecalendar { width: 200px; } - #calendar .sidecalendar h2, #calendar .sidecalendar h3 { margin: 5px; font-size: 95%; } - #calendar .sidecalendar .block { border: 1px solid #DDD; margin-bottom: 10px; text-align: center; } - #calendar .sidecalendar .block table { margin: 0 auto 5px; } - #calendar .sidecalendar .block .filters table { width: 95%; margin: 0 auto 1em; } - #calendar .sidecalendar .block .minicalendarblock { border-top: 1px solid #DDD; } - #calendar .filters table { padding: 2px; background-color: #EEE; @@ -657,7 +569,6 @@ h1.headermain { border-spacing: 2px; border-collapse: separate; } - #calendar .filters table td { font-size: 100%; width: auto; @@ -667,91 +578,73 @@ h1.headermain { border: 1px solid #444; overflow: hidden; } - #calendar .calendar_event_global { background-color: #D6F8CD; } - #calendar .calendar_event_course { background-color: #FFD3BD; } - #calendar .calendar_event_group { background-color: #FEE7AE; } - #calendar .calendar_event_user { background-color: #DCE7EC; } - #calendar .maincalendar .calendarmonth { border-collapse: separate; } - #calendar .maincalendar .calendarmonth th { font-size: 0.9em; border-bottom: 2px solid #444; } - #calendar .maincalendar .calendarmonth td { border: 1px solid #EEE; border-bottom-color: #CCC; border-right-color: #CCC; height: 6em; } - #calendar .maincalendar .calendarmonth td div {margin:4px;font-size:0.9em; } #calendar .maincalendar .calendarmonth td .day {font-weight:bold; } - #calendar .maincalendar .calendarmonth tr td:first-child { border-left-color: #CCC; } - #calendar .maincalendar .event { border-spacing: 0; border: 1px solid #DDD; background-color: #EEE; } - #calendar .maincalendar .event .picture { width: 32px; text-align: center; } - #calendar .maincalendar .event .topic { width: auto; padding: 5px; } - #calendar .maincalendar .event .side { width: 32px; } - #calendar .maincalendar .event .description { width: auto; border-top: 1px solid #DDD; border-left:1px solid #DDD; padding: 5px; } - #calendar .maincalendar .bottom { text-align: center; } - #calendar .calendarmonth ul { margin: 0; padding: 0; } - #calendar .calendarmonth ul li { list-style: none; margin: 0; padding: 2px; } - /** User **/ .user .rolesform, @@ -760,14 +653,11 @@ h1.headermain { .user #participantsform { text-align:center; } - .user #participantsform table { margin-top:1em; } - .user #participantsform td {text-align:left; } - .user table.controls { margin: 5px auto; border: 1px solid #DDD; @@ -777,7 +667,6 @@ h1.headermain { .user table.controls td { border-width:0px; } - /** Overide for RTL layout **/ .dir-rtl #page-header .navbar .breadcrumb { @@ -787,53 +676,6 @@ h1.headermain { float:left; } -/** Custom menu **/ - -#custommenu { - margin-bottom: 0; -} - -#custommenu .yui3-menu-horizontal .yui3-menu-content, -#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content, -#custommenu .yui3-menu-horizontal .yui3-menu-content ul, -#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content ul, -#custommenu .yui3-menu-horizontal.javascript-disabled .yui3-menu-content li li:hover > a, -#custommenu .yui3-menu-horizontal .yui3-menu-label, -#custommenu .yui3-menuitem, -#custommenu .yui3-menuitem .yui3-menuitem-content { - border-width: 0; -} - -#custommenu .yui3-menu .yui3-menu-label, -#custommenu .yui3-menu .yui3-menuitem-content { - color: #FFF; - font-weight: bold; - line-height: 30px; - padding: 0 14px; -} - -#custommenu .custom_menu_submenu .yui3-menu-content{ - background-color: #3A4D28; -} - -#custommenu .yui3-menuitem-active .yui3-menuitem-content { - background-image: none; -} - -#custommenu .custom_menu_submenu .yui3-menu-label, -#custommenu .custom_menu_submenu .yui3-menuitem-content { - line-height: 25px; - padding: 0 20px; -} - -#custommenu .yui3-menu-label-active, -#custommenu .yui3-menu-label-menuvisible, -#custommenu .yui3-menuitem-active .yui3-menuitem-content, -#custommenu .yui3-menu .yui3-menu .yui3-menuitem-active .yui3-menuitem-content, -#custommenu .yui3-menu-horizontal.javascript-disabled li a:hover { - background-color: #697F55; -} - /* Add Block -------------------------*/ .block .content .singleselect form#add_block .select.menubui_addblock { width: 160px;} diff --git a/theme/anomaly/style/menu.css b/theme/anomaly/style/menu.css new file mode 100644 index 00000000000..09a8c1403c5 --- /dev/null +++ b/theme/anomaly/style/menu.css @@ -0,0 +1,221 @@ +/* Custom menu, in LTR mode +--------------------------*/ +#custommenu { + width: 100%; + margin: 0; + padding: 0; + clear: both; + height: 30px; + background: #222; + margin:0; +} +/* +Dropdown Menu - CSS from DeCaf Theme by Lei Zhang +-------------------------------------------------*/ +ul.dropdown span.customitem { + padding: 0; + border: 0; + width: 100%; +} +ul.dropdown span.customitem { + padding: 0; + width: 100%; +} +ul.dropdown li a, +ul.dropdown span.customitem a { + padding: 6px 20px; +} +ul.dropdown span.customitem a:hover { + border: 0; +} +#custommenu ul.dropdown ul { + padding:0; + width: auto; +} +#custommenu ul.dropdown ul a { + padding: 4px 18px; +} +#custommenu ul.dropdown > li span a { + height: 16px; +} +ul.dropdown, +ul.dropdown li, +ul.dropdown ul { + list-style: none; + margin: 0; + padding: 0; +} +ul.dropdown { + position:relative; + top: 0; + z-index: 597; + float:left; + font-size: 13px; +} +ul.dropdown li { + float: left; + line-height: 1.3em; + vertical-align: middle; + background-color: transparent; + color: #FFF; + zoom: 1; +} +ul.dropdown li.hover, +ul.dropdown li:hover { + position: relative; + z-index: 599; + cursor: default; +} +ul.dropdown ul { + visibility: hidden; + position: absolute; + top: 100%; + z-index: 598; + left: 0; + right: auto; + margin-top: -1px; /** this setting is important do not change **/ + font-size: 100%; +} +ul.dropdown ul li { + float:none; + background-color: #3A4D28; + border-width: 1px; + border-style: solid; + border-color: #3A4D28 #697F55 #5A6D49; /** menu item border **/ + padding: 0; +} +ul.dropdown ul ul { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + border-top: none; + border-left: none; + font-weight: 400; +} +ul.dropdown li:hover > ul { + visibility: visible; +} +ul.dropdown span, +ul.dropdown span a, +ul.dropdown li.clickable-with-children > a { + width: auto; + padding: 2px 6px 4px 20px; + color: #FFF; +} +ul.dropdown ul span, +ul.dropdown ul span a, +ul.dropdown ul li.clickable-with-children > a { + background-color: #3A4D28; + background-image: url([[pix:theme|menu/nav-arrow-right]]); + background-position: 100% 50%; + background-repeat: no-repeat; + color: #FFF; +} +ul.dropdown ul ul span, +ul.dropdown ul ul span a, +ul.dropdown ul ul li.clickable-with-children > a { + background-color: #3A4D28; + background-image: url([[pix:theme|menu/nav-arrow-right]]); + background-position: 100% 50%; + background-repeat: no-repeat; + color: #FFF; +} +ul.dropdown a:link, +ul.dropdown a:visited { + color: white; + text-decoration: none; +} +ul.dropdown a:hover { + border: 0 none; + background-color: #697F55; + color: #FFF; +} +ul.dropdown ul ul li { + background-color: #3A4D28; +} +ul.dropdown ul ul ul li { + background-color: #3A4D28; +} +ul.dropdown li a, +ul.dropdown span, +ul.dropdown span a { + border: 0 none; +} +ul.dropdown ul li a, +ul.dropdown ul span, +ul.dropdown ul span a { + border: 0; +} +ul.dropdown ul ul li a, +ul.dropdown ul ul span, +ul.dropdown ul ul span a { + border: 0 none; +} +ul.dropdown ul ul ul li a, +ul.dropdown ul ul ul span, +ul.dropdown ul ul ul span a { + border: 0 none; +} +ul.dropdown a, +ul.dropdown span { + display: block; +} +ul.dropdown ul a { + width: 166px; + padding: 2px 0 4px 5px; +} +ul.dropdown ul a.open:hover { + background-color: #697F55; + color: #FFF; +} +ul.dropdown ul li:hover > span, +ul.dropdown ul li:hover > span a { + background-color: #697F55; + background-image:url([[pix:theme|menu/nav-arrowover-right]]); + color: #FFF; +} +ul.dropdown li.clickable-with-children:hover > a { + background-image:url([[pix:theme|menu/nav-arrowover-right]]); +} +ul.dropdown *.open, +ul.dropdown li:hover > span, +ul.dropdown li:hover > span a { + background-color: #697F55; + color: #FFF; +} +ul.dropdown ul ul *.open, +ul.dropdown ul ul li:hover > span, +ul.dropdown ul ul li:hover > span a { + background-color: #697F55; + background-image: url([[pix:theme|menu/nav-arrowover-right]]); + color: #FFF; +} + +/* Custom menu, in RTL mode +---------------------------*/ +.dir-rtl #custommenu ul.dropdown { + float: right; +} +.dir-rtl #custommenu ul.dropdown ul{ + right: 0; + left: auto; +} +.dir-rtl #custommenu ul.dropdown ul ul { + right: 203px; + left: auto; +} +.dir-rtl #custommenu ul.dropdown ul span, +.dir-rtl #custommenu ul.dropdown ul span a, +.dir-rtl #custommenu ul.dropdown ul li.clickable-with-children > a { + background-image: url([[pix:theme|menu/nav-arrow-left]]); + background-position: 0 50%; + background-repeat: no-repeat; +} +.dir-rtl #custommenu ul.dropdown ul li:hover > span, +.dir-rtl #custommenu ul.dropdown ul li:hover > span a { + background-image: url([[pix:theme|menu/nav-arrowover-left]]); +} +.dir-rtl #custommenu ul.dropdown li.clickable-with-children:hover > a { + background-image: url([[pix:theme|menu/nav-arrowover-left]]); +}