CSS styles color.css

Jump to: navigation, search

Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: CSS styles color.css.

The CSS styles_color.css file contains all color definitions like background-color, font-color, border-color etc. Styles are organised into the following sections: core, header, footer, admin, blocks, calendar, course, doc, login, message, question, tabs, user, various modules.

Core

a:link,
 a:visited {
<nowiki>  color:#0000FF;
 }

 a.dimmed:link,
 a.dimmed:visited {
  color:#AAAAAA;
 }

a:hover {
 color:#FF0000;
}
a.autolink:link,
a.autolink:visited {
 color:#000000;
 background: #DDDDDD;
}
a.autolink.glossary:hover {
 cursor: help;
}
img.userpicture,
 img.grouppicture {
  border-color:#000
 }

 .block_online_users .listentry img {
  border:#888
 }

body {
  background-color:#FAFAFA;
 }

 th.header,
 td.header,
 div.header {
  border-color:#DDDDDD;
 }

 .navbar {
  border-color:#DDDDDD;
 }

table.formtable tbody th {
  background: none;
 }

 .highlight {
  background-color:#AAFFAA;
 }

 .highlight2 {
  color:#AA0000; /* highlight missing terms in forum search */
 }

/* Alternate rows even */
 .r0 {  
 }

/* Alternate rows odd */
 .r1 {  
 }


/* notification messages (can be good or bad) */
.notifyproblem {
 color:#660000;
}
.notifysuccess {
 color:#006600;
}
.notifytiny {
 color:#000044;
}
.required {
 background-color:#DDDDDD;
}
.generalbox {
 border-color:#DDDDDD; 
}
.informationbox {
 border-color:#DDDDDD; 
}
.feedbackbox {
 border-color: #888888; 
}
.feedbackby {
 background-color:#BBBBBB;
}
.noticebox {
 border-color:#DDDDDD; 
}
.errorbox {
 color:#ffffff;
 border-color:#660000;
 background-color:#990000;
}
.errorboxcontent {
 background-color:#FFBBBB;
}
.tabledivider {
 border-color:#DDDDDD;
}
.sitetopic {
}
.sitetopiccontent {
 border-color:#DDDDDD;
 background-color:#FFFFFF;
}
.dimmed_text {
 color:#AAAAAA;
}
.teacheronly {
 color:#990000;
}
.unread {
 background: #FFD991;
} 
.censoredtext {
 color:#000000;
 background:#000000;
}


/* kept for backward compatibility with some non-standard modules
  which use these classes for various things */
.generaltab, .generaltabinactive {
 background-color:#BBBBBB;
}
.generaltabselected {
 background-color:#DDDDDD;
}
.generaltabinactive {
 color:#CCCCCC;
}
.generaltable .cell {
 background-color:#FFFFFF;
 border-color:#EEEEEE; 
}
.generaltable {
 border-color:#EEEEEE; 
}

Header

.breadcrumb .sep {
 color:#aaa;
}
.headerskip a:link,
.headerskip a:visited,
.headerskip a:hover {
 color: #FFF;
}

Footer

/*Accessibility: .debugwarn */

.debugwarn {
 text-align: center;
 background: #FDD;
}
.homelink a:link,
.homelink a:visited,
.homelink a:hover {
 color: #000;
 text-decoration: none;
}
.homelink a:link,
.homelink a:visited {
 border-top: 1px solid #cecece;
 border-bottom: 2px solid #4a4a4a;
 border-left: 1px solid #cecece;
 border-right: 2px solid #4a4a4a;
}
.homelink a:hover {
 border-bottom: 1px solid #cecece;
 border-top: 2px solid #4a4a4a;
 border-right: 1px solid #cecece;
 border-left: 2px solid #4a4a4a;
}


Admin

.admin .generalboxcontent {
 background-color:#EEEEEE; 
}
.admin .generalbox {
 border-color:#BBBBBB; 
}
.admin .informationbox {
 border-color:#BBBBBB; 
 background-color:#FFFFFF; 
}
body#admin-index .c0 {
 background-color: #FAFAFA;
}
body#admin-blocks table#blocks .r0,
body#admin-blocks table#incompatible .r0 {
 background-color: #f0f0f0;
}
body#admin-blocks table#blocks .r1,
body#admin-blocks table#incompatible .r1 {
 background-color: #fafafa;
}
body#admin-blocks table#incompatible td.c0 {
 color: #ff0000;
}
table.flexible  .r0 {
 background-color: #f0f0f0;
}
table.flexible .r1 {
 background-color: #fafafa;
}
#admin-report-simpletest-index span.notice {
 color: teal;
}
#admin-report-simpletest-index b.pass {
 color: green;
}
#admin-report-simpletest-index b.fail, b.exception {
 color: red;
}
#admin-report-simpletest-index .exception, .exception pre {
 background-color: #fdd;
}
#admin-report-simpletest-index .unittestsummary {
 color: white;
}
#admin-report-simpletest-index .unittestsummary.fail {
 background-color: red;
}
#admin-report-simpletest-index .unittestsummary.pass {
 background-color: green;
}
#adminsettings fieldset {
   background-color: #EEE;
   border-color: #BBB;
   color: #000;
}
#adminsettings .form-shortname {
   color: #888;
}
.block_admin_tree.sideblock .link.current {
 background-color:#EEEEEE;
}

Blocks

.sideblock .header {
 border-color: #dddddd;
}
.sideblock .content {
 border-color: #dddddd;
 background-color:#FCFCFC;
}
.sideblock .content hr {
 border-top-color:#999999;
}
#left-column .hidden .header,
#right-column .hidden .header

{

 border-bottom-color: #dddddd;
}
.sideblock .header .hide-show img.hide-show-image {
 background: url('../../pix/t/switch_minus.gif') no-repeat bottom;
}
.sideblock.hidden .header .hide-show img.hide-show-image {
 background: url('../../pix/t/switch_plus.gif') no-repeat bottom;
}
.blockconfigtable {
 background-color:#FFFFFF;
 border-left:1px solid;
 border-right:1px solid;
 border-bottom:1px solid;
 border-color:#AAAAAA;
}


Blogs

.blogpost.blogdraft .content {
 background-color:#EEEEEE;
}
.block_blog_tags .official {
 color: #0000cc;
}
.block_blog_tags .personal {
 color: #666699;
}


Calendar

#calendar .maincalendar,
#calendar .sidecalendar {
 border-color: #DDDDDD;
}
#calendar .maincalendar table.calendarmonth th {
 border-color: #000000;
}
table.minicalendar {
 border-color: #DDDDDD;
}
#calendar .maincalendar .eventlist .event {
 border-color:#DDDDDD;
}
#calendar .maincalendar .eventlist .event .topic,
#calendar .maincalendar .eventlist .event .picture,
#calendar .maincalendar .eventlist .event .side {
 background-color:#EEEEEE;
}
#calendar .maincalendar table.calendarmonth ul.events-underway {
 color:#999999;
}

/*Accessibility: increase contrast, darker link/weekend colors, lighter event backgrounds. */

.minicalendar a,
.calendarmonth a {
 color:#000077;
}
#calendar .event_global,
.minicalendar .event_global,
.block_calendar_month .event_global {
 border-color:#D6F8CD !important; /* #C5E7BC */
 background-color:#D6F8CD;
}
#calendar .event_course,
.minicalendar .event_course,
.block_calendar_month .event_course {
 border-color:#FFD3BD !important; /* #EEC2AC */
 background-color:#FFD3BD;
}
#calendar .event_group,
.minicalendar .event_group,
.block_calendar_month .event_group {
 border-color:#FEE7AE !important; /* #EDD69D */
 background-color:#FEE7AE;
}
#calendar .event_user,
.minicalendar .event_user,
.block_calendar_month .event_user {
 border-color:#DCE7EC !important; /* #CBD6DB */
 background-color:#DCE7EC;
}
#calendar .duration_global,
.minicalendar .duration_global {
 border-top-color:#66D14D !important;
 border-bottom-color:#66D14D !important;
}
#calendar .duration_course,
.minicalendar .duration_course {
 border-top-color:#FF9966 !important;
 border-bottom-color:#FF9966 !important;
}
#calendar .duration_group,
.minicalendar .duration_group {
 border-top-color:#FBBB23 !important;
 border-bottom-color:#FBBB23 !important;
}
#calendar .duration_user,
.minicalendar .duration_user {
 border-top-color:#A1BECB !important;
 border-bottom-color:#A1BECB !important;
}
#calendar .weekend,
.minicalendar .weekend {
 color:#990000;
}
#calendar .today,
.minicalendar .today {
 border-color:#444444;
}
.cal_popup_fg {
 background-color:#FFFFFF;
}
.cal_popup_bg {
 border-color:#000000;
 background-color:#FFFFFF;
}
#calendar .maincalendar .filters table,
#calendar .sidecalendar .filters table,
.block_calendar_month .filters table {
 background-color: #EEEEEE;
}


Course

/* course, entry-page, login */

.headingblock {
 border-color:#DDDDDD;
}

/* course */

.headingblock .outline {
 border-color:#DDDDDD;
}
#course-view .weekscss .section,
#course-view .section td {
 border-color:#DDDDDD;
}

/* .content should match the body background, sides are white. */

#course-view .weekscss .content {
 background: #FAFAFA;
}
#course-view .weekscss .section,
#course-view .section td.side {
 background: #FFFFFF;
}
#course-view .section .side {
}
#course-view .section .left {
}
#course-view .section .right {
}
#course-view .weekscss .current,
#course-view .current td.side {
 background: #FFD991;
}
#course-view .weekscss .hidden,
#course-view .hidden td.side {
 background: #DDDDDD;
}


#course-view .topics {
}
#course-view .weeks {
}
#course-view .section .spacer {
}
#course-view .section .weekdates {
 color: #777777;
}
#course-view .weekscss .weekdates {
 color: #333333;
}
.categoryboxcontent,
.courseboxcontent {
 border-color:#DDDDDD;
}
body#course-user .section {
 border-color:#AAAAAA;
}
#admin-report .plugin,
#course-report .plugin,
#course-import .plugin {
 margin-bottom: 20px;
 margin-left:10%;
 margin-right:10%;
 border-bottom: 1px solid #cecece;
 border-top: 1px solid #cecece;
 border-right: 1px solid #cecece;
 border-left: 1px solid #cecece;
 background-color: #fdfdfd;
}

Grades

body#grade-index .grades {
 border-color:black;
}
body#grade-index .grades td {
 border-color:#e0e0e0;
}
body#grade-index .grades .r0 {
 background-color: #ffffff;
}
body#grade-index .grades .r1 {
 background-color: #f0f0f0;
}


Login

.loginbox .content {
 border-color:#DDDDDD;
}


Message

table.message_search_results td {
 border-color:#DDDDDD;
}
.message.other .author {
 color: #8888CC;
}
.message.me .author {
 color: #999999;
}
.message .time {
 color: #999999;
}
.message .content {
}

Question

.que {
   border-color: #DDD;
}
.que .r0 {
   background-color: #F5F5F5;
}
.que .r1 {
   background-color: #EEE;
}
.calculated .answer,
.numerical .answer,
.shortanswer .answer,
.truefalse .answer {
   background-color: #EEE;
}
.que .feedback {
 border-color: #DDD;
}    
.que.multianswer .incorrect {
   background-color: #faa;
}
.que.multianswer .partiallycorrect {
   background-color: #ff9;
}
.que.multianswer .correct {
   background-color: #afa;
}

Logs

.logtable .r1 {
 background-color:#EEEEEE;
}


Tabs

.tablink a:link,
.tablink a:visited {
 color:#000066;
}
.selected .tablink a:link,
.selected .tablink a:visited {
 color:#000000;
}
.tabs .side,
.tabrow td {
 border-color: #AAAAAA;
}
.tabrow td {
 background:url(pix/tab/left.gif) top left no-repeat;
}
.tabrow td .tablink {
 background:url(pix/tab/right.gif) top right no-repeat;
}
.tabrow td:hover {
 background-image:url(pix/tab/left_hover.gif);
}
.tabrow td:hover .tablink {
 background-image:url(pix/tab/right_hover.gif);
}
.tabrow .last {
 background: transparent url(pix/tab/right_end.gif) top right no-repeat;
}
.tabrow .selected {
 background:url(pix/tab/left_active.gif) top left no-repeat;
}
.tabrow .selected .tablink {
 background:url(pix/tab/right_active.gif) top right no-repeat;
}
.tabrow td.selected:hover {
 background-image:url(pix/tab/left_active_hover.gif);
}
.tabrow td.selected:hover .tablink {
 background-image:url(pix/tab/right_active_hover.gif);
}

User

.userpicture {
}
.userinfobox {
 border-color: #DDDDDD;
}
.groupinfobox {
 border-color: #DDDDDD;
}

Modules:

Chat

#mod-chat-gui_header_js-jsupdate .text {
 color:#000
}
#mod-chat-gui_header_js-jsupdate .event,
#mod-chat-gui_header_js-jsupdate .title {
 color:#888
}
#mod-chat-gui_header_js-chatinput .wait {
   background: #dddddd;
}

Forum

.forumheaderlist,
.forumpost {
 border-color:#DDDDDD;
}
.forumpost .content {
 background: #FFFFFF;
}
.forumpost .left {
 background:#EEEEEE; 
}
.forumpost .topic {
 border-bottom-color: #EEEEEE;
}
.forumpost .starter {
 background:#DDDDDD; 
}
.forumheaderlist .discussion .starter {
 background:#DDDDDD; 
}
.forumheaderlist td {
 border-color: #FFFFFF;
}
.sideblock .post .head {
 color:#555555;
}
.forumthread .unread {
 background: #FFD991;
}
#mod-forum-discuss .forumpost {
 background: none;
}
#mod-forum-discuss .forumpost.unread .content {
 border-color: #FFD991; 
} 
#mod-forum-discuss .forumthread .unread {
} 
#mod-forum-index .unread {
}


Glossary

.entryboxheader {
 border-color: #BBBBBB;
}
.entrybox {
 border-color: #BBBBBB;
}
.entry {
}
.glossarypost {
 border-color: #DDDDDD;
}
.glossarypost .entryheader,
.glossarypost .entryapproval,
.glossarypost .picture,
.glossarypost .entryattachment,
.glossarypost .left {
 background-color: #F0F0F0;
}
.glossarycomment {
 border-color: #DDDDDD;
}
.glossarycomment .entryheader,
.glossarycomment .picture,
.glossarycomment .left {
 background-color: #F0F0F0;
}
#mod-glossary-report .generalbox .teacher {
 background: #F0F0F0;
}
.categoryheader {
 background-color: #dddddd;
}
.glossaryformatheader {
 background-color: #dddddd;
}


Journal

#mod-journal-view .feedbackbox .left,
#mod-journal-view .feedbackbox .entryheader {
 background-color: #dddddd;
}

Quiz

/* body#mod-quiz-report table#attempts td {

 border-color: #dddddd;
}
body#mod-quiz-report table#attempts .r1 {
 background-color: #eeeeee;
}
*/

Resource

.ims-nav-dimmed {
 color: #AAAAAA;
 text-decoration: none;
}
.ims-nav-button a:link,
.ims-nav-button a:visited,
.ims-nav-button a:hover {
 color: #000;
 text-decoration: none;
}
.ims-nav-dimmed,
.ims-nav-button a:link,
.ims-nav-button a:visited {
 border-top: 1px solid #cecece;
 border-bottom: 2px solid #4a4a4a;
 border-left: 1px solid #cecece;
 border-right: 2px solid #4a4a4a;
}
.ims-nav-button a:hover {
 border-bottom: 1px solid #cecece;
 border-top: 2px solid #4a4a4a;
 border-right: 1px solid #cecece;
 border-left: 2px solid #4a4a4a;
}
#ims-contentframe,
#ims-contentframe-no-nav {
 border-color: #cecece;
}

Survey

#mod-survey-view .r0 {
 background-color: #EEEEEE;
}
#mod-survey-view .r1 {
 background-color: #DDDDDD;
}

Workshop

.workshoppostpicture {
 background-color:#FEE6B9;
}
.workshopassessmentheading {
 background-color:#DDDDDD;
}
.error {
 color:#ff0000;
}
#admin-roles-override .capcurrent {
 background-color:#FFFFFF;
 border: 1px solid #cecece;
}
#admin-roles-manage .rolecap,
#admin-roles-override .rolecap {
 border:none;
 border-bottom:1px solid;
 border-bottom-color: #cecece;
}
#admin-roles-manage .rolecap .cap-desc .cap-name,
#admin-roles-override .rolecap .cap-desc .cap-name {
 color: #888;
}

See Also