- Edit HTML
- Add slides to the main page
- Add a menu/navigation link
- Use styles to improve the look of my pages
- Use templates to create the layout I need
- Create a photo gallery
- Embed YouTube Videos
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.
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.
- Prepare four images at 1020x300 pixels exactly. You can use Photoshop, or similar tool or an online resource to scale/crop your images as needed. Four (4) images are required for the slider to work correctly.
- 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"
- 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.)
- 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.
- 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.
Add a menu/navigation link
To add a link to the main navigation menu, scroll down to "Menu settings" tab.
- 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 about the link, which shows up as a "tool tip" when you mouseover the menu item.
- "Parent item" is 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" intead 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 in 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 a 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.
Use styles to improve the look of my pages
- Click the "Styles" drop-down menu.
- The options in this menu change based on which content is selected, so be sure to place your cursor on or in the content you'd like to change.
- The names aren't intuitive, so it may require some guessing and checking.
- Some of the common styles you see around the website are:
- The gold bubbles for lists, such as this one. Create a normal bulleted list, click or highlight the content, and choose "ul.circle-list"
- Letter icons for email addresses. Create a normal email address link. For example email@example.com becomes firstname.lastname@example.org when the style "a.mail-link" is chosen.
- Arrows for links. Selecting "a.gray-arrow-gold-link" turns a normal hyperlink such as https://www.csustan.edu into: https://www.csustan.edu
- There are lots of other options, and you are encouraged to experiment and try them out!
Use templates to create the layout I need
- 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.
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.
- 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.
- 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
Embed YouTube Videos
In order to embed YouTube videos, you will first need to upload the video, see instructions on how to upload a video on YouTube. If the video is already on YouTube, start with Step I.
Note: If you want to add the video with full width from edge to edge (710px), you'll be able to do this yourself. If you want the video to sit left or right, you might just want to send email@example.com the YouTube link and we will embed it for you.
Accessibility check: Creating Accessible Videos
- Get the YouTube code to embed the video
- Upload/Find the YouTube video you wish to post (Accessibility check: make sure the video has cc or subtitles, YouTube has built-in system that helps transcribe uploaded videos.)
- Click on the "Share" button below the video title
- Choose "Embed"
- Click "SHOW MORE" immediately below the embed code
- Video size: Custom size: enter "X" pixels for the first box and the height will auto set (710 if it's going to go full width, 350 if it's going to get aligned left or right)
- Leave the YouTube page open, and open the webpage (where the video will be posted) in a new window/tab
- Open a "New Draft"
- Click on the "Source" button to see the HTML source code
- Copy the entire code (it shows up on a single line) go the following website and paste
- Make sure the setting "Output:" is set to "Code fragment"
- Click on the button "Clean"
- Now the code will be organized so you can make some sense of it.
- Go to the YouTube tab/window and copy the embed code
- Go to the DirtyMarkup site and locate text where you would like to place the video
- Paste the code with what you copied from YouTube
- Copy the entire page code again
- Go to the webpage in Drupal, make sure it's still in "source" mode and replace the old code.
- Go through usual process of saving and sending for review