Web site resources: CSS

Drupal allows users to format content within the body section of a node by applying CSS styles. Unfortunately there is currently no way of providing the styles directly into the WYSIWYG editor. The CREATE DIV CONTAINER button is the easiest solution, but for more complicated positioning, it is best to use the SOURCE button to edit the HTML code directly. This page is intended to demonstrate the results of using a few of the more popular CSS styles used on ONU.edu.

To apply these styles in the WSYWIG editor, simply highlight the text you wish to apply the style to and click on the CREATE DIV CONTAINER button. Insert the name of the style in the "Stylesheet classes" field and click OK. Please note that the DIV CONTAINER will be applied to the entire paragraph block. You will need to save the node to see the change take effect.

The following are the styles and their uses available to users.

The box_center style sheet class places content in a 300-pixel grey box in the center of the page. Any images placed inside the box will be scaled to fit.

box_center box_center box_center box_center box_center box_center box_center box_center box_center box_center

The box_left style sheet class divides the page into three equal columns and places a grey box in the left column. The box_right style sheet class does the same thing, but in the right column.

box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left box_left

box_right box_right box_right box_right box_right box_right box_right box_right box_right box_right box_right box_right box_right box_right

The col1, col2 and col3 style sheet classes split the page into three columns and are best used together. Content does not flow automatically across the three so div tags must be added in the appropriate places.

col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1

col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2 col2

col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3 col3

The column_left and column_right style sheet classes split the page into two columns. Like the col classes, they are best used together.

column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left column_left

column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right column_right

To add a caption to your image:

Double click the image inside the editor
Click the "Advanced" tab
Enter "caption" into the "Stylesheet Classes" text field
Type in a caption into the "Advisory title" text field
Click the "OK" button

Aliquam id nulla tortor, ut dictum risus. Mauris est lectus, convallis vel consectetur a, tristique euismod justo. Phasellus ullamcorper orci nec erat dictum pulvinar. In lorem diam, convallis id varius et, commodo ac felis. Aenean eget semper nibh. Donec faucibus interdum tincidunt. Vivamus a urna tellus. Vestibulum congue ullamcorper libero ullamcorper aliquam. Maecenas id hendrerit nisl. Proin scelerisque tincidunt tortor, id blandit ligula facilisis a. Suspendisse non sodales purus. Curabitur faucibus dictum est sed condimentum. Praesent et dolor vel turpis rhoncus dignissim non in augue. Nullam at dui augue, in vulputate dolor. Aenean adipiscing, ligula eu adipiscing luctus, libero dolor tempor lectus, vitae posuere purus urna at mauris. Nunc sed mi ac nibh tempus posuere sed id diam. Integer dignissim ornare venenatis. Maecenas consequat enim in mi placerat pellentesque. Pellentesque a justo dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a sodales odio. Nunc ac congue libero. Suspendisse sollicitudin ultricies sapien, ut volutpat risus interdum vitae. Aenean sollicitudin, ipsum sed feugiat lobortis, ipsum justo tincidunt nulla, facilisis ornare augue mi ut turpis. Nam nec vehicula velit. Aliquam sit amet enim ligula, vel dictum magna. Praesent sit amet est sit amet turpis fringilla pellentesque. Aenean lobortis interdum sollicitudin. Quisque volutpat massa sed libero faucibus sodales. Aenean tristique mi et purus imperdiet vel mollis sem fermentum. Ut quis rutrum nulla. Aenean purus odio, convallis ac tempor non, vestibulum sed diam. Nulla augue quam, faucibus vel adipiscing at, tincidunt sit amet elit.

To make your image float to the left:

Double click the image inside the editor
Click the "Advanced" tab
Enter "image_left" into the "Stylesheet Classes" text field
Click the "OK" button

Click Aliquam id nulla tortor, ut dictum risus. Mauris est lectus, convallis vel consectetur a, tristique euismod justo. Phasellus ullamcorper orci nec erat dictum pulvinar. In lorem diam, convallis id varius et, commodo ac felis. Aenean eget semper nibh. Donec faucibus interdum tincidunt. Vivamus a urna tellus. Vestibulum congue ullamcorper libero ullamcorper aliquam. Maecenas id hendrerit nisl. Proin scelerisque tincidunt tortor, id blandit ligula facilisis a. Suspendisse non sodales purus. Curabitur faucibus dictum est sed condimentum. Praesent et dolor vel turpis rhoncus dignissim non in augue. Nullam at dui augue, in vulputate dolor. Aenean adipiscing, ligula eu adipiscing luctus, libero dolor tempor lectus, vitae posuere purus urna at mauris. Nunc sed mi ac nibh tempus posuere sed id diam. Integer dignissim ornare venenatis. Maecenas consequat enim in mi placerat pellentesque. Pellentesque a justo dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a sodales odio. Nunc ac congue libero. Suspendisse sollicitudin ultricies sapien, ut volutpat risus interdum vitae. Aenean sollicitudin, ipsum sed feugiat lobortis, ipsum justo tincidunt nulla, facilisis ornare augue mi ut turpis. Nam nec vehicula velit. Aliquam sit amet enim ligula, vel dictum magna. Praesent sit amet est sit amet turpis fringilla pellentesque. Aenean lobortis interdum sollicitudin. Quisque volutpat massa sed libero faucibus sodales. Aenean tristique mi et purus imperdiet vel mollis sem fermentum. Ut quis rutrum nulla. Aenean purus odio, convallis ac tempor non, vestibulum sed diam. Nulla augue quam, faucibus vel adipiscing at, tincidunt sit amet elit.

To make your image float to the right:

Double click the image inside the editor
Click the "Advanced" tab
Enter "image_right" into the "Stylesheet Classes" text field
Click the "OK" button