FlexWin (Method 1)

- Styling examples

Throughout the descriptions of the DIBS specific tags, all style sheet classes and element IDs were highlighted. Those are the ones you handle via your stylesheet and your JavaScript. In general you control the classes via the stylesheet, while IDs and spans are handled via JavaScript. This page gives you some examples on how to do this.

Example 1: Styling of a class

The HTML from the page where you choose a payment method, uses a class called "paytypeItem", which is applied to each payment method:

<div class="paytypeItem">...</div>

From the stylesheet you can change the background color to, say, green for every payment method with this declaration:

.paytypeItem {
    background: green
}

Example 2: Styling of a span

The DIBS tag dibs:amount results in some HTML including a span tag with the ID amountField.

<span id="amountField">...</span>

The color of the amount is changed to blue through this declaration in the stylesheet:

#amountField {
    color: #0000ff;
}

Example 3: Styling of a div

The entire payment form is enclosed by a div tag with ID payment.

<div id="payment">...</div>

The background color of this block is changed to yellow by putting this in your stylesheet:

#payment {
    background: yellow;
}

Example 4: Programmatic change of an object via its ID

You want to change the text on the cancel button from "Cancel" to "Get me out of here!". The HTML for the button is:

<div align="right" id="wwctrl_payreturn_0"><button type="submit" 
    id="payreturn_0" value="Cancel">Cancel</button></div> 

By using the JavaScript function getElementById, you obtain a handle to an object. With this handle you can control many attributes of the object. E.g. you change the text like this:

document.getElementById("payreturn_0").textContent = "Get me out of here!";

Of course, it is very important to locate the correct ID in the HTML. If instead of the button's ID you use the ID of the surrounding div tag, wwctrl_payreturn_0, then the entire button is replaced by the text.