Edit Content with the Drupal Editor

Understanding the header hierarchy and flow of your information is very important for accessibility. The first header of any section should always be placed as a header 2. Then any sub sections underneath should begin with a header 3, then 4, then 5 and so on. For example:

First Section (Header 2)

Text and content pertaining to the first section.

Sub Section (Header 3)

Text and content pertaining to the sub section

Sub Section 2 (Header 3)

Text and content pertaining to sub section 2

Sub Sub Section (Header 4)

Text and content pertaining to sub sub section 

Second Section (Header 2)

Text and content pertaining to Second Section

Though it may be tempting to use different headers based on size, this will only create obstacles for users who rely on web accessible tools to navigate easily through your web pages. 

Bold 

 The bold button allows you to thicken the lines of text in your content. This technique is most useful when you want to catch the user's attention. 

Italics

The Italics button allows you slant the text in your content. This is most commonly used for the name of projects or particular works so it can stand out from the rest of the sentence. 

Remove Format

The Remove Format button allows to easily highlight a section of text and remove any formatting from the highlighted section all at once. For example if you wanted to remove a section that had links, bold, and italics formatting in it. 

Aligning your text

There are three options you can use to align your text how you'd like. There is:

 Left Align

 Center Align

Right -Align

Bulleted List

 Bulleted lists are useful when you would like to create a list without any order, importance or chronology. For example:

You can print your work from:

• Your laptop
• A computer station
• A printing station

Numbered List

Numbered lists are useful when you'd like to create a list where chronology is important. For example a step by step guide.

1. Log into Drupal
2. Then select the Content Button at the top left corner of the screen.
3. Next select "Add Content"
4. Then select "Page"

Block Quote

Block Quotes are used to emphasize a direct quotation that is longer than 40 words or 4 lines. For example: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 Buttons are great visual tools that can be used to grab a user's attention. Once you have selected the Button Icon you will be prompted with a new screen like this:

The Style drop down allows you to choose the color you would like the button.

• Primary (Blue): Library Homepage
• Secondary (Gray): Admissions Homepage
• Green: Give to CSUSB
  • To stay consistent with CSUSB branding, Green buttons should only be used for Giving or Donation buttons. 

The Text field is what you'd like the text for the Button to be. For example looking at the examples above the text would be "Library Homepage", "Admissions Homepage", "Give to CSUSB". 

The URL field is the URL a user will be sent to when they click on your button. 

You may also check the Full Width box if you'd like the button to take up the whole width of the section. For example:

Full Width Button for About CSUSB

The Type drop down allows you to choose a solid colored button or simply display a border around the button. For example:

Solid Color Button for College of Arts and Letters

Outline Button for Department of Art and Design

The Icon drop down is a list of different icons that you can use to make it even clearer what the intention of the button is. For example:

Location for FO-182

'Creativity Finds a Way': How the CSUSB College of Arts and Letters Faced COVID-19 Video

The Target drop down is a list of options as to how you'd like the button to act. 

The only option you will likely use is "_blank".

New Window Department of Accounting and FinanceThe New Window (_blank) option opens the link in a brand new window. 

The link button allows you to make any text into a hyperlink. 

1. Simply highlight the text you'd like to make a link.
2. Then select the link button.
3. You will then be shown this screen:
   

Here you will paste the URL that you'd like the user to be sent to and you'll see something like what is below after you Save.

Link to the Department  of Marketing

Links to Email

To create a link to an email address, follow the steps to make a link. In the URL box, you will enter mailto: followed by the email address you with to link. 

Unlink

The unlink button only becomes available when you click on links. This option allows you to remove the link function from the text and revert it back to normal text.

 The Anchor button allows you to create a clickable link for a user to jump to a specific section on your webpage. 

1. Simply move your cursor to where you'd like your anchor to go.
2. Click the Anchor button
3. You will then be shown this screen:
    
4. Here you will type the name you'd like to give your anchor.  No spaces
5. Then select ok
6. You should now see a red flag appear right where your cursor is. 

Referencing your Anchor

If you'd like to reference your anchor within the same page in a link or button simply copy and paste the label you gave your anchor and add a # at the beginning. So if I labeled my anchor "file" then I would reference my anchor as "#file" 

If I wanted to reference my anchor from another page then I would add the # and the label for the anchor to the end of the url I am referencing. For example: https://www.csusb.edu/web-editor-guide/drupal-content/page/edit-content-drupal-editor#file

You can add files to webpages using the file button in the editor. File uploads are limited to the .doc, .docx, .xls, .xlsx, .pdf, .ppt, .pptx, .txt file formats and have a size limit of 10MB.

Because file names and URLs cannot be changed in Drupal, please be as specific/precise with file names before uploading them into Drupal. The file in the following example, is an example if a bad file name. "Sample File" gives no indication as to what is contained in the file or what is is used for when searching for the file from within Drupal. A better name would be "Drupal Editor Guide Example File". 

After uploading your file, the Drupal editor will display your file as a link with the file name as the link text. 

sample_file.txt

You now have the opportunity to rename the link text to something more user friendly such as:

Sample File

Updating an Existing File

You cannot update an existing file from the normal page edit screen. If you remove the linked file from a page and upload a new file, the old file will continue to be available to the internet both directly and through Google searches. This creates outdated files and can cause confusion for users searching for specific information or files. To replace an existing file:

1. Go to the Content Edit page of Drupal by selecting the "Content" link in the admin menu bar. 
2. Select the "Files" tab.
   
3. Enter the file name in the "Filename" field or the file address in the "URL" field. Searches are wildcarded on both ends, so partial matches will still display. 
   
4. To replace a the file, select the "Replace" option for the file you wish to replace. 
   
5. Upload your new file, give the file a "File Title" and select save.
   

Your old file is now replaced by a new file. The new file will exist at the same URL of the old file, so links on your website will continue to work correctly and Google Searches will now return the new file. If you continue to see the old file at the file URL, please refresh your browser as you may have the old file cached in your browser. 

You can add images to webpages using the image button in the editor. Preferred formats are PNG and JPG with max size of 1 megabyte. It is recommended that you crop images to desired dimensions before adding them with the editor. 

After selecting the image button, you can select an image to upload from your computer; images added must have alternative text describing the image for accessibility. Here you can also align the image similar to text and add a caption displayed under the image. Once an image has been added, you can right click it in the editor to edit the image properties seen above.

The Drupal page editor also allows embedding YouTube Videos.

After selecting the YouTube button, you can add the title for the video you wish to embed, paste the link for the video, and adjust the size of the player within the page. You can select 'Make Responsive' to fit the video player to the width of the content and selecting 'Video image and link only' will show a thumbnail of the video with a link leading to YouTube.

 Tables can be used to display sets of data. You should never use tables simply for layout purposes. Tables hinder readability on mobile devices and should be used as a last resort when data cannot be displayed via other methods.

Adding a New Table

After selecting the table button in the Drupal editor, you will be presented with the Table Properties window.

You can select the number of initial Rows and Columns that the table will have. When creating a new Table, all tables must have:

• Proper Headers (either First Row, First Column, or both)
• A Caption describing the contents the table

This table uses the first row as the headers, which describes the data in the corresponding columns and uses "Fruit Available for Sale" as the Caption to describe the entire data set in the table. 

Editing an Existing Table

To edit an existing table, right click on the exiting table to view the table menu. 

The "Table Properties" option will open the initial Properties windows that was used to create the table. From that menu, you can increase the number of row or columns as well as modify the caption or adjust headers. The "Cell", "Row", and "Column" options allow you to perform tasks such as add additional rows or columns or remove rows and columns. This menu will also allow you to complete remove the table from the Drupal editor. 

You can add an info block to display content within a block. When creating an info block you can align it within the page, choose between blue and grey blocks, and add icons from the FontAwsome gallery. Info blocks can be useful when you wish to draw the attention of visitors.

An accordion is a design element that expands in place to expose hidden information. This can be useful when creating FAQs sections.

Creating an Accordion

When editing a Page or other Content types in Drupal, the "Insert an Accordion" button is available in the content editor.

1. Click on the Insert Accordion
   
   
    
2. The "Configure Accordion" popup should come up automatically. By default, Accordion Items expand individually. Single Expand enables the accordion to only allow one item to be expanded at a time. Expand All displays all accordion items as expanded on page load. Style options are also available by clicking on the "Default Style" tab.  These presets are used in certain situations where the page background is a different color other than white. Leaving it as empty will use the Light Gray preset. Note: You will only see these options take effect on the live page.
   
   
    
3. To add more Accordion items, right click on the Accordion element, and click Add Accordion Item
   
   

Deleting and Sorting Accordion Items

To delete items, select the desired Accordion item and simply press Backspace/Delete key, or right click on the item and press Cut (Ctrl+X).

To sort items, hover over the Accordion item and drag the handle icon to a different location in-between items.