Using the Design Tools Customize the Style Options

There are several image attributes you can apply using the Current Element Style.  This will vary depending on the element you are modifying. In this example the image element is being modified. Review the numbered items below. 

1. Edit a page that has a picture or other element you wish to modify. Select the image or element. 
2. Launch Design Tools. Select Customize the Style and then select Current Element Style. For an image element the Image Size/Position/Style options will appear.  If you have selected a different element, different options will appear. 
3. Next to Alt Text enter a good description of the image. If the image is a decorative image, check the box to mark the image a decorative. 
4. You can edit the width and height of the image using the boxes. 
5. You can edit Fill Width and Max Width Fill. This may be helpful with banner images. 
6. You can edit the image alignment. 
7. You can change the image style. Be sure to save your work when done. 

You can create ordered (<OL>, numbered) lists and unordered (<UL>, bullet)  in the rich content editor. With Design Tools you can modify the lists in a couple of different ways. Review the numbered items below. 

1. Edit a page that has text you wish to convert to a list. Select the text and choose the unorder (bullet) or ordered (numbered) options. 
2. Select the entire list or place you cursor in the list. If you are selecting the entire list, select the OL or UL below the rich content editor. This ensures you have all the code selected. 
3. Launch Design Tools and select Customize this Style and then select Current Element Style. The Ordered/Unordered List options will appear. 
4. Depending the list that is selected you can change the order or bullet options. 
5. You can select the list items you wish to nest and then click indent option. 
6. With ordered lists you can change the starting number. 
7. With bullet lists you can make the list look like a navigation bar. Be sure to save your work when done. 

Tables should only be used for tabular data. It is important to add attributes that make the table more accessible. Please note you must set your comfort level at intermediate to be able to customize tables. Review the numbered items below. 

1. To create a new table click the table icon in rich content editor toolbar. This feature works similarly to the Word taable feature. Enter headings in the first row and enter your data in remaining rows. 
2. To alter the table style select the table. You should see the white squares at each corner. 
3. The table can be edited in the rich content editor. A menu of options will appear below the selected table. 
4. Launch Design Tools and select Customize this Style and then select Current Element Style. The Table/Header/Footer/Style options will appear. 
5. Make sure the head row and table caption are selected. You can also make the table sortable, add a head column, and footer row. 
6. You can choose a table style if desired. 
7. You can make adjustments to the table width and column widths. It is best to use percentages so the table can expand and contract as students resize their browser window. Be sure to save your work when done. 

There are several themes available and the colors in the banner can be customized. Please note you must set your comfort level at intermediate to be able to customize colors.  Review the numbered items below. 

1. In the example above the generic theme was applied. Please note there are several elements you can target in the header if you fill out each section in the customize banner text option.
2. Launch Design Tools and select Customize this Style and then select Colors for Banner Theme. The color options will appear. 
3. Each element you can target will be listed. When you click on the eye icon you can see what element you will targeting for changing the color. The BG column will change the background color and the Text color column will change the text color. When you BG or text color option in a column the color panel will display. 
4. You can select the element you wish to target. You can also change the outline colors as well. 
5. You can enter hex color, mark a color as favorite, lighten or darken a color, or reset the color. 
6. You can select colors from the institution palette or create custom color palettes. 
7. Be sure the colors you choose have a high contrast between background color and text color. The color palette will tell you if a color doesn't have enough contrast.