How to Add Side Bar Content to Your Page

How to create side bar pages:

Side bar pages are a bit different from regular pages, in that they behave like independent blocks that you can reuse. There are two ways to create side bar content.

Method #1

  1. Login and go to My Workbench -> ‘Create content’ -> ‘side bar page’ – [[{"fid":"34191","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Creating a side bar page.","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"1":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Creating a side bar page.","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Creating a side bar page.","height":521,"width":715,"class":"media-element file-full-width","data-delta":"1"}}]]
  2. Click in radio button in front of department that side bar will be associated with.
  3. Enter internal title in the Administrative Sidebar Title box. Note: this will appear in the side bar drop menus.
  4. If you wish to have a title appear above the side bar content on your web page, enter this into the Sidebar Heading box. [[{"fid":"34196","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Adding title to sidebar.","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"2":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Adding title to sidebar.","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Adding title to sidebar.","height":447,"width":715,"class":"media-element file-full-width","data-delta":"2"}}]]
  5. Use rich text editor add content into the Body of side bar.
  6. Click on Save button.
  7. Change "Needs Review" to "Published" and click the Apply button (i.e., note: if your department has a reviewer, leave in the review state).
  8. In order to add side bar to an existing page:
    1. locate Area Page page from My Workbench and click on link
    2. click the New Draft tab
    3. select Side bars tab
    4. click on drop down arrow where None is indicated and select new side bar page (i.e., look for the one with the one with administrative title created in step 3 above).
    5. click Save button (i.e., this will load the main page that will display the side bar).
    6. click Save button.
    7. select Publish from drop down menu and click the Apply button.
Method #2
  1. Login and create or edit an Area Page (i.e., see instructions on 'How to Edit an Existing Page' or 'How to Add a New Page')
  2. Click on the ‘side bar’ tab. On this tab you will see a number of select lists to choose an already created side bar page. [[{"fid":"34201","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Clicking the sidebar tab","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"3":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Clicking the sidebar tab","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Clicking the sidebar tab","height":447,"width":715,"class":"media-element file-full-width","data-delta":"3"}}]]
  3. If the side bar you want to add has not been created, you can click on the green ‘+’ icon to the right of the select list. This will open a new page where you can create the side bar content. [[{"fid":"34206","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Clicking the green arrow","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"4":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Clicking the green arrow","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Clicking the green arrow","height":447,"width":715,"class":"media-element file-full-width","data-delta":"4"}}]]
  4. Click Save button.
  5. In order to publish the side bar:
    1. select My Workbench.
    2. locate side bar under My Edits and click on link.
    3. click the New Draft tab.
    4. Click Save button
    5. select Publish from drop down menu and click the Apply button.
  6. In order to add side bar to an existing page, follow instructions in step 8 under Method #1 above.

How to insert side bar pages:

  1. Login and create or edit an ‘area page’ (i.e., see instructions on 'How to Edit an Existing Page' or 'How to Add a New Page')
  2. Click on the ‘side bar’ tab. On this tab you will see a number of select lists to choose an already created side bar page.
  3. Select a side bar page, fill out all required fields and save. [[{"fid":"34211","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Selecting a side bar page","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"5":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Selecting a side bar page","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Selecting a side bar page","height":447,"width":715,"class":"media-element file-full-width","data-delta":"5"}}]]
  4. If you want to edit the side bar you chose from the select list, click on the yellow pencil icon. This will open the side bar page and you can make your changes. When you save, it will take you back to the ‘area page’ you were editing or creating [[{"fid":"34216","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Edit side bar","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"6":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Edit side bar","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Edit side bar","height":447,"width":715,"class":"media-element file-full-width","data-delta":"6"}}]]

Adding a ‘font awesome’ icon to the side bar header:

  1. If you want to add an icon to the side bar header, you can easily do this by adding in some minor code to the ‘sidebar heading’ field.
  2. First, visit Font Awesome and choose what icon you want to add.
  3. Click on that icon to get the code. An example code snippet is: <i class=”fa fa-drupal”></i> [[{"fid":"34221","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Copying code from Font Awesome","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"7":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Copying code from Font Awesome","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Copying code from Font Awesome","height":447,"width":715,"class":"media-element file-full-width","data-delta":"7"}}]]
  4. Put that code in the ‘sidebar heading’ and save [[{"fid":"34226","view_mode":"full_width","fields":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Pasting code in sidebar heading","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""},"type":"media","field_deltas":{"8":{"format":"full_width","field_file_image_alt_text[und][0][value]":"Pasting code in sidebar heading","field_file_image_title_text[und][0][value]":false,"field_caption[und][0][value]":""}},"link_text":null,"attributes":{"alt":"Pasting code in sidebar heading","height":447,"width":715,"class":"media-element file-full-width","data-delta":"8"}}]]