Jomatu Wiki: Documentation

Jomatu Wiki: Editing Classes and IDs


In a well-designed website, the styling and layout (which we shall call 'presentation') are managed within one or more style sheets, instead of being applied directly to web page elements*.

Styles defined in a style sheet can affect a web page in many ways, but for our purposes, we're focusing on styles defined using 'classes' and 'IDs'. Web designers create classes and IDs in order to affect presentation on a web page. This manual details how we can add, change and remove these classes and IDs from our web page content, thereby affecting how our web page will look.

Example: Applying a pre-defined class to an image

In this example we're going to add a class to an image element on our web page. This class will give our image a nice fancy-looking border. We're going to assume that when our website was created, the web designer defined such a class in our style sheet to achieve this effect; all we need to know is the name of that class.

So how do we find out the name of that class (indeed, any class and ID names)? The simplest way is to find an element on your website that already has the styling you want, and then copy the class/ID name†. In our example, we can see an image on our 'Services' web page that has the fancy border, so we'll use that to determine the class name.

Our starting place is the Edit Window. We'll assume that we've already used the Browse Facility to locate our Services Page and we've clicked the 'Edit' button to arrive at the Edit Window. For details of how to get the Edit Window, see: 'How to edit your website text'.

Step 1: Determine the class name used for our fancy border

Select the image that already has the fancy border effect.

Editing Classes and IDs - Step One

We click on the image to select it, then click the 'Insert/Edit Attributes' button (roughly in the middle of the bottom row). This launches a pop-up window.

Step 2: Make a note of the class (or ID) name

Editing Classes and IDs - Step Two

Here we can see a class name exists and is called 'fancyBorder'; make a note of this name (sorry, but you can't simply copy and paste it), we'll need to name later.

Step 3: Return to the Browse Facility and locate our page

We've now finished with this web page: we only needed to 'edit' it to find out the class name. So return to the Browse Facility.

Editing Classes and IDs - Step Three

Once back in the Browse Facility, locate the web page you actually want to edit (i.e. the one containing the image that you wish to apply the fancy border to), then click the 'Edit' button to arrive, once again, in the Edit Facility.

Step 4: Select the image and click 'Insert/Edit Attributes'

In the Edit Facility, find the image that you want to apply the fancy border to, then click it to select it, and then click the 'Insert/Edit Attributes' button.

Editing Classes and IDs - Step Four

Once again this launches a pop-up window.

Step 5: Make a note of any existing class names

We want to add our new class name ('fancyBorder') to this image, but this image may already have one or more class names attached to it. The good news is that elements can have multiple class names; you just need to separate them with a space. Note: this does not apply to IDs, which can have only one unique value.

Editing Classes and IDs - Step Five

We can see that this image does indeed have a class name 'rhs' applied to it. We want to preserve this class name as it positions our image on the right-hand side of the text, just where we want it. You need to make a note of this class name now. Having done that, we can edit the class name field to add our new class name 'fancyBorder' to give us that amazing border we want.

Step 6: Edit the class attribute value

Click on the pull-down menu arrow next to the 'Class' field, then select the '(value)' option.

Editing Classes and IDs - Step Six

When the '(value)' option is selected, the field goes blank and the cursor is placed there ready for you to type in the class names.

Step 7: Enter the original class name(s) and new one

Type in any existing class names ('rhs' in this case), followed by a space, then the new class name to add the fancy border ('fancyBorder'). Then click the 'Insert' button to effect the change. Note: all class names must be separated by a space.

Editing Classes and IDs - Step Seven

Clicking the 'Insert' button causes the pop-up window to disappear.

Step 8: Check that the image has the fancy border

We should now see our image with the fancy border applied.

Editing Classes and IDs - Step Eight

Finally, you can save/publish the changes in the usual way.

Editing IDs (just above the 'Class' attribute field in the pop-up window), is done in exactly the same way, except: (1) there can only be a single ID, and (2) this ID must be unique on the web page.

This completes the 'Editing Classes and IDs' documentation.

* For those who are interested in the advantages of using style sheets, read a summary all about using style sheets.

† An alternative is to ask your original website designer to send you documentation on the classes and IDs defined in the style sheet. Bear in mind that this documentation may simply not exist, or that they may want to charge you for it!