Child pages
  • IsisCssGuide
Skip to end of metadata
Go to start of metadata

ISIS Login Page login.css Guide

In 2005, due to UCLA's new visual identity standards, the template for ISIS login pages for UCLA applications has been redesigned. The new design is a gracefully degrading standards compliant css/xhtml layout. While there are many advantages of designing in this fashion, it requires a different mindset than traditional table based design. The following is an explanation of the options available in the custom.css file you have been given to customize the appearance of your login page. For information on customizing the content, please check out our [ISIS Single Sign-On Login Page XHTML Guide|iamucla:IsisXhtmlGuide].

An Overview

While it is possible to do a lot with CSS, we ask you stay within the values presented here. If you do choose to create your own span or div for presentational purposes, we ask you don't try and float or position it (aside from relative positioning of course).

We provide a style guide for Changing Colors in the CSS File, as well as links and brief descriptions on this page for background and border (you'd want some padding on any custom div/spans). If you wish to include font-weight, font-style, line-height (do stay with em units), etc that is fine but test to see how it affects the cascade.

Custom.css Global Elements

The generic custom.css file given to you to modify has short comments after every property to give you a basic idea of what the values included in the rule mean. Here you will find more detailed descriptions as well as links where you can find out about substitutable values.

body {
  background: #FFF url(images/bg.jpg) no-repeat fixed bottom left; 
  color: #333;
  }

The body statement is at the 'top' of the cascade, and applies to the entire document in general. The first property is background, which is a shorthand version of four different properties (more information here and here). It's important to pick a background with low contrast (tweak this yourself in a graphics program if you have to) so the text above is easily legible. The default picture is a nice low-contrast grayscale image of Royce Hall.

The second property sets the text color on the page, by default it is set to a dark grey.

input {
  background: #F3F3F3;
  }

The background color of input (sign-in) fields. By default this color is a very light grey.

input:focus, select:focus {
  background: #FFF;
  }

Once someone clicks inside an input box, or clicks the submit button, it will change color - by default it 'lights' up to pure white. This will not work in older browsers (such as IE 6.0), but is a mainly aesthetic function and won't break design.

h1 {
  color: #000;
  }

The default color of the top level header. This is the title of your application that appears in the header band to the right of the UCLA logo. By default it is black as the header band is a light grey. A high amount of contrast between this and background of #header is desirable.

h2 {
  font-size: .9em;
  margin-bottom: .6em;
  }

The default size of the second level headers - these are the subtitles that appear in the content area (welcome to app, breaking news, help with app, etc). Font size should be kept in em values, if you make the number larger the font size will increase and vice versa. Margin bottom dictates how much space is between the header/subtitle and the paragraph/content below it. If you wish you may also add in a color: property.

a:link {	
  color: #586E9A;
  }

The default color of links in the main content area is the UCLA blue.

a:visited  {	
  color: #586E9A;
  }

By default the template doesn't differentiate between visited and unvisited links - by changing this to a different color from a:link you can get that functionality.

a:hover {
  color: #000;
  }

By default links turn black when you hover over them.

a:active {
  color: #699;
  }

By default links turn into a slightly warm grey when you click on them.

Custom.css IDs and Classes

#header {
  background: #EEE url(images/ucla_cw100.png) no-repeat top left;
  border-top: 1px dashed #999;
  border-bottom: 1px dashed #999;
  }

Much like the body background image, this sets the color of the UCLA in the header. ucla_cw100.png is blue, ucla_bw100.png is black, ucla_wb100.png is white - you can change to any of these images if you alter the background color in the header, which by default is set to #EEE, a light grey.

The next two properties are for the borders on the top and bottom of the band (shocking, eh?). This is a shorthand combination of border-width, border-style, and border-color. You can change these as you see fit. Here's some more information on http://www.w3schools.com/css/css_border.asp, and border properties in general.

#loginBox, #helpBox, #faqMenu {
  background: #E5EBEB;
  border: 1px solid #D5DBDB;
  }

Controls the background color and border types of the ISIS related boxes that appear on the right side of the screen. Should be something fairly similar to the header band color.

#isis {
  color: #536895;
  }

Color of the small timestamp at the bottom of the righ column - I wouldn't change it unless it truly clashed with the color scheme present.

a.nav2, a.nav2:link, a.nav2:visited {
  color: #999;
  }

Colors of the links inside the ISIS boxes. These match that of the main UCLA site and should be kept for consistency or at least not radically changed if you don't absolutely have to.

a.nav2:hover, a.nav2:active {
  color: #333;
  }

Similar to the above except these are the colors that appear when you hover over or click the links in the ISIS boxes.