Advanced Skills

I'd like to:

How can I edit the HTML code?

Every page you can edit has a "Source" button in the toolbar. If you are familiar with the ins and outs of HTML, that "Source" button will allow you access to the raw code for the page content. You can edit the code directly in that window. You can also copy the code into an HTML editing program for a more user-friendly view. Alternatively, if you have prepared HTML code outside of the website, you can paste it directly into the "Source" tool. Please note that not all HTML will function on your pages, and we will still have to check that your code is within the University guidelines and best practices.

Back to top of page

Add slides to the main page

These slides should only be added to the main page of the department site. The slides option shows up on the internal pages, but slides should not be added to internal pages as they don't display correctly.

  1. Prepare four images at 1020x300 pixels exactly. You can use Photoshop, or a similar tool or an online resource to scale/crop your images as needed. Four (4) images are required for the slider to work correctly.
  2. To add a slider to your department home page, you must first upload the images to the server.
    • To upload images as slides, they must be 1020x300 pixels exactly.
    • Hover over the "Add Content" button. It will be at the top of your browser, just below the address or URL bar. (If you have a bookmark bar, it will be below that.)
    • From the drop-down menu, select "Slide"
      slide upload example
    • Use the "Choose File" button in the Image section to upload a photo. Clicking the button will open your computer browser so you can locate your image.
    • Click "Upload".
    • Once the image has finished uploading, add a title to your slide in the "Title" section.
      • Tip - Name your slide so you can find it easier later. If you are with the Housing department, for example, a good slide name would be "Housing - Kitchen" or similar. Starting your slide's name with your department will save you trouble and time later.
    • You can add a hyperlink to your slide image if you wish, but be sure to observe A.D.A. standards. If you're unsure, reach out to the web team or OIT for more information.
    • Scroll to the bottom of the window, and save your work.
    • Repeat the above steps until all of your slides are uploaded. (Remember, you need at least 4 or the slideshow won't work.)
  3. Now you are ready to add a slideshow to your department.
    • Open a draft of the department home page.
    • Scroll down to the "Slides" section.
      slide upload tool example
    • Click "Add another item" to create 4 rows.
    • Click in the row box, and start typing your department. If you followed the above steps correctly, only your department's slides should appear.
    • Select one slide image per row until all are filled.
    • Save your draft as normal, and the next time the page is published the slides will appear.
    • Please note - the page must be published before you see the slides. Don't panic if you save the page as a draft and there are no images. When someone from the web team publishes your page, the new slideshow will begin working.

Back to top of page

Add a menu/navigation link

To add a link to the main navigation menu, scroll down to the "Menu settings" tab.

menu tool example

  • Check the "Provide a menu link" box. Additional options will appear.
  • Type the name of the link, as you would like it to appear, in the Menu link title box.
  • The description box is a place where you can write a short description of the link, which shows up as a "tooltip" when you mouseover the menu item.
  • "Parent item" determines which menu the page will be housed in (especially relevant if you have access to multiple websites).
    • Be sure that the item you select is the home page of your department. In the example above,  "Welcome to Drupal" would be the home page of this group.
    • If this is a subpage of an existing page, select that page as the "Parent item" instead of the department.
  • "Weight" determines where the link will sit in the menu. The weighting options range from -50 to +50. Negative weights are lighter and will sit higher in the menu. Positive weights are heavier and will sit lower on the menu.
    • For example, "Staff" and "Contact Information" are two pages in a department. Staff has a weight of -25, and Contact Information has a weight of +15. In the menu, "Staff" would appear directly above "Contact Information", assuming they are the only two links. If you wanted to add a page called "Events" between the two, you could assign it any number from -24 to +14, and it would settle between the former links.
    • Weighting can get tricky! If you choose to assign all of your pages weights so you can track them better, it is advisable to number by threes, fives, tens, etc. Just be sure that whatever method you choose, there is an available number or two between each page. If you have to add one later, it'll make your life much easier to number that way. If you number each page -50, -49, -48, and so on, adding a page between -49 and -48 means you'll have to renumber every page below -49. If instead, you use -50, -45, -40, and so on, it's easy to assign a new page to -48 to fit between pages one and two.
  • When you are done, be sure to save your draft. The changes should appear after the draft is published.
    • Please note - Your changes may not appear to you until the draft has been published. If you saved your page and you don't see the new menu, please be patient. They have to be published to the server by the web team before they will stick.

Back to top of page

Add Anchor Links

Anchor links are useful for a long page with several sections, a FAQs page, or a page set up as an A-Z directory. You'll want to establish the text on the page first and then go in and add the anchor links. This page is an example of how the anchor links work. The set of links jump to sections within the same page.

Once the content is in place, establish all of the anchors and anchor names and then go back to the words to be linked to establish the links.

screenshot of where the anchor icon is in the tools

First, set the anchor in the section of the text to be linked.

Always add the anchor first.

  • Go to the section in the text where you want the link to "jump to".
  • Place the cursor in front of the first word of that section.
  • Click the "Flag" icon in the toolbar. When you hover over the icon the word "anchor" appears.
  • The "Anchor Properties" dialogue box opens.
  • Type in the desired name using a hyphen between words instead of a blank space.
  • Click "Ok" and the Flag appears where you had placed the cursor.

Next, establish the link to the anchor.

  • Go to the top of the page where the links will be.
  • Highlight the text to be linked.
  • Click the "chain" icon.  When you hover over it will say "link".
  • This opens the Link dialogue box.
  • Use the "Link Type" drop-down box to select "Link to anchor in the text".
  • Use the "Select an Anchor" drop-down to select "Anchor Name".  The anchors you created on this web page will show on the drop-down list.
  • Click "Ok"
  • This action changes the text that was highlighted to a link (font changes to blue). Now repeat for the remaining links to be established.

Back to top of page

Use templates to create the layout I need

templates tool example

  • Click the "Templates" button in the menu, the one that looks like a sheet of paper.
  • There are many different options, and you are encouraged to experiment and try them out!
  • These items have names and a brief description of what they do.
  • Some of the more commonly-used ones are:
    • 2 Column Layout - This will allow you to organize your content into two columns.
    • 3 Column Layout - This will allow you to organize your content into three columns.
    • 3 Column with Rollover Text - This will allow you to organize your content into three columns. These allow you to add images with text that pops up when the cursor rolls over them.
    • Sidebar Contact/Sidebar Hours - These allow you to drop in sample layouts, which you can then update with your department's information. This is most useful in sidebar blocks at the bottom of menus.

Back to top of page

Create a photo gallery

  • To create a set of linked images, first upload all of your images to the server. It is best to upload the large-size version, then scale it in the page later for the thumbnails.
  • Add all of the images you'd like to your page. In this case, it is best if they are closer to thumbnail size in the page, perhaps around 100 pixels wide, height will vary based on the ratio.

image link tool example

  • Once you have completed adding your images (or as you go, to save time), click over to the "Link" tab.
  • Click "Browse Server" and select the full-sized image you uploaded earlier.
  • Click OK.
  • Once all of the photos have been linked to their originally-sized selves, go through all of the images again, and open the "Advanced" tab this time.

image advanced tab example

  • Here you will see "Stylesheet Classes". Add "colorbox" to each image in the Stylesheet Classes box.
  • To link all of the images into a photo gallery, add a name to the "Relationship" box. This can be whatever you want, but take care to be sure that the name is exactly the same each time. For example, if you were uploading pictures of the staff picnic, you could type "Picnic" into every Relationship box.
  • Once your draft has been published, you will be able to click a photo on the page, and move between the rest of the photos in that gallery by clicking forward/back arrows. Uploading the original, large-size files will allow them to expand on the screen in much greater detail

Back to top of page

Embed YouTube Videos

Step 1 - Is the video already on YouTube?

If the video is already on YouTube, skip to Step 2. In order to embed YouTube videos, you will first need to upload the video, see instructions on how to upload a video on YouTube. 

Step 2 - Is the video accessible?

Make sure the video has closed captioning (cc) or subtitles, YouTube has a built-in system that helps transcribe uploaded videos.

Creating Accessible Videos

Step 3 - Embed the Video

  1. Get the YouTube code to embed the video
    1. Upload or go find the YouTube video you wish to post
    2. Click on the "Share" button below the video title
    3. Choose "Embed"
    4. Copy the code provided and keep in a text file or leave this window open
  2. Open the webpage (where the video will be posted) in a new window/tab
    1. Open a "New Draft"
    2. Click on the "Source" button to see the HTML source code
    3. Copy the entire code from the page, (it shows up on a single line) go the following website and paste
      http://www.dirtymarkup.com/
    4. Make sure the setting "Output:" is set to "Code fragment"
    5. Click on the button "Clean"
  3. Now the code will be organized so you can make some sense of it.
    1. Go to the YouTube tab/window and copy the embed code
    2. Go to the DirtyMarkup site and locate text where you would like to place the video
    3. Paste the code with what you copied from YouTube
    4. Copy the entire page code again
    5. Go to the webpage in Drupal, make sure it's still in "source" mode and replace the old code.
    6. Go through the usual process of saving and sending for review

Back to top of page