Modify styles with CSS
From ClarolineDoc
| Table of contents |
|
1 With Claroline 1.5 |
With Claroline 1.4.2
The style sheet is css/default.css, but a lot of hardcoded html 'colors' and 'font' are present in the scripts.
With Claroline 1.5
There is a CSS file already used in Claroline 1.5.0
/claroline/css/default.css
However, to insure a nice layout also with old browsers like Netscape 4.0. There are still some HTML hardcoded font color and background color for the top banner and the right menu for example. More improvement of the user of CSS will be done in further versions of Claroline.
Since Claroline 1.6
Lot of changes have been made in Claroline 1.6 to allow a better use of the CSS. Globaly, all the existing scripts have been changed to output a better html code to use the new version of the default.css stylesheet.
New style classes have been defined in the css, we will explain here how to use them to customize font, banner and background color of Claroline. All you will have to do is to modify this /css/default.css file. We recommand you to copy it with another name (and save it next to the default one) and to use the Claroline configuration page (in the administration tool) to change the css used to the one you will modify. We invite you to test the alternative CSS stylesheet (like the one called orangejuice.css for example) in Claroline 1.6 to to have an example of what is possible by only modifying the default style sheet. The stylesheets named print.css and compatible.css are not aimed to be used as complete styles, the first is used only for printing, the second is used to get a minimal display using old browsers like netscape 4.
If you are not familiar with the CSS code, visit first this nice tutorial : http://www.w3schools.com/css/default.asp ( from http://www.w3schools.com ) which is a very good introduction.
If you made nice style sheet for your campus and want to share it with the rest of the Claroline community, feel free to send it to info@claroline.net, we might put it on the website or in a further release. If you do so, check that the content (images, ...) you provide is not protected or copyrighted.
Important note : line numbers given in this article are based on the default.css file as it was in Claroline 1.6 Beta, they might be not correct with the stable version and are given just to give an approximative reference.
Modify main Claroline content's layout
/******************************************************************************
MAIN HTML TAGS STYLE
******************************************************************************/
body {
font-family: arial, helvetica, sans-serif;
background-color: #ffa;
}
a:link, a:active, a:visited {
color: #006;
}
a img {
border:none;
text-decoration: none;
}
.spacer
{
clear: both;
}
h3{ font-size: 110%; }
Those tags specify the default aspect of the text (in "body") and the links (in "a") in Claroline. It is also in the "body" tag that you must specify the background color if you want to change it. Image decoration or border can be added in the img tag.
Note that if you redefine the style of body tag, this will take effect on the whole page. If you want only to affect the layout between the top banner and the footer of Claroline, you can restyle #claroBody. This is a container that include everything that is between the banner and the footer.
/******************************************************************************
CLAROLINE BODY
******************************************************************************/
#claroBody {}
HTML tables in Claroline ar used in the code to display users lists, assignments lists,... Their aspect can not be set just by using the "table" element in the CSS.
/******************************************************************************
CLAROLINE TABLE
******************************************************************************/
/* a full example can be found here in default.css */
.claroTable td, th {
margin: 1px;
padding: 4px;
border: none;
}
.claroTable .superHeader th, .claroTable th.superHeader {
color: white;
background-color: #666666;
font-weight: bold;
text-align: left;
}
.claroTable .superHeader a {
color: white;
}
.claroTable th.headerY, .claroTable .headerY th,
.claroTable th.headerX, .claroTable .headerX th {
font-weight: normal;
text-align: left;
}
.claroTable .headerX th, .claroTable th.headerX {
background-color: #DDDEBC;
}
.claroTable tbody tr:hover {
background-color: #E3E3E3;
}
.noHover {
background-color: white;
}
This CSS code define the layout of any list in any existing tool of Claroline 1.6. you can change easily the color, size, font, background color,... used in the title of the columns (for exemple) by changing the style definition of .claroTable .headerX th, .claroTable th.headerX. See the complete example that can be found in the css file.
Modify Claroline special messages' layout
Bred crump layout
You can modify the layout of the links displayed just under the top banner of your Claroline campus (links to homepage > cours > tool). for this, you must modify the following CSS class at line 201 to 248 (in the css/default.css):
/*----------------------------------------------------------------------------
BREAD CRUMB TRAIL
----------------------------------------------------------------------------*/
#breadCrumbLine
{
border: none;
font-size: 80%;
padding-bottom: 5px;
}
#breadCrumbLine ul
{
float: left;
margin: 0;
padding: 0;
}
#breadCrumbLine ul li
{
display: inline;
margin: 0;
padding-left: 10px;
background-image: url(corporate/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
#breadCrumbLine #home
{
margin: 0;
border: none;
list-style-type: none;
padding-left: 0;
background: none;
}
#breadCrumbLine hr
{
display: none;
}
#toolViewOption
{
float: right;
text-align: right;
}
This menu is build using a list to allow better display when css are inactive, and easiest customisation. See http://css.maxdesign.com.au/listamatic/index.htm for list styling examples.
Warning messages layout
You can also modify the layout used for specific specific warning messages of Claroline (they are display in orange in the default CSS) by changing the CSS code in the .claroMessageBox class :
/******************************************************************************
VARIOUS CLAROLINE CSS CLASS
******************************************************************************/
/*
* 'claroMessageBox' is used to display all messages from the platform like
* action confirmation, parameter request, warning message...
* Things that are usually displayed in a dialog box into offline applications
*/
.claroMessageBox {
background-color: #FFCC33;
}
.claroIntroSection {
background-color: #F5F5F5;
}
The invisible CSS class concerns the layout for links Invisible to student.
For exemple : desactivated tools in course home page, invisible documents in the document
tool, etc.
/*
* invisible is generally attached to element that shouldn't be visible into
* common user interface but which are visible in course manager or platform
* administrator screen, showing that the element is deactivated or isn't
* visible fo the other users
*/
.invisible {
color: #999999;
}
.invisible a,
.invisible a:link,
.invisible a:visited,
a.invisible,
a:link.invisible,
a:visited.invisible{
color: #999999;
}
/* 'correct' is attached to element that must be highlighted as correct
example : a good score in exercices
*/
.correct {
color: #009900;
}
/* 'error' is attached to element that must be highlighted as correct
example : a wrong score in exercices
example : an error message
*/
.error {
color: #990000;
}
/* 'highlight' is used when something needs to be especially shown to the user
example : 'today' in the agenda
*/
.highlight {
color: #000066;
font-weight: bold;
}
Modify the homepage right menu ( contains login form and various links ) :
/*
* 'rightMenu' is mainly use in the platform home page
*/
.claroRightMenu {
background-color: #DDDEBC;
}
Modify the homepage right menu links layout :
.claroRightMenu a,
.claroRightMenu a:visited,
.claroRightMenu a:active {
}
Modify the homepage right menu links layout when the mouse is over :
claroRightMenu a:hover {
}
Claroline Help message layout
.HelpText {
color:gray
}
.HelpText is the CSS class used for the help messages in the pop-up :
Modify Claroline top banner 's layout
The Claroline top banner is seperated in 3 parts :
- The campus banner
- The user banner
- The course banner
Those banners are displayed when it makes sense to show them. For example the user banner is shown only when the user is loggued into Claroline. There one class defined in the css to change their look for each banner and also a global CSS class used for the complete top banner :
/*----------------------------------------------------------------------------
MAIN BANNER SETTINGS
----------------------------------------------------------------------------*/
#topBanner{}
#topBanner hr
{
display: none;
}
The .topBanner CSS Id is a container that regroups platformBanner, userBanner and courseBanner containers.
The campus banner layout
The campus banner can be modified with #platformBanner. It shows the campus name and the institution name.
/*----------------------------------------------------------------------------
CAMPUS LINE
----------------------------------------------------------------------------*/
#platformBanner
{
font-size: 120%;
font-weight: bold;
color: #FFF;
background-color:#000066;
padding: 4px;
}
#platformBanner a,
#platformBanner a:active,
#platformBanner a:link,
#platformBanner a:visited
{
text-decoration: none;
color: #FFF;
}
#platformBanner a:hover
{
color: #FFF;
text-decoration: underline;
}
#siteName
{
float: left;
text-align: left;
}
#institution
{
text-align: right;
}
The user banner layout
The user banner can be modified using .userBanner. The user banner is the banner part that displays the last and first name of the use and some personnal links (Course list, Profile,...)
/*----------------------------------------------------------------------------
USER LINE
----------------------------------------------------------------------------*/
#userBanner
{
background-color: #666;
color:white;
font-size: 80%;
font-weight:bold;
border-top: 1px #FFF solid;
padding: 4px;
}
#userBanner a,
#userBanner a:active,
#userBanner a:link,
#userBanner a:visited
{
text-decoration: none;
color: #FFF;
}
#userBanner a:hover
{
color: #FFF;
text-decoration: underline;
}
#userLinks
{
text-align: left;
}
The course banner layout
The course banner can be modified with the #courseBanner CSS Id. This container regroup the course name, the course code and the teacher name, and a menu allowing direct access to tools of the course.
/*----------------------------------------------------------------------------
COURSE LINE
----------------------------------------------------------------------------*/
#courseBanner
{
padding: 4px;
background-color: #DDDEBC;
color: #036;
font-weight: bold;
border-top: 1px #FFF solid;
}
The course banner displayed
#course
{
text-align: left;
}
#course span
{
display: block;
}
The menu to access quickly to a specific tool in the current course :
#courseToolList
{
float: right;
text-align: right;
}
How the course name is displayed in the course banner :
#courseBanner .courseName {
font-size: 120%;
}
#courseBanner .courseName a,
#courseBanner .courseName a:active,
#courseBanner .courseName a:link,
#courseBanner .courseName a:visited
{
color: #036;
text-decoration: none;
}
#courseBanner .courseName a:hover
{
text-decoration: underline;
}
How the course code is displayed in the course banner :
#courseBanner .courseCode {
font-size: 80%;
}
#courseBanner form
{
padding: 5px;
margin: 0;
}
Modify Claroline footer 's layout
- footer defines a container that take in platformManager, courseManager and poweredBy.
/******************************************************************************
CLAROLINE FOOTER
******************************************************************************/
Footer layout :
#footer
{
font-size: 80%;
}
#footer hr
{
border: 0;
height: 1px;
background-color: gray;
}
Platform manager 's name layout :
#platformManager
{
float: left;
}
#poweredBy
{
float: right;
text-align: right;
}
Course manager name's layout :
#courseManager
{
margin: auto;
text-align: center;
}
Modify the Claroline Homepage's right menu layout
/*
* 'rightMenu' is mainly use in the platform home page
*/
.claroRightMenu {
background-color: #DDDEBC;
}
.claroRightMenu a,
.claroRightMenu a:visited,
.claroRightMenu a:active {
}
claroRightMenu a:hover {
}
With Claroline 1.8
The system has not changed a lot since previous version but the dock system introduces new positioning element that have to be positionned using CSS to avoid a broken display.
If you install a Claroline 1.8 you should not have problem with that as the default CSS files are up to date. If you are upgrading from a previous version your personnalized CSS should require some tuning.
Main changes take place in the banner and in the footer.
Top Banner
Platform Banner
Positionning is done through div withs ids #campusBannerRight and #campusBannerLeft. Ids #siteName and #institution do not take care of positionning anymore so any previous float or position property should be removed from there.
Default definition of style used for new ids is the following
#campusBannerRight
{
position: relative;
float: right;
text-align: right;
margin: 0;
}
#campusBannerLeft
{
position: relative;
float: left;
text-align: left;
margin: 0;
}
User Banner
Positionning is done through div withs ids #userBannerRight and #userBannerLeft
Default definition of style used for new ids is the following
#userBannerRight
{
position: relative;
float: right;
text-align: right;
margin: 0;
}
#userBannerLeft
{
position: relative;
float: left;
text-align: left;
margin: 0;
}
Course Banner
Positionning is done through div withs ids #courseBannerRight and #courseBannerLeft. Float properties for #course and #courseToolList are no more required.
Default definition of style used for new ids is the following
#courseBannerRight
{
position: relative;
float: right;
text-align: right;
margin: 0;
}
#courseBannerLeft
{
position: relative;
float: left;
text-align: left;
margin: 0;
}
Footer
Div #footer has been renamed to #campusFooter, so to start this part of the conversion you can rename all occurrences of #footer to #campusFooter in your css.
3 news div container have been added #campusFooterRight, #campusFooterLeft and #campusFooterCenter
#campusFooterRight
{
float: right;
text-align: right;
}
#campusFooterLeft
{
float: left;
}
#campusFooterCenter
{
clear: both;
text-align: center;
}
