Skip to the content of the web site.

Adding Your Own CSS

Pointing To Your Custom CSS

The Dreamweaver Common Look and Feel template has a placeholder line that imports a custom CSS. You will find it near the top of the template.

<style type="text/css" media="screen">
@import url("http://www.uwaterloo.ca/css/UWblank.css");
/* @import url("../css/custom.css"); */
<!-- you need to replace this with your own stylesheet to customize colours -->
</style>

In the template, this line is commented out. Suppose you created a custom CSS called mycss.css and placed it in a folder on your web site called css. You would replace the highlighted line above with one that reads:

@import url("../css/mycss.css");

That is, you would remove the initial "/*" and trailing "*/". These mark the line in the template as being a comment. Then you would replace the folder name and file name with the location of your custom CSS. Be careful not to remove the trailing semicolon.

Dreamweaver and Cascading Style Sheets

A style sheet is a plain text file, and as such, can be created and modified with any text editor. However the syntax of CSS is non-intuitive, so most people find it easier to use a CSS editor. Dreamweaver is an excellent CSS editor.

There are two approaches to editing styles in Dreamweaver.

  1. By opening the Design panel group, and using the CSS Properties panel. You then use the Style Edit button to modify style settings.


    Tip: You open a panel group by clicking on its right pointing black arrow. You close a panel group by clicking on its downward pointing arrow.
  2. By opening the Tag Inspector panel group.

Creating Your Custom CSS

Below you will find a link to a starter custom CSS that you can download. It contains some entries you may want to change, all set to the system default. You can open this file in any text editor. However, unless you are very familiar with CSS syntax, you may find it difficult to modify the CSS from a plain text editor.

Download the starter custom CSS.

If you click on the above link the file will be loaded automatically into Dreamweaver. (If you wish to edit it with another text editor, right click, and do a Save As.)

With the CSS open in Dreamweaver, do a File, Save As and save it as the appropriate file in the appropriate folder; that is, whatever you specified in the @import line in your template.

Uploading Your Custom CSS

Your CSS must reside on your web site. Remember that whenever you make any changes to your CSS, you must remember to upload it to your server.

Modifying Your Custom CSS

There are several ways that you can modify your CSS in Dreamweaver.

  1. Make manual changes on the Dreamweaver editing screen.
  2. Make editing changes using the CSS edit tool on the CSS Styles tab of the Design panel group.
  3. Make changes on the Attributes tab of the Tag Inspector panel group.

(Only the first of these choices is available if you are using a text editor).

Changing the Background Colour of the Content Bar (Topictitle)

  1. First, you will need to choose the colour you want for the background of the topictitle area, and determine its 6 character colour code. You can use any graphics program, or even Dreamweaver itself to determine the colour code. Go to any spot in Dreamweaver where you can choose colours, such as the font colour picker in the Properties panel, or the background colour selector in Modify, Page Properties. Select the colour you want, and make a note of its colour code. For example, 0066FF is a blue shade.
  2. With the CSS open in Dreamweaver, find the #contentbar section,
       #contentbar {
       background-color:#0066FF;
    and replace the background-color colour code with your 6 character code, as shown above.

    Alternatively, click somewhere in the #contentbar area of the CSS, and open the Tag Inspector panel group. Slide down to Background and then to Background-color and choose your colour.


    Another alternative is to open the Design panel group, choose the CSS Styles tab, and click on the Edit button. The CSS editing dialog box will appear.


    Select the Background Category, and choose your background colour.

Changing the Colour of Text in the Contentbar

If you change the colour of the background of the contentbar you may also wish to change the colour of the text that appears on it.

  1. Click somewhere in the #contentbar style. Then either:
    1. In CSS Properties, find Font, color and then use the colour selector to choose your font colour.

      (If you don't see this panel, click the Tag Inspector tab.)
    2. Open the Design panel, and select the CSS Styles panel. Use the CSS Edit button , and in the Font category, select the colour picker.

Changing the Background Colour of the Right Navigation Area

  1. Click in the #secondnavarea style, and use the same technique to change the background of the right hand navigation as you used to change the background colour of the Contentbar. (See above).

Adding Bullets to Unordered Lists in the Right Navigation Area

By default, if you create an unordered list in the right navigation area, it appears with no bullet symbols. You may wish to add bullet symbols.

  1. Click somewhere in the #secondnavarea ul style. Edit the style, and in the List category, in the Type box, select disc (or circle or square if you wish).

  2. Alternatively, in the CSS Properties panel, select List then List -style-type and choose disc.
  3. You have selected a disc bullet, but with the current format, there is not actually room for the bullet to print. Under Position you must select inside as shown above.

Applying a Background Colour to Expanded Right Hand Submenu Items

Some people may wish to have a coloured background applied to expanded submenu items because it makes them stand out more, as you can see below.

To do this, you modify the #primarynavsub a to look like:

#primarynavsub a {
background-color: #FFFFCC;
}

To do this, edit the #primarynavsub a style, and select an appropriate background colour.

Changing the Body Headings

By default, some of the headings in the body are coloured to match the contentbar and some are black. You may wish to change these colours.

  1. Click in the #primarycontentarea h1 style. Change the font colour attribute in a manner similar to the method for changing the font colour in the #contentbar.
  2. Repeat for the other headings.

The default settings for the headings are:

h1 - gold,  120%
h2 - black, 120%
h3 - gold,  110%
h4 - black, 100%, bold

If you change the colours of the headings to a single colour, you may also wish to change the relative sizing of the headings.

  1. Click in the #primarycontentarea h1 style, edit the style, and under Category Type change the Size. Set it to a percentage of the base font, not to an absolute value.
  2. Repeat for the other headings.

Enforcing the Case Settings for Body Headings

You may wish to have your body headings appear all in lower case, all in upper case, or in title case, that is, the first letter of each word capitalized. You may wish to enforce these case rules, no matter how the headings are entered.

  1. Click in the #primarycontentarea h1 style. Edit the style and in the Type category, under Case, make the appropriate choice.

  2. Alternatively, from the CSS Properties panel, select text-transform and make the appropriate selection.