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

CSS styles fonts.css: Difference between revisions

From MoodleDocs
(Start to breakout CSS page into color, fonts, layout pages)
 
(Moved intro, used == not <h3>)
Line 1: Line 1:
== styles_fonts.css ==
The styles_fonts.css file contains all font definitions like family, size, weight, text-align, letter-spacing etc. Styles are organised into the following sections: core, header, footer, admin, blocks, calendar, course, doc, grades, login, message, mymoodle, question, tabs, user, various modules
This CSS file contains all font definitions like family, size, weight, text-align, letter-spacing etc. Styles are organised into the following sections: core, header, footer, admin, blocks, calendar, course, doc, grades, login, message, mymoodle, question, tabs, user, various modules


<h3>Core</h3>
==Core==


  .clearer {
  .clearer {
Line 128: Line 127:
  }
  }


<h3>Header</h3>
==Header==


  .headermain {
  .headermain {
Line 158: Line 157:
  }
  }


<h3>Footer</h3>
==Footer==


  .homelink {
  .homelink {
Line 168: Line 167:




<h3>Admin</h3>
==Admin==


  table.formtable tbody th {
  table.formtable tbody th {
Line 208: Line 207:




<h3>Blocks</h3>
==Blocks==


  a.skip-block {
  a.skip-block {
Line 274: Line 273:
  }
  }


<h3>Blogs</h3>
==Blogs==


  .blogpost .audience {
  .blogpost .audience {
Line 285: Line 284:




<h3>Calendar</h3>
==Calendar==


  #calendar .sidecalendar abbr,
  #calendar .sidecalendar abbr,
Line 355: Line 354:




<h3>Course</h3>
==Course==


  #course-view .section {
  #course-view .section {
Line 406: Line 405:




<h3>Doc</h3>
==Doc==


  body#doc-contents h1 {
  body#doc-contents h1 {
Line 416: Line 415:




<h3>Grades</h3>
==Grades==


  body#grade-index .grades .header {
  body#grade-index .grades .header {
Line 424: Line 423:




<h3>Login</h3>
==Login==


  #login-index .content {
  #login-index .content {
Line 431: Line 430:




<h3>Logs</h3>
==Logs==


  .logtable td {
  .logtable td {
Line 440: Line 439:
  }
  }


<h3>Message</h3>
==Message==


  .message .link {
  .message .link {
Line 490: Line 489:
  }
  }


<h3>MyMoodle</h3>
==MyMoodle==


  .my .courseboxcontent .overview .info {
  .my .courseboxcontent .overview .info {
Line 496: Line 495:
  }
  }


<h3>Question</h3>
==Question==


  .que .no {
  .que .no {
Line 509: Line 508:
  }
  }


<h3>Tabs</h3>
==Tabs==


  .tablink {
  .tablink {
Line 520: Line 519:




<h3>User</h3>
==User==


  .userinfobox .username {
  .userinfobox .username {
Line 535: Line 534:




<h3>Modules: Assignment</h3>
<h3>Modules: Assignment==


  #mod-assignment-index .cell {
  #mod-assignment-index .cell {
Line 541: Line 540:
  }
  }


<h3>Modules: Chat</h3>
<h3>Modules: Chat==


  #mod-chat-index .cell {
  #mod-chat-index .cell {
Line 547: Line 546:
  }
  }


<h3>Modules: Choice</h3>
<h3>Modules: Choice==


  #mod-choice-index .cell {
  #mod-choice-index .cell {
Line 553: Line 552:
  }
  }
    
    
<h3>Modules: Forum</h3>
<h3>Modules: Forum==


  .forumnodiscuss{
  .forumnodiscuss{
Line 584: Line 583:




<h3>Modules: Glossary</h3>
<h3>Modules: Glossary==


  .glossarypost .commands {
  .glossarypost .commands {
Line 614: Line 613:




<h3>Modules: Journal</h3>
<h3>Modules: Journal==


  #mod-journal-view .lastedit,
  #mod-journal-view .lastedit,
Line 637: Line 636:
  }
  }


<h3>Modules: Lesson</h3>
<h3>Modules: Lesson==


  #mod-lesson-index .cell {
  #mod-lesson-index .cell {
Line 643: Line 642:
  }
  }


<h3>Modules: Quiz</h3>
<h3>Modules: Quiz==


/* .editorhelptext {
/* .editorhelptext {
Line 654: Line 653:
  */
  */


<h3>Modules: Resource</h3>
<h3>Modules: Resource==


  #mod-resource-index .cell {
  #mod-resource-index .cell {
Line 673: Line 672:
  }
  }


<h3>Modules: Scorm</h3>
<h3>Modules: Scorm==


  #mod-scorm-index .cell {
  #mod-scorm-index .cell {
Line 679: Line 678:
  }
  }


<h3>Modules: Survey</h3>
<h3>Modules: Survey==


  #mod-survey-index .cell {
  #mod-survey-index .cell {
Line 685: Line 684:
  }
  }


<h3>Modules: Wiki</h3>
<h3>Modules: Wiki==


  #mod-wiki-index .cell {
  #mod-wiki-index .cell {
Line 691: Line 690:
  }
  }


<h3>Modules: Workshop</h3>
<h3>Modules: Workshop==


  #mod-workshop-index .cell {
  #mod-workshop-index .cell {
Line 698: Line 697:




<h3>Phpinfo display</h3>
<h3>Phpinfo display==


  .phpinfo table {
  .phpinfo table {
Line 724: Line 723:
   color: #000000;
   color: #000000;
  }
  }
.

Revision as of 18:12, 24 June 2008

The styles_fonts.css file contains all font definitions like family, size, weight, text-align, letter-spacing etc. Styles are organised into the following sections: core, header, footer, admin, blocks, calendar, course, doc, grades, login, message, mymoodle, question, tabs, user, various modules

Core

.clearer {
 font-size:1px;
}
body, table, td, th, li {
 font-family:Arial, Verdana, Helvetica, sans-serif;
 font-size:100%;
 letter-spacing:0.02em;
}
th {
 font-weight: bold;
}
a:link,
a:visited {
 text-decoration:none;
}
a:hover {
 text-decoration: underline;
}
h1.main,
h2.main,
h3.main,
h4.main,
h5.main,
h6.main {
 font-weight:bold;
}
h1 {
 font-size:1.7em;
}
h2 {
 font-size:1.4em;
}
h3 {
 font-size:1.1em;
}
h4 {
 font-size:1.0em;
}
.bold {
 font-weight:bold;
}
.warning {
 font-weight: bold;
 font-style: italic;
}
.errorbox .title {
 font-weight: bold;
 font-size: 1.2em;
 text-align: center;
}
.errorboxcontent {
 text-align: center;
}
.errorcode {
 font-size: 0.7em;
}
.notifytiny {
 font-size: 0.5em;
}
.pagingbar .title {
 font-weight: bold;
}
.pagingbar .thispage {
 font-weight: bold;
}
.categorybox .category {
 font-size:1.2em;
 font-weight:bold;
}
.helplink {
 font-size:0.8em;
}
.headingblock {
 font-weight: bold;
}
.headingblock .link {
 font-size: 0.9em;
}
.files .file {
 font-size: 0.9em;
}
.files .folder {
 font-size: 0.9em;
}
.files .folder .size {
 font-weight: bold;
}

/*Accessibility: resizable icons. */

img.resize {
 width: 1em;
 height: 1em;
}
acronym, abbr {
 cursor: help;
}
a.useredit, a:hover.useredit, .blink {
 color: black;
 text-decoration: blink;
 cursor: help;
}

Header

.headermain {
 font-weight:bold;
}
#header-home .headermain {
 font-size:1.5em;
}
#header .headermain {
 font-size:1.3em;
}
.breadcrumb {
 font-size:0.9em;
 font-weight:bold;
}
.logininfo,
#header-home .headermenu font {
 font-size:0.8em;
}

/* Accessibility: only certain fonts support Unicode chars like ► in IE6 */

.breadcrumb .sep, .headermenu button,
.calendar-controls .previous, .calendar-controls .next {
 font-family:Arial, Helvetica, Courier, sans-serif;
}

Footer

.homelink {
}
.performanceinfo {
 font-size: 0.6em;
}


Admin

table.formtable tbody th {
 font-weight: normal;
 text-align: right;
}
body#admin-blocks table#incompatible td.c0 {
 font-weight: bold;
}
body#admin-index .explanation {
 font-size: 0.7em;
 vertical-align: bottom;
}
body#admin-index .copyright {
 text-align: center;
 font-size: 0.8em;
}
.environmenttable {
 font-size: 0.8em;
}
#admin-roles-manage .rolecap .cap-desc .cap-name,
#admin-roles-override .rolecap .cap-desc .cap-name {
 font-size: 0.75em;
}
#adminsettings .form-shortname {
 font-size: 0.75em;
}
#admin-roles-override .cell.c1,
#admin-roles-assign .cell.c1 {
 font-size: 0.7em;
}


Blocks

a.skip-block {
 text-decoration:none;
}
.sideblock img.resize,
.breadcrumb img.resize {
 width: 0.8em;
 height: 0.9em;
}
.sideblock .searchform img.resize {
 width: 1em;
 height: 1.1em;
}
.sideblock .header, .sideblock h2 {
 font-size:0.9em;
 font-weight: bold;
}
.sideblock .content {
 font-size:0.9em;
 line-height:1.2em;
}
.sideblock a {
 line-height:1.2em
}
.sideblock .content h3,
.sideblock .content h2 {
 font-size:1.0em;
}
.sideblock .content .message {
 font-size:0.9em
}
.sideblock .header .commands {
 font-size:0.9em;
}
.sideblock .footer {
 font-size:0.9em;
}
.sideblock .head,
.sideblock .info,
.sideblock .event {
 font-size: 0.9em;
}
.sideblock .date {
 font-style: italic;
}
.block_site_main_menu .footer select {
 font-size: 0.8em;
}
.block_online_users .listentry {
 text-align:left;
 font-size:0.75em
}

Blogs

.blogpost .audience {
 font-size: 0.85em;
}
.blogpost .tags {
 font-size: 0.85em;
}


Calendar

#calendar .sidecalendar abbr,
.block_calendar_month abbr {
 border: none;
}
#calendar .eventnone a,
.block_calendar_month .eventnone a {
 text-decoration:none;
 color:black;
 cursor:text;
}
#calendar .maincalendar .eventlist .event .referer {
 font-weight:bold;
}
#calendar .maincalendar .eventlist .event .course {
 font-size:0.8em;
}
#calendar .maincalendar .eventlist .event .description .commands {
 text-align: right;
}
#calendar .maincalendar table.calendarmonth td {
 font-size:0.8em;
}
#calendar div.header

{

 font-weight:bold;
}
#calendar .sidecalendar .filters {
 font-size:0.8em;
}
.sideblock .filters td {
 font-size:1.1em;
}
#calendar .maincalendar .controls {
 font-size:1.2em;
}
#calendar .maincalendar .day {
 font-weight: bold;
}
table.minicalendar {
 font-size:0.85em;
}
.cal_popup_caption {
 font-family:sans-serif;
 font-size:0.8em;
 font-weight:bold;
}
.cal_popup_close {
 font-family:sans-serif;
 font-size:0.8em;
 font-weight:bold;
}
#calendar .maincalendar .calendar-controls .current {
 font-weight: bold;
}


Course

#course-view .section {
 font-size:0.95em;
 line-height:1.2em;
}
#course-view .section .activity {
 padding:0.2em 0;
}
#course-view .section .activity a {
 line-height:1em;
}
#course-view .section .left {
 font-weight:bold;
}
.activitydate, .activityhead {
 font-size:0.9em;
}
.weeklydatetext {
 font-size:0.9em;
 font-weight:bold;
}
.coursebox .info {
 font-size:1em;
}
.coursebox .teachers,
.coursebox .cost {
 font-size:0.9em;
}
.coursebox .summary {
 font-size:0.9em;
}
#course-recent h2.main {
 font-size:1.1em;
}
h2.headingblock {
 font-size:1.1em;
}


Doc

body#doc-contents h1 {
 font-size: 0.9em;
}
body#doc-contents ul {
 font-size: 0.8em;
}


Grades

body#grade-index .grades .header {
 font-weight: bold;
 font-size: 0.7em;
}


Login

#login-index .content {
 font-size: 0.85em;
}


Logs

.logtable td {
 font-size: 0.8em;
}
.logtable th {
 font-size: 0.9em;
}

Message

.message .link {
 font-size:0.8em;
}
.message_form {
 font-size:0.8em;
}
.message .heading {
 font-size:1.0em;
 font-weight:bold;
}
.message .date,
.message .contact,
.message .summary {
 font-size:0.9em;
}
.message .note, 
.message .pix {
 font-size:0.8em;
}
.message .author {
 font-weight: bold;
 font-size:0.8em;
}
.message .time {
 font-style: italic;
 font-size:0.8em;
}
.message .content {
 font-size:0.8em;
}
#message-user .commands span {
 font-size:0.7em;
 white-space:nowrap;
}
#message-user .name {
 font-weight: bold;
 font-size:1.1em;
}

MyMoodle

.my .courseboxcontent .overview .info {
 font-size:0.7em;
}

Question

.que .no {
 font-size: 1.2em;
 font-weight: bold;
}
.que .grade {
 font-size: 0.8em;
}
.que .history {
 font-size:75%;
}

Tabs

.tablink {
 font-size:0.8em;
}
.tablink a:hover {
 text-decoration: none;
}


User

.userinfobox .username {
 font-weight: bold;
}
.userinfobox .links {
 font-size: 0.7em;
}
body#user-index #longtimenosee {
 font-size: 0.8em;
}


Modules: Assignment== #mod-assignment-index .cell { font-size:0.8em; }

Modules: Chat== #mod-chat-index .cell { font-size:0.8em; }

Modules: Choice== #mod-choice-index .cell { font-size:0.8em; }

Modules: Forum== .forumnodiscuss{ font-weight:bold; } .forumpost .topic .subject { font-weight: bold; } .forumpost .topic .author { font-size: 0.8em; } .forumpost .commands, .forumpost .link, .forumpost .footer { font-size: 0.9em; } .forumheaderlist .discussion .lastpost { font-size: 0.7em; } body#mod-forum-search .introcontent { font-weight:bold; } body#mod-forum-index .generalbox .cell { font-size: 0.80em; } .forumpost .edited { font-style: italic; }

Modules: Glossary== .glossarypost .commands { font-size: 0.8em; } .glossarypost .author { font-size: 0.8em; } .glossarypost .time { font-size: 0.8em; } .concept { font-weight: bold; } .glossarycomment .author { font-size: 0.8em; } .entrylowersection .aliases { font-size: 0.8em; } .entrylowersection .icons, .entrylowersection .ratings { font-size: 0.8em; } #mod-glossary-index .cell { font-size:0.8em; }

Modules: Journal== #mod-journal-view .lastedit, #mod-journal-view .editend { font-size: 0.7em; } #mod-journal-view .author { font-size: 1em; font-weight: bold; } #mod-journal-view .time { font-size: 0.7em; font-style: italic; } #mod-journal-view .grade { font-weight: bold; font-style: italic; } #mod-journal-index .cell { font-size:0.8em; }

Modules: Lesson== #mod-lesson-index .cell { font-size:0.8em; }

Modules: Quiz== /* .editorhelptext { font-size:0.7em; } #mod-quiz-index .cell { font-size:0.8em; } */

Modules: Resource== #mod-resource-index .cell { font-size:0.8em; } .ims-nav-dimmed, .ims-nav-button { font-size:0.8em; } #ims-toc-selected { font-weight: bold; } #ims-menudiv { font-size:0.8em; }

Modules: Scorm== #mod-scorm-index .cell { font-size:0.8em; }

Modules: Survey== #mod-survey-index .cell { font-size:0.8em; }

Modules: Wiki== #mod-wiki-index .cell { font-size:0.8em; }

Modules: Workshop== #mod-workshop-index .cell { font-size:0.8em; }

Phpinfo display== .phpinfo table { border-collapse: collapse; } .phpinfo .center { text-align: center; } .phpinfo .e, .v, .h { border: 1px solid #000000; font-size: 0.8em; vertical-align: baseline; } .phpinfo .e { background-color: #ccccff; font-weight: bold; color: #000000; } .phpinfo .h { background-color: #9999cc; font-weight: bold; color: #000000; } .phpinfo .v { background-color: #cccccc; color: #000000; } .