Your LMS Portal has its own CSS stylesheet to allow you to adjust site styling however you would like. The LMS has a base stylesheet base.css that you can see in page source, that sets some defaults for styling, but you can override these in your portal stylesheet if you wish to, changing layouts and colors.

One caveat: Changes to your stylesheet can have very different effects in different browsers. When our team makes styling changes we test them in several browsers, and often have to make changes to make them work in certain browsers.

To open the style sheet editor...

1. Open Site Management
2. Select Edit Stylesheets

To edit a stylesheet...Basically select which stylesheet file you want to edit, make changes, and save the stylesheet. If you want to use the stylesheet in your portal, you have to select Use the selected file to replace portal stylesheet to activate it. If you leave that option un-checked, your changes will be saved but not applied to your portal yet.
The file stylesheet.css is the stylesheet the site uses by default, so if you want to just make a few changes you can start there. There are a number of example stylesheet files with different styling that you can edit, or just use for your portal. At any time you can switch to any of these styles to test, and back to the main style.
REMEMBER that you are only editing your portal stylesheet. The base.css file has some styling rules that you can override in your portal stylesheet, but are not currently listed there. If you have difficulty overriding those styles you may have to view the page source to find the base file, and download it to see how those styles work.

Tips and Tricks

It won't apply my changes - If you cannot see your changes applied, there are a few possible reasons:

• Browser caching. Try holding the <ctrl> key while either clicking the refresh button or pressing <F5> (Windows) or shift-reload / shift-command-r (Macintosh) to force a reload without using the cache
• Incorrect changes. To determine if you made changes that actually have an effect, you can utilize FireFox or Chrome, which include developer tools that let you inspect your page and edit the styling directly in the tool to test changes. You will still have to make the changes to the actual stylesheet, but this can give you an idea of what to change to get the effect you want. There are a number of extensions for both FireFox and Chrome for editing CSS, some of which include saving the edited file to make it easy to deploy to the server.
• Rounded buttons/tabs/etc only shows in some browsers - Some browsers do not support CSS rounding at all, and some browsers use different CSS settings for rounding. Here are some CSS style names for different browsers (you may have to set all 3 for now since CSS3 is not universally supported)

1. Mozilla based browsers
   • -moz-border-radius
   • -moz-border-radius-topleft
   • -moz-border-radius-topright
   • -moz-border-radius-bottomright
   • -moz-border-radius-bottomleft
2. Webkit based browsers
   • -webkit-border-radius
   • -webkit-border-top-left-radius
   • -webkit-border-top-right-radius
   • -webkit-border-bottom-right-radius
   • -webkit-border-bottom-left-radius
3. Browsers supporting CSS3
   • border-radius
   • border-top-left-radius
   • border-top-right-radius
   • border-bottom-right-radius
   • border-bottom-left-radius

Fixed-width page issues

If you change your page to a fixed width of 1000px or less you may see some filter and editor pages wrap the right hand column under the left, due to spacing issues. To help with this, you can update your portal stylesheet. Find:

div.DListStyle fieldset dl dd
{
  display: block;
  float: left;
  margin-left: 0; /*width:65%;*/
}

Add this AFTER that setting:

/* These two rules will add a more forgiving setting for modern 
browsers while supporting older versions of IE < 7 fairly well. */
div.DListStyle fieldset dl dd
{
 float: none;
 clear: none;
 margin-left: 28em;
}
div.DListStyle fieldset dl dt, div.DListStyle fieldset dl dd
{
 margin-left: 11em;
}

Then find

input, select, textarea
{
 clear: left;
}

div.DListStyle DD input, div.DListStyle DD select, 
div.DListStyle DD textarea
{
 clear: none;
}