Moodle

patch any theme to have a personal visual style (CSS file) for each course

Details

  • Type: Improvement Improvement
  • Status: Open Open
  • Priority: Minor Minor
  • Resolution: Unresolved
  • Affects Version/s: 1.9.2
  • Fix Version/s: None
  • Component/s: Themes
  • Labels:
    None
  • Environment:
    apache 2 , php 5 , mysql 5 , linux os , moodle 1.9.2
  • Database:
    MySQL
  • Affected Branches:
    MOODLE_19_STABLE

Description

a simple patch to let each course set its own visual preferences using a personal CSS.

1. duplicate any theme you like and call it my-style (for example)
2. add these lines to header.html inside the <head> tag , just after line 7.
<?php $id = optional_param('id', 0, PARAM_INT); ?>
<link rel="stylesheet" type="text/css" href="<?php echo '/moodle/file.php/'.$id.'/my-style.css' ?>" />
3. create a new CSS file in you personal course and call it "my-style.css" (in the course's main folder)
4. navigate to "course settings" and choose the theme "my-style" (if that was the name you gave it in instruction 1)
5. that's it

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Itamar Tzadok added a comment -

An alternative may be to add an import command so that a standard theme could still be applied and my-style.css be used to merely override or add some style definitions.

Show
Itamar Tzadok added a comment - An alternative may be to add an import command so that a standard theme could still be applied and my-style.css be used to merely override or add some style definitions.
Hide
Permalink
Nadav Kavalerchik added a comment -

first, the standard theme initially applies its styles and only then the my-styles.css is read.
if you use !important directive in some style tags you can force a different
background or other styles on top of the exsiting theme.

this is how we personalize "a theme" to look different on different courses.

(or maybe, i did not understand what you meant ? )

Show
Nadav Kavalerchik added a comment - first, the standard theme initially applies its styles and only then the my-styles.css is read. if you use !important directive in some style tags you can force a different background or other styles on top of the exsiting theme. this is how we personalize "a theme" to look different on different courses. (or maybe, i did not understand what you meant ? )
Hide
Permalink
Nadav Kavalerchik added a comment -

header.html which includes an optional LOGO image and a custom CSS file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html<?php echo $direction ?>>
<head>
    <?php echo $meta ?>
    <meta name="keywords" content="moodle, <?php echo $title ?> " />
    <title><?php echo $title ?></title>
    <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
    <link rel=stylesheet href="<?php echo "$CFG->wwwroot/file.php/$COURSE->id/my-style.css"; ?>" type="text/css" media=screen>
    <?php include("$CFG->javascript"); ?>
</head>

<body<?php
    echo " $bodytags";
    if ($focus) {
        echo " onload=\"setfocus()\"";
    }
    ?>>

<div id="page">

<?php //Accessibility: 'headermain' is now H1, see theme/standard/styles_layout.css: .headermain
      if ($home) {  // This is what gets printed on the home page only
?>
    <?php print_container_start(true, '', 'header-home'); ?>
        <h1 class="headermain"><?php echo $heading ?></h1>
        <img src="<?php echo $CFG->wwwroot .'/file.php/'.$COURSE->id; ?>/my-logo.png" />
        <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>
<?php } else if ($heading) {  // This is what gets printed on any other page with a heading
?>
    <?php print_container_start(true, '', 'header'); ?>
        <h1 class="headermain"><?php echo $heading ?></h1>
        <img src="<?php echo $CFG->wwwroot .'/file.php/'.$COURSE->id; ?>/my-logo.png" />
        <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>
<?php } ?>
<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
      if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
    <div class="navbar clearfix">
        <div class="breadcrumb"><?php print_navigation($navigation); ?></div>
        <div class="navbutton"><?php echo $button; ?></div>
    </div>
<?php } else if ($heading) { // If no navigation, but a heading, then print a line
?>
        <hr />
<?php } ?>
    <!-- END OF HEADER -->
    <?php print_container_start(false, '', 'content'); ?>
Show
Nadav Kavalerchik added a comment - header.html which includes an optional LOGO image and a custom CSS file 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html<?php echo $direction ?>>
<head>
    <?php echo $meta ?>
    <meta name="keywords" content="moodle, <?php echo $title ?> " />
    <title><?php echo $title ?></title>
    <link rel="shortcut icon" href="<?php echo $CFG->themewww .'/'. current_theme() ?>/favicon.ico" />
    <link rel=stylesheet href="<?php echo "$CFG->wwwroot/file.php/$COURSE->id/my-style.css"; ?>" type="text/css" media=screen>
    <?php include("$CFG->javascript"); ?>
</head>

<body<?php
    echo " $bodytags";
    if ($focus) {
        echo " onload=\"setfocus()\"";
    }
    ?>>

<div id="page">

<?php //Accessibility: 'headermain' is now H1, see theme/standard/styles_layout.css: .headermain
      if ($home) {  // This is what gets printed on the home page only
?>
    <?php print_container_start(true, '', 'header-home'); ?>
        <h1 class="headermain"><?php echo $heading ?></h1>
        <img src="<?php echo $CFG->wwwroot .'/file.php/'.$COURSE->id; ?>/my-logo.png" />
        <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>
<?php } else if ($heading) {  // This is what gets printed on any other page with a heading
?>
    <?php print_container_start(true, '', 'header'); ?>
        <h1 class="headermain"><?php echo $heading ?></h1>
        <img src="<?php echo $CFG->wwwroot .'/file.php/'.$COURSE->id; ?>/my-logo.png" />
        <div class="headermenu"><?php echo $menu ?></div>
    <?php print_container_end(); ?>
<?php } ?>
<?php //Accessibility: breadcrumb trail/navbar now a DIV, not a table.
      if ($navigation) { // This is the navigation bar with breadcrumbs  ?>
    <div class="navbar clearfix">
        <div class="breadcrumb"><?php print_navigation($navigation); ?></div>
        <div class="navbutton"><?php echo $button; ?></div>
    </div>
<?php } else if ($heading) { // If no navigation, but a heading, then print a line
?>
        <hr />
<?php } ?>
    <!-- END OF HEADER -->
    <?php print_container_start(false, '', 'content'); ?>
Hide
Permalink
Nadav Kavalerchik added a comment -

I have looked into HTML @Import command
and i am not sure how helpful it can be in this case.
Please correct me if i am wrong

http://htmlhelp.com/reference/css/style-html.html#importing
Especially:
"...Any rules specified in the style sheet itself override conflicting rules in the imported style sheets..."

Means: theme's style sheets override custom style-sheets.
and i wished it was the other way around.

Show
Nadav Kavalerchik added a comment - I have looked into HTML @Import command and i am not sure how helpful it can be in this case. Please correct me if i am wrong http://htmlhelp.com/reference/css/style-html.html#importing Especially: "...Any rules specified in the style sheet itself override conflicting rules in the imported style sheets..." Means: theme's style sheets override custom style-sheets. and i wished it was the other way around.
Hide
Permalink
Nadav Kavalerchik added a comment -

Better / Simpler / Similar solution : http://tracker.moodle.org/browse/MDL-20590

Show
Nadav Kavalerchik added a comment - Better / Simpler / Similar solution : http://tracker.moodle.org/browse/MDL-20590

People

Vote (1)
Watch (0)

Dates

  • Created:
    Updated:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.