Elegance Theme for Moodle

Version 20080527

Created by Patrick Malley
Owned by NewSchool Learning
Support: http://support.newschoollearning.com

Thank you for your purchase with NewSchool Learning. I hope that you enjoy working with this theme. While this document should help make installation and setup as smooth as possible, it does assume a basic knowledge of HTML, Moodle, and CSS. If, at any time, you feel lost, the best place to start is in the Moodle documentation at http://docs.moodle.org. Then, if you still have questions, feel free to contact me via the support forum listed above.

Contents

• Style Selection
• Selecting Style Sheet
• Selecting Background Images
• Header Customization
• Adding a Logo
• Adding a Tagline
• Creating Custom Colors
• Changing Background Image Colors
• Changing CSS Colors
• CSS Extras
• Turning Extras On
• Using CSS Extras

Style Selection

Selecting a preferred style is a two step process:

1. You need to tell config.php which stylesheet to get.
2. You will need to change the file name of the background image files that you want to use.

Selecting Style Sheet

Theme style variations are as follows:

Selecting Background Image Folder

All style sheets grab images from the same location: '/elegance/pix/bg/'. For this reason, you will need to change the name of the "bg" folder for whichever theme variation you prefer to use to simply "bg" after renaming the current "bg" directory to something else ("bg_01" recommended).

I probably made that sound much more complex than it is, so:

1. Open your "elegance" theme folder, then open "pix".
2. You will see 5 bg directories:
1. bg
2. bg_02
3. bg_03
4. bg_04
5. bg_05
3. Elegance only pulls background images from the folder called "bg" - so if you have changed to a theme variation other than "elegance_01" in the section above, you will need to also change the corersponding image directory to "bg".
1. Rename "bg" to "bg_01"
2. Rename the image folder corresponding to your selected theme variation to "bg"
3. Done!

Header Customization

Adding a Logo

Moodle's header.html file is set up in two parts:

1. The first determines what is shown on the front page:

   <!-- START WHAT APPEARS ON FRONT PAGE -->

   <div id="header-home" class="clearfix">
     <div id="header-top" class="clearfix">
       <h1 class="headermain"><?php echo $heading ?></h1>
     </div>
     <div id="header-bottom">
        <div id="header-image">
          <div id="header-box">
            <div id="header-description"><?php echo $COURSE->summary //Retrieves Site Description from Front Page -> Front Page Settings ?></div>
          </div>
        </div>
      </div>
   </div>

   <!-- END WHAT APPEARS ON FRONT PAGE -->

2. The second determines what is shown on all other pages:

   <!-- START WHAT APPEARS ON ALL OTHER PAGES -->
     <div id="header" class="clearfix">
        <h1 class="headermain"><?php echo $heading ?></h1>
        <div class="headermenu"><?php echo $menu ?></div>
     </div>
   <!-- END WHAT APPEARS ON ALL OTHER PAGES -->

If you would like to replace the way that your institution's name appears at the top of each page, I recommend substituting the h1 tag within the div id "header-home." If you would like to add your logo to all pages, substitute the h1 tag with BOTH "header-home" and "header."

To substitute the h1 tag using CSS:

1. Open "styles_elegance.css".
2. Search for the string "#header-home .headermain h1".
3. Replace everything that appears in red with what appears in blue:

   #header-home .headermain h1 {
     font: 1.8em normal;
     background: url(/path/to/your/logo/yourlogo.png) no-repeat;
     text-indent: -9999em;
   }

• Of course, if you wanted your logo on the course pages as well, you could always add that to the mix:

  #header-home .headermain h1,
  #header .headermain h1 {
    background: url(/path/to/your/logo/yourlogo.png) no-repeat;
    text-indent: -9999em;
  }
  
  #header .headermain h1 {
    font: 1.4em normal;
  }

4. Save your changes.

Adding a Tagline

I have added a bit of PHP script that calls up your site description on the front page. By default, this script is turned on. If you DON'T want to use it, all you have to do is make the following edit to header.html (in blue):

<div id="header-box">
        <!-- <div id="header-description"><?php echo $COURSE->summary //Retrieves Site Description from Front Page -> Front Page Settings ?></div> -->
       </div>

When editing your site description use the h2 element to add CSS color to your description. Your site description can be edited within your Moodle admin tree at "Front Page > Front Page Settings > Front Page Description"

Creating Custom Colors

Changing Background Image Colors

For your convenience, I have included the Fireworks PNG files that I used to mock up this theme. To change the background colors, this document will need to be modified and slices will need to be exported to their appropriate location.

It is not recommended to edit using Photoshop because the program is unable to match exact web colors.

To edit the background images:

1. Open "SOURCE/ELEGANCE_0X_SOURCE.png" using Adobe Fireworks (where "XX" = "01", "02", etc.).
2. Hide slices and hotspots (available in the "Tools" menu or using by pressing "2" on your keyboard [on a Mac that is]).
3. Make desired color changes to the document.
4. Show slices and hotspots (again, in the "Tools menu, or just press "2").
5. From the menu bar, select File > Export.
6. Select the file you would like to Export your slices to.
7. Ensure that the Export settings look similar to the image to the right.
8. Press "Export"
9. If everything worked correctly, you should have a file containing 6-8 small images that will be used to make up the background of your theme. Replace the default images with your edited images and you should be good to go.

The same steps can be taken to edit the forum background image (FORUM_BG_SOURCE.png).

Changing the CSS Colors

I have seperated all color related items away from the main CSS document for easy editing. To change the CSS colors of your theme:

1. Open styles_elegance_0X.css (where "0X" = "01", "02", etc.)
2. If you know which colors you want to use, enter them into the appropriate spaces. If you are unfamiliar with hex colors, you may want to visit a site such as http://colorcombos.com/ for ideas.

CSS Extras

Just for fun, I have added a CSS document filled with some extra goodies that you may want to use in your site. By default, I have not included this CSS into the core of the theme. So, if you want to use it you will have to "turn it on."

Turning Extras On

To use the CSS Extras included within this theme:

1. Open config.php and add the following (in blue) to line 9:

   $THEME->sheets = array('styles_elegance','styles_elegance_0X','styles_extras');

2. Save Changes

Notice that the file extension (.css) is not included in this list.

Using CSS Extras

To use the CSS Extras (once turned on), simply enclose any text that you write (in plain text mode) as follows:

<p class="information">Text goes here</p>

<p class="alert">Text goes here</p>

<p class="construction">Text goes here</p>

<p class="download">Text goes here</p>

<code>this is code?</code>

<p class="note">Text goes here</p>

<p class="new">Text goes here</p>

Please let me know if you have any trouble.