(1)moodle主题放在moodle/theme下,只要将合适的主题放入该文档,然后用管理员账号登陆,在首页的管理界面中“外观”-“主题风格”-“主题风格选择器”中选择放入的主题即可。
(2)moodle主题theme下每个主题对应一个文件夹。各文件夹下包含的文件不一样。但基本的文件有三个(也就是需要修改的3个文件):header.html;footer.html.layout.css(或者其他.css)。header.html是修改moodle的头,footer.html是修改底部的,而css文件是控制包括头底还是中间内容部分的样式的,如颜色、字体大小、背景等;
(3)首先是header.html:
<?php echo $heading ?>就是整个的“主题名称”。
<?php echo $menu ?> 就是现实“您以**登陆(退出)+语言选择框”(这个是分两行写的)
if ($home) 意思是如果是首页,则显示:
if ($heading)意思是头部显示:
———————————————-
<?php
{
include(‘profileblock.php’); 整个是登陆窗口,整个是显示成一行的,由css或者表格宽度来压缩成多行显示。并且登陆后显示四个菜单:“用户名”,换行后“更改个人资料”,“我的课程”,“退出”。
} ?>
—————————————
可以自己用表格把头部弄好,然后将表格插入到header.html里面的 <?php print_container_start(true, ”, ‘header’); ?>和<?php print_container_end(); ?>之间。
———————————————————–
头上如果用“大图片banner”,就可以用上面插入php代码中的定义好的表格的背景图片就可以了。
<table width=”950″ height=”199″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ background=”<?php echo $CFG->themewww . ‘/’ . current_theme() ?>/pix/banner.jpg”>
主题文件中的“ 图片路径”:<?php echo $CFG->themewww .’/’. current_theme() ?>/****.jpg
—————————————-
并且可以在页面中定义样式表(2种),因为就进原则,这2种样式表定义的样式比外面的css文件定义的样式优先级高,采用内部定义的样式,如:
<style type=”text/css”>
<!–
body {
margin-top: 0px;
}
–>
</style>
或者:<span style=”font-weight: bold; font-size: 20.5pt; color: #FFFFFF; line-height: 30px; font-family: 宋体”>文字内容</span>
———————————————
if ($navigation) { 判断是否设置了显示“课程导航”(系统按照名次自动设置的),平台全局设置中可以取消。
<?php print_navigation($navigation); ?> 输出“课程导航”
<?php echo $button; ?></div> 输出右边的“切换身份和打开编辑按钮”
———————————————————————
(4)footer.html:
echo $loggedinas; 输出底部的“您以管理 用户登录 (退出)”。
echo $homelink; 输出底部的那个moodle徽标图片。
————————————-
<DIV class=footer_bottom>
<DIV style=”PADDING-TOP: 0px”>
<img src=”<?php echo $CFG->themewww .’/’. current_theme() ?>/tiao.jpg” width=”950″ height=”11″> 底部背景;
<div align=”center”><br><A href=”*” target=_blank>写入版权</A> |
<A href=”*” target=_blank>写入版权</A> |
<A href=”*” target=_blank>写入版权</A>
</div>
</DIV>
</DIV>
<!–底部footer结束–>
</div>
</body> 这是这个网页的下半部分 ,头部有上半部分,
</html> 这是这个网页的下半部分,头部有上半部分
—————————————-
(5)css: 这个文件是最重要的(有些主题里面不止一个)
body {
background-image: url(bg.gif); /* 网页背景 颜色:background-color: #0075BB; 背景图片:background-image: url(bg.gif); */
color: #333; /* color: #333;是课程类别等默认字体颜色 */
}
/* 这是定义页面那950px的 */
#page {
background-color: #fff; /* 这是定义页面那950px的背景颜色 *//
width: 950px; * 这是定义页面的宽度:950px或者90%*/
margin: auto;
padding: 0.2em;
border: 2px ridge #0075BB; /* 这是定义950的大边框,宽度、颜色*/
}
body, table, td, th, li {
font-family: Arial, Helvetica, sans-serif; /* 这是定义950的默认字体:这个还不确定*/
}
下面定义全局的超级链接的颜色,字体,下划线等。影响的地方有: 左边“网站管理”、右上角和底部的“您以什么登陆(退出)”,课程的分类和课程名称的字体颜色、大小的。但是上面的“课程类别”四个字不在这儿控制。
A {
font-size:12px;COLOR: #000000;TEXT-DECORATION: none
}
A:link {
font-size:12px;COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
font-size:12px;COLOR: #000000;
}
A:hover {
TEXT-DECORATION: underline
}
A:active {
TEXT-DECORATION: underline
}
.sideblock .header {
background-image: url(nav_bg.jpg); /* 这是定义左右两边小模块的背景:颜色、或者图片 */
background-color: #CCDAE3; /* 这是定义左右两边小模块的背景:颜色、或者图片*/
border-bottom: 1px groove #CCC; /* 这是定义950的大边框,宽度、颜色*/
color: #fff; /* 这是定义左右两边小模块宽度、颜色*/
height: 20px;
vertical-align:middle; /* 小模块的”模块名”竖直居中*/
text-valign:middle; /* 小模块的”模块名”竖直居中*/
line-height: 20px; /* 开始忘了没有写这个,小模块的“模块名”死活不能竖直居中,现在可以了*/
}
.coursebox, .generalbox {
background-color: #fff;
}
.content {
background-color: #fff;
}
#content {
clear: left;
}
.navbar {
clear: left;
}
.headingblock {
background-color: #fff;
}
.header-logo {
float: left;
}
.headermain {
color: #0075BB;
}
#header-home, #header {
background-image: url(pix/panorama.jpg);
background-repeat: no-repeat;
background-position: top right;
height: 110px;
}
/* New Navigation Bar Style background-color: #0075BB; */
#main-nav {
padding: 0;
margin: 4px 0px 4px 0px;
margin: 0;
background-image: url(bg_menu.gif); /* 菜单栏的背景或者颜色*/
height: 2.8em;
font-size: 0.8em;
}
#main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#main-nav li {
float: left;
position: relative;
width: 10em;
height: 1.5em;
text-align: center;
color: #fff;
border-right: #CCC groove 2px;
border-bottom: #CCC groove 2px;
background-color: #0075BB;
padding-top: 0.25em;
}
#main-nav li a {
text-decoration: none;
color: #fff;
display: block;
}
#main-nav li ul {
display: none;
position: absolute;
top: 1.9em;
left: 0;
z-index: 999;
}
#main-nav li:hover {
background-color: #2393D7;
color: #000;
}
#main-nav li a:hover {
color: #000;
}
#main-nav li:hover ul, #main-nav li.over ul {
display: block;
}
#main-nav li ul li {
background-color: #0075BB;
}
#main-nav li ul li a {
display: block;
}
/* Forum Styles */
.forumpost {
border: none;
font-size: 0.85em;
}
.forumpost .left {
padding-right: 30px;
}
.forumpost .starter {
background-color: #FFF;
}
.forumpost .content {
/* -moz-border-radius-bottomleft: 20px; */
border-right: #000 solid 1px;
border-bottom: #000 solid 1px;
border-left: #ffffd8 solid 1px;
padding: 1em 1em 1em 2em;
background-color: #ffffd8;
}
.forumpost .topic {
border-bottom: none;
border-top: #000 solid 1px;
-moz-border-radius-topright: 20px;
border-right: #000 solid 1px;
border-left: #ffffd8 solid 1px;
padding: 1em;
background-color: #ffffd8;
}
.forumpost .side {
background: #FFF url(pix/speech_side.gif) no-repeat scroll 100% 100%;
}
.forumpost .picture {
background: #FFF url(pix/speech_top.gif) no-repeat scroll 100% 0;
}
.headermenu {
float:right;
text-align:right;
}
.header-profilepic {
text-align:right;
margin: 5px;
width: 50px;
height: 50px;
border: 1px solid #999999;
}
.header-profileblock {
float:left;
text-align:left;
}
.header-profilename {
text-align:right;
margin-right: 5px;
color:#FF9900;
}
.header-profilename A {
COLOR: #FF9900; TEXT-DECORATION: none
}
.header-profilename A:link {
COLOR: #FF9900; TEXT-DECORATION: none
}
.header-profilename A:visited {
COLOR: #FF9900;
}
.header-profilename A:hover {
TEXT-DECORATION: underline
}
.header-profilename A:active {
TEXT-DECORATION: underline
}
.header-profileoptions {
text-align:right;
margin-right: 5px;
}
.header-profileoptions A {
COLOR: #FF9900; TEXT-DECORATION: none
}
.header-profileoptions A:link {
COLOR: #FF9900; TEXT-DECORATION: none
}
.header-profileoptions A:visited {
COLOR: #FF9900
}
.header-profileoptions A:hover {
TEXT-DECORATION: underline
}
.header-profileoptions A:active {
TEXT-DECORATION: underline
}
.header-profileoptions ul li {
padding-left: 10px;
display: inline;
}
.header-profileoptions .loginform {
width: 5em;
margin-left:4px;
display: inline;
}
/* header-profilename 这是定义右边小菜单的 您以什么登录的字体*/
/* header-profileoptions 这是定义右边小菜单的更改个人资料、退出等的*/
/* header-profileoptions .loginform是定义顶上的登录窗口的*/,