Drupal

 

This page is designed to explain a few tricks Southern Miss webmasters may want to use on their department sites, and assumes some prior knowledge of how our Drupal Content Management System works. 

New users who aren't sure where to begin should contact University Communications to fill out a work order, download a training document, or view training videos on YouTube.

 

Cheat Sheets

Click the image to download a PDF cheat sheet for the Create Page function of Drupal or to learn how to style text using Full HTML mode.

Create Page

 

Full HTML Styling

 

Guide to Styling in Drupal 

Create a button.
Buttons are nice to use when you have a call-to-action: "Apply Now" or "Contact Us" and they're easy to make. Decide where you want the button to be, and copy a few words of the text directly above where you want the button.

1. Go into edit mode, Full HTML, and type the words you want on the button.

2. Highlight the words and use the link button to add the web address.

3. Highlight the link, and click the Insert/Edit Attributes button. On the Advanced Tab, change Class to Add Value, which will allow you to type in the box.

4. Type black button vt-p and save. If you want a red button, type red button vt-p.
Make some text big. Or red. Or big and red.

This is good if you have an announcement you really need people to pay attention to, like a canceled event or an important deadline. You should use it sparingly, and never use more than one color per page. 

1. Highlight the text you want to change in edit mode, full HTML. Click the Insert/Edit Attributes button.

2. For red text, right before your text, copy and paste this: 

<p style="color:red">

Right after your text, copy and paste this: 

</p>

3. For big text, right before your text, copy and paste this:

<p style="font-size:18px">

Right after your text, copy and paste this: 

</font> 

Red can be replaced with other simple colors, and 18px can be increased or decreased as you like. (To see a list of color names you can use, click here.)

4. To use more than one tag, use semicolons in between: 

<p style="font-size:18px; color:red"> 

Add a sidebar.
Sidebars add visual interest to your page, and also make the page easier to navigate on a mobile phone by reducing the width of the body area.

1. To create your sidebar, click "Create HTML block" in your menu. Name your sidebar whatever you want since its title won't show. If you want a title to appear in a big, gray, rounded rectangle like they do on your homepage, add a display title. If not, just title the page in the HTML content box with Heading 2 applied.

2. HTML Content is your body text. Add away.

3. Add a picture if you like. You only get one with a sidebar. (If you want more than one, there's another tutorial for that.)

4. In the Block Placement Tag box, enter a one-word name for this sidebar. You'll need it later when you want to add it to pages.

5. Scroll down to the Block Placement Tags. This is where you decide where you want your sidebar to be. Generally, you'll want it on the right, so check Right Side Promo 1. (The other promos are for putting a sidebar on the left, putting content in the three columns on your homepage, or putting a sidebar down below your contact information on every page.)

6. Save.

7. Go to the page(s) where you want the sidebar to appear. In edit mode, scroll down to the Block Placement Tag box below the attachment uploads, and type in the one-word name of the sidebar, then save. 
Add more than one picture to a sidebar.
You can't add more than one picture to a sidebar using the HTML block. But there is another way.

1. Create a regular page with the images and text you want to appear in the sidebar. (For images, you'll want to insert them using the landscape_image_left_200px option. Go to Source Code, put your cursor anywhere in the code, and copy all the text.) You can now save and close that page.

2. Create an HTML block as indicated above, give it a title, and then go into Source Code. Paste the code you copied. Make sure you check the appropriate Block Placement Tag and save.
Fix oddly formatted text.

Sometimes when you save a page, a part of your text will appear in a strange format. If you can't fix it by selecting the text and choosing Paragraph from the drop-down menu, there has likely been a glitch and some rogue code has been inserted. 

1. To remove stray formatting, in edit mode, go into source code. Stray formatting will either appear as a <pre> tag or a long tag that starts with <span style=>. There is no reason for either of these tags to be in your text, so search for <pre> or span and delete the entire tag. Your text should then go back to paragraph style and you'll be able to edit it again.

Make your pictures clickable.

People love to click, and have become accustomed to being able to click on pictures as well as hyperlinks. When it's appropriate (like when you have somewhere to send people), highlight your image after you've inserted it and hyperlink it with the hyperlink button just like you would text.

Rearrange your menu.
It's much easier just to rearrange your menu than to try to deal with weighting everything appropriately so it comes out right.

1. From your home page, click Menus, and then the name of your department.

2. Grab the little plus signs to drag the menu items wherever you want them to go. Dragging them up and down changes the order of the pages, dragging them to the right turns them into a subpage of the page above, and dragging them to the left promotes them from a sub-page to a regular page. Make sure to save at the bottom of the page once you're done or you will lose all your changes.

3. IMPORTANT: Once you give a page subpages, the original page will no longer be accessible from your website. If you click on it in the menu, it'll just show you a list of the subpages and will not take you to the original page. This creates a problem because the original page is still searchable by Google, and if people land on it by following a link, they'll see a blank page with just a title. If you plan to have a parent page, use the "Add Item" link in the menu editing options. For the path, just type node. Add a title, and a description if you want, and click save. You can then drag and drop other menu items into the newly created parent. 

Create a menu item that links to an outside page.
1. From your home page, click Menus, and then the name of your department.

2. At the top, click Add Item.

3. In the path box, type in the web address of the page that you want to link to, then give it a title. Make sure the box for enabled is checked. The parent item box should be the name of your department if you want the link to be in your main menu. If you want to make the new link a sub-page of one of your existing pages, be aware that the original page will then no longer be visible from your website. If you click on it in the menu, it will just show you its subpages and will not redirect to the page itself.
Change the web slides on your home page.
1. If you have the software to do it and want to create your own webslides, the dimensions are 9.875" x 4.7361". Remember that the bottom right of the slide will be obscured by thumbnails of your other slides, so you'll want to leave the right half of the slide information free at least a couple inches from the bottom. Save the slide as a .png or a .jpg.

2. If you don't have the software or you lack the inclination, University Communications can make slides for you.

3. From your homepage, click Create Image for Section Slide Show. Give your slide a descriptive title. Upload your featured image, and copy/paste the title into each of three boxes. (If you want to create a separate square image to act as a thumbnail, you can upload that as well, but most people don't bother.)

4. The sort order will determine the order of the five slides, but only if you have only five published slides and each one has a number. If you have an old slide with a 2 as its sort order, and you try to make a new slide with a 2, Drupal will pick one to serve as 2 and promote or demote the other as it likes. The only way to determine the sort order yourself is to have only 5 slides and number each one distinctly. For this reason, you may want to edit a slide when you're done displaying it and turn it into a new one by giving it a new title and new image instead of creating new ones and wondering which old ones Drupal will decide to replace.

5. Save and you're done. (Note: if you need to make any edits to the image, you'll need to save the new version with a slightly different title—otherwise when you try to upload it over the old one, Drupal will think it already has that one and it won't update it to the new image.)
Add live links to your web slides.
People like to click on things and will click on your webslides if you give them half a chance. If you have some information you'd like to send them to, you can add a link to your slides.

1. Open the webslide you want to add a link to in edit mode. (If you need to find the slide, from your homepage, click All Content at the top. Change the Node Type in the drop down box to Image for Section Slide Show and click the Apply button. This will show you all your webslides. Choose the appropriate one and click Edit.)

2. Scroll down to links. What you type in the box should look like this: {top: 50, left: 50, link: "http://xxxxxxxx.com"}Text Here. You can play with the numbers to move the links around to where you want them, but as a rule of thumb, 50-50 puts your link in the upper left, 50-500 in the upper right, and 280-50 in the lower left. You'll never want to use the lower right because that's where the thumbnails go. Your text will be yellow—plain yellow if it's on a dark background and yellow in a gray semi-transparent box if it's on a light background.

Make better attachment links.
No matter how nicely you name an attachment when you save it (Suspension Clearance Form), when you upload it to Drupal and insert it, it will look like this: suspension_clearance_form.pdf. No need for people to see the internal workings of Drupal, and also links are harder for search engines to see when they're like that.

1. To make your links pretty, type the name you want and then insert the link next to it. Highlight the link, right click on it, and Copy Link Address. Press delete to get rid of it. Underline the nice name you typed, click the hyperlink button, paste the link into the box and apply.

2. As a courtesy, it's nice to tell people what form the attachment is in by putting a (PDF) or (DOCX) after the name.
Keep your text from running right to the edge of the page.
1. In edit mode, click source code to bring you to the coding that goes into your page.

2. Copy and paste the following code at the very beginning of your source code:

<style type="text/css">
p {padding:0 20px 0 0}
</style> 

3. Click save to see how it looks. You can change the 20px to 10px if you want less space on the right, or to 30px or more if you want more space.

Create an expanding list like this one.
Expanding lists are good for FAQs, or any time your audience might need to scan through quickly to find exactly what they need.

1. Type your list into the Full HTML edit box, using a single return to separate questions from answers and answers from the next question. (IMPORTANT: If any of your answers contain more than one paragraph, you will have to separate the paragraphs by pressing shift+return twice instead of return once.)

2. Once you have your list, highlight the first question and click the Insert/Edit Attributes icon (This should be the last icon in your edit box header and it looks like a hand holding a piece of paper.)

3. In the Attributes tab on the box that pops up, go to Class and choose (value) from the drop-down menu. This will allow you to type in the box. Type in "expandable-heading" (no quotes). Click the insert button. (You may have to make your box larger to see the insert button.)

4. Highlight your first answer and do the exact same thing except in the class box type "hide_element" (no quotes). Note that the header uses a hyphen and the hidden element uses an underscore.

5. Repeat for all items on the list. 
Add Facebook and Twitter icons to your sidebar.
1. Click "Create HTML Block" from your edit screen. Title your page "Connect with Us - Name of Department" and use "Connect with Us" as your display title. Use "default" for your block placement tag so your icons will appear in the sidebar of every page of your site.

2. Go to your source code, and copy and paste this text:

<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0"><tbody><tr>

<td><a href="http://www.facebook.com/YourFacebookName"><img class="noborder" style="float: left; padding: 0px 0px 10px 7px;" src="/sites/all/themes/fusion/usm/imgs/facebook.jpg" alt="Facebook icon" /></a></td>

<td><a href="http://twitter.com/#!/YourTwitterName"><img class="noborder" style="float: left; padding: 0px 0px 10px 7px;" src="/sites/all/themes/fusion/usm/imgs/twitter.jpg" alt="Twitter icon" /></a></td>

</tr></tbody></table>

3. Insert your Facebook and Twitter names into the code (ex: USMArtsLetters). If you only want Facebook, remove the third paragraph from the above code, and if you only want Twitter, remove the second paragraph.

4. Scroll down and check the box marked "Section Home Page Left Side Bar Promo 2" and click save.

Check for broken links automatically.
Chrome, Firefox, and Safari all have excellent free link checkers. When you install the program, it will create a little button in your browser bar. Click the button on any page of your website, and the linkchecker will tell you which links are working and which are broken.

Chrome Plugin
Firefox Plugin
Safari Plugin
Insert a table.
1. Click the insert table button. 

2. Type in the number of columns and rows you want to start with. (If you need to add or delete columns or rows later on, insert your cursor into any cell, and use the insert or delete columns or rows button. Download the Styling in Full HTML cheat sheet for more info.)

3. Drupal defaults to a drab gray for tables. If you want to change the color of the cells and their borders, click the Advanced tab before clicking Insert.

4. You can either type in the hex code for the color you want, preceded by a hashtag (#FFFFFF is white, for example) for the border color and background color, or you can click the little box next to the text box to choose a color from a chart. Find hex codes. If you want the table to appear transparent on the page, enter hex code #f7f7f7 in both border and background boxes. This will match Drupal's default page color.

5. Click insert. You can position the cursor in any box and begin typing.
Style your table after it's been created.
1. To prevent your table from running off the right side of the page, go into Source Code. At the beginning of your table, you will see <table border="0">. Change that to <table style="width: 680px;">. (If you have a sidebar on the page, you will want to change the table size to 450px instead of 680px.)

 2. If you want all your columns to be the same width, add that to your table style as well, like this: <table style="width: 680px; table-layout: fixed;">.

3. If you want to leave a little space around the text in your cells, add padding to your table style: <table style="padding: 10px; width: 680px; table-layout: fixed;">.

4. To change the color of a cell, a row, or the whole table, make sure you are in Full HTML mode and that your cursor in the cell you want to change. Click the Table Cell Properties button and click the Advanced tab. Type the hex codes for the color you want in the border and background color boxes, or choose a color from a color chart by clicking the little box next to the text box. You can then choose to apply that to just the one cell your cursor is in, the whole row, or all the cells in the table.

5. If you want to change the color of the text (for example if you choose a dark background and need white text), in the Advanced tab under Table Cell Properties, type color: #ffffff or any other hex code. You can type the HTML names of common colors instead of hex codes if that's easier—here's Wikipedia's list of HTML Color Names.
Make columns.
1. Drupal doesn't have a built-in way to make columns, but you can fake it by inserting a table.

2. Insert a table with two columns and one row, and make both border and background color #f7f7f7, the same color as the page background in Drupal. 

3. Go into Source Code and replace  <table border="0"> with <table style="width: 680px; table-layout: fixed;">.

3. Add your content to the table cells. If you need to add padding, put your cursor in one of the table cells and click the Add/Edit Attributes button. Add padding: 10px; to the style box and apply to all cells in table. (If you only want padding on one side, you can use padding-leftpadding-rightpadding-top or padding-bottom instead.
Change your front page news blocks.
The three blocks under your front page slide show are the most valuable real estate you have. Use them to your advantage!

1. From your front page, go to All Content, then look for HTML Block under Node Type. Click apply. You should see your three front page blocks. (If you don’t see them, try looking under Link Block.)

2. Click edit to edit the one you want to change. You only get one picture, but you can have multiple headings. To make a second heading, change the text you want to be the heading from Paragraph to Heading 3. (Only in an HTML block will Heading 3 act like this and give you white text in a grey button. But it’s handy.)

3. Don’t forget to make your image clickable (assuming you have somewhere you want to direct people to) by highlighting the image and adding a hyperlink.
Add an administrator to your site.
If you want someone besides yourself to have access to your website and be able to make changes, follow these instructions:

1. Before you add someone as an administrator, s/he must log in to the system at usm.edu/user with his/her SOAR credentials.

2. When you’re logged into Drupal, go down your list of links (Create Event, etc.) to the third link from the bottom which tells you how many members you currently have. Click that link.

3. Click Add Member at the top, and enter wEMPLID in the box. 

 

Tips on Writing Web Content

➤ Break Up Your Content

If you have a wall of text, people will either go onto something else, or make a mental note that they really need to read that just as soon as they check Facebook, send a couple texts, and get a cup of coffee. By then, you've lost them.

Use subtitles to break up text into manageable pieces, making sure to use the heading functions rather than bold or underlined text. This will allow people to scan the page quickly and zero in on the information they're looking for. Keep your paragraphs to three to four sentences each.

 

➤ Course Descriptions: Know Your Audience

Your course descriptions can be a valuable recruiting tool, as they show off what students who choose your major will actually be studying.

Course descriptions in the Bulletin can be bewildering, and don’t tell students much about what the classes are actually about. (See “Design and manipulation of digital imagery for print and electronic applications, raster image software utilized.” If you were in high school or just starting college, would you know that’s the class you take to learn mad Photoshop skills?) 

While the goal of many classes in Arts & Letters is to develop students’ critical thinking skills and rhetorical strategies, kids don’t grow up thinking, “When I’m an adult, I’m going to have excellent critical thinking skills applicable to a variety of careers!” 

They want to go on digs and find ancient artifacts, study Spanish in Spain, help the disenfranchised, argue cases in front of the Supreme Court, have a gallery show, learn modern dance. Talking about specific things your classes will cover is more likely to retain their interest than talking about theories using terms they’ll only come to understand after they’ve taken the class.

 

➤ Provide Useful Content

What do you have that students want? Course descriptions. Event dates and times. The academic calendar. Information on advising. Last day to drop a class. A link to the bulletin. Give your majors those things to accustom them to using their department website as a reference, and they’ll be there when you have something you need them to read or do.

 

➤ Sidebars

Sidebars break up the page, and allow you to call attention to things that are new, critical, or extra exciting. Sidebars are a great place to put: 

  • department news
  • helpful links to other departments or pages (academic calendar, admissions, financial aid, etc.)
  • social media links (Facebook, Twitter, Instagram, Snapchat, etc.)
  • teasers for other pages on your site

 

➤ Use Simple, Friendly Language

There are millions of pages on the world wide web. How do you keep students on yours?

Talk to them.

Instead of saying, "Students must download form and procure appropriate signatures," try, "Download the fillable PDF here, fill it out and print a copy. Make an appointment to see an advisor by calling the department office at 601.555.1212. Your advisor will go over the form with you and make sure you have all the necessary documentation. Once your advisor has signed off on the form, you will need to take it to the department office for review by the Chair.

 

➤ Call Your Users to Action

If you want students to join a student organization, invite them. Give them the date, time, and location of the next meeting or an email address of someone to contact. If you give them a contact, let them know what emailing that person will result in: “We always welcome new members. Please email clubrep@eagles.usm.ed and we’ll send you the date and time of our next meeting.” 

Want people to consider majoring in your subject? Let them know how your department handles advisement. Are advisors available to talk to major-curious students? Walk-ins okay or do you need an appointment? Who should you email or call to get an appointment? If you want them to come with form in hand, provide them a link to Changing Your Major where they can download it.

Want people to attend an event? Give them a link to the ticket office, to a map if it’s off campus, or to an RSVP form you’ve set up.

 

➤ Check for Broken Links

We are judged all over the world by our website. Keep it professional by making sure your links work.

Links break. Happens all the time. Any time you link to someone else’s page, you run the risk of the address changing and your link breaking. Fortunately, there’s an easy way to check.

Download a link checker for your preferred browser (see links in Guide to Drupal Styling above). Then you can have a student worker go through your site page by page. They click the link checker button in the top bar of the browser, and the program will highlight all the broken links in red so you can fix them.

 

➤ Make Reusable Pages

Instead of making new pages every semester, like Fall 2016 Course Descriptions, Spring 2017 Course Descriptions, etc., make a master page called Course Descriptions and change the content every semester. (If you want to archive the content, create another page called Course Description Archives, and copy the old content to that page every semester before you change it.)

This way, the web address for your course descriptions stays the same, so you can link to it from other pages on your website and add it to printed materials. Also, this makes it possible for the college to link to your descriptions in our promotions and letters to prospective students, and for the university to include a link in choose.usm.edu. (And you’ll never need to change the link in your menu!)

 

➤ Hyperlink EVERYTHING

The beauty of the web is that it's not linear, and users can hop from page to page gathering information. This works best if you hyperlink. If you include an email address, hyperlink it. (Highlight the address, click the link button, and in the Link URL box, type: mailto:joan.smith@usm.edu. When the user clicks on it, his/her email client will open to a new email with the address already filled out. Hyperlink phone numbers so they can be quick-dialed from a mobile phone. (tel:+601.555.1212)

If you mention a university office, link to their website. Faculty book? Link to where the book can be purchased. Link faculty names to their profiles so users can contact them.

Google's search function picks up on links more than it does on regular text, so make sure your links are descriptive. Instead of saying "Download form here," try "Download English B.A. Degree Plan." This makes it more likely that Google will find your page when someone googles "english degree plan."

 

➤ Make Better Attachment Links

No matter how nicely you name an attachment when you save it (Suspension Clearance Form), when you upload it to Drupal and insert it, it will look like this: suspension_clearance_form.pdf. No need for people to see the internal workings of Drupal, and also links are harder for search engines to see when they’re like that.

To make your links pretty, type the name you want and then insert the link next to it. Highlight the link, right click on it, and Copy Link Address. Press delete to get rid of it. Select the nice name you typed, click the hyperlink button, paste the link into the box and apply.

As a courtesy, it’s nice to tell people what form the attachment is in and how many pages they’ll be downloading by putting a (6-page PDF) or (12-page DOCX) after the name.

 

➤ PDFs Are Better than Documents (Usually) and HTML Is Better than Either

If your document does not require the user to make changes to it, it's better to make it into a PDF before putting it online. Most browsers will open a PDF right in the browser window, where as a Word document will require Word opening before the document can be viewed. Depending upon how old the user's computer is, Word can take several minutes to open, whereas PDFs take mere seconds. (Word gives you the option of saving your document as a PDF, so it's easy to save one copy in DOC format so you can revise it and one as a PDF for the web.

If your document just contains information to be read online and will not need to be printed, it's much better to create a page and put the text right into the browser. This allows search engines to find it.

 

➤ Design Matters

We are living in an increasingly visual world, and prospective students, job applicants, and visitors from all over the world who are curious about Southern Miss will be looking at your website. We want to appear professional, proud of what we do, up to date, and up to the task of being a research university. 

Drupal doesn't spellcheck in Full HTML mode, but if you switch to Source Code view, misspellings will be underlined. Use a linkchecker to ferret out and fix broken links. Use high quality pictures and graphics to break up the text when you can—both are available from the A&L PR office.

Keep your main menu to a reasonable length so it's clear to your users where to go. If you have content that is student- or prospective student-specific, put that content on pages in a submenu under "Undergraduate" because that'll be the first thing they click on. If you have internal content, like tenure and promotion materials, bylaws, etc., considering stashing it all in subppages under a Faculty/Staff Resources menu item. 

 

➤ Ask for Help If You Need It

Our Drupal has mysterious and sometimes frustrating ways, and none of the people maintaining department websites are web designers. If you need help, please contact A&L Web Designer Danielle Sypher-Haley. Danielle will be happy to:

  • make webslides for your front page
  • fix a page on your website when the formatting has gone haywire
  • create a custom page on your site 
  • meet with you and demonstrate any of the above Drupal tricks  
  • talk with you about your website, where you want it to go and the challenges you're facing

College Menu Standardization 

Each Arts & Letters department is unique, and each of websites has different features. That’s great. But it can be hard for students who are trying to check out various majors. If all A&L departments standardize the first few menu items that we all have in common, it’ll not only be easier for students to find information, but it will make the transition to Drupal 8 easier.

By all means, though, put your unique content on your site as well. If you have fantastic Tuesday Tidbits, awesome photo galleries, news for alumni, a giving page, etc. feature them below the standardized top of the menu. This is not an attempt to make all departments look and feel the same. Our only intention is to make information easier to find, both for students and for administrators and staff in other departments and colleges who may be trying to direct students to your stuff.

Download A&L Menu Plan