Embed Size (px)
Citation preview
Drupal Training SeriesADVANCED
Provided by University Communications & MarketingWeb Publisher: 910-521-6820
http://uncp.edu/UCM
v. 1.0
Topics Covered• Commonly Used Pixel Sizes• Promos• Spotlights• Webforms• Tables
Provided by University Communications & MarketingWeb Publisher: 910-521-6820
http://uncp.edu/UCM
Commonly Used Pixel SizesFeature Image700px by 300px
Headshot Photos100px by 125px
Main Content Area460px wide
First Sidebar200px wide
Second Sidebar220px wide
Promo – Image & TextImage automatically shrinks to 200px wide
What’s a Promo?A Promo is a great way to draw attention to special content.
Let’s look at some examples from the current site and the basic elements.
From there, we’ll look at actually creating our own.
Provided by University Communications & MarketingWeb Publisher: 910-521-6820
http://uncp.edu/UCM
Promo - SubsectionUse within content section (center column) to display a topic with a thumbnail image, intro text and links.
Example: Opportunities, Programs & Resources on Academics homepage (www.uncp.edu/academics)
Example: Costs & Paying for College section on Admissions homepage (www.uncp.edu/admissions-aid)
Location: content column (center column)
Class required: promo-subsection
Promo – Subsection (continued)Required Format:
Bulleted list of 2 to 3 items followed by a Numbered list of up to 5 items:
• Thumbnail Image 110px by 110px
• Intro text. Ideally one or two sentences.
• Link1. Link 12. Link 23. Link 3
Promo – Image OnlyUse for a full column width image with or without a link.
Example: “How Brave Are You” button on Undergraduate Admissions homepage (www.uncp.edu/admissions-aid/undergraduate-admissions)
Locations:Sidebar First (left column) and Sidebar Second (right column)
Note: Width is set to 100% of the column – suggest 200 pixels for Sidebar Left and 220 pixels for Sidebar Right
Class required: promo-imageonly
Required Format: Image with or without link
Promo – Image & TextUse for sidebar sections including any combination of thumbnail, intro text and link.
Example: “Come to an Open House” on Undergraduate Admissions page (www.uncp.edu/admissions-aid/undergraduate-admissions)
Locations:Sidebar First (left column) and Sidebar Second (right column)
Class required: promo-image
Required Format:
Bulleted list of 2 to 3 items:• Thumbnail Image 110px by 110px• Intro text. Ideally one or two
sentences.• Link
Promo – LinksUse to display a list of links.
Example: School of Business sub-navigation pages (Sidebar Second)
Locations:Sidebar First (left column) and Sidebar Second (right column)
Class required: promo-links
Required format: Bulleted list of links, no length requirement or restriction
Promo – ButtonUse to display a button with three choices of gradient background colors
Example:“Apply to UNCP” button on Undergraduate Admissions homepage (www.uncp.edu/admissions-aid/undergraduate-admissions)
Locations:Sidebar First (left column) and Sidebar Second (right column)
Class required: promo-button-gray, promo-button-blue, promo-button-yellow
NOTE: the CSS class selected will determine the gradient styling.
Required Format:A Link. That’s it.
Creating a Promo1. From the Drupal toolbar, go to Structure >
Blocks > Add Box.2. Machine Name: Use lowercase letters,
numbers and underscores only.3. Box Description: Follow the pattern to
make it distinguishable from other blocks.
The Pattern:Promo - PromoType - Department - Descriptor
Example:Promo - Image - UCM - Pembroke Day
Note:Use a department acronym (i.e. UCM for University Communications and Marketing).
Box Title: Will be displayed as an h2 element (can also be blank or hidden later).
Creating a Promo (continued)4. Box Body: This should contain the
contents of the promo being added. These may need specific structure (bulleted items) in order to be styled correctly (see Promo Formats above for more info).
5. Click Save. The box is now created and will now be added to the disabled list of blocks on the site.
6. The box now needs to be placed in the correct location.
7. From the Drupal toolbar, go to Structure > Blocks.
Creating a Promo (Continued)
8. From the browser’s menu, select Edit > Find or press Ctrl + F (Windows) / Command + F (Mac) on the keyboard to find the block. Using the pattern created above (Promo - PromoType - Descriptor) to go directly to the line the block is on.
9. Click “configure” for the block.
Creating a Promo (Continued)11. Click the “Advanced Settings” tab.12. Add the appropriate class
depending on the type of promo desired (see Promo Formats above for “Class required” information).
13. Under “Region Settings,” find the dropdown for “VPM Theme.”
14. Select the region in which the box is to appear. The three regions are:• Sidebar First (left column)• Content (center column)• Sidebar Second (right column)
15. At the bottom of the page, under “Visibility Settings”, select the “Pages” tab.
16. Under “Show block on specific pages”
17. Select “Only the listed pages” to whitelist pages.
Creating a Promo (Continued)
18. In the box below, add the node or paths/URLs of the pages you are whitelisting. Exclude the base URL and leading slash (“www.uncp.edu/”). Each entry should be on a separate line. Examples:
• Node: node/17340• Add to landing page:
about-uncp/administration/departments/university-communications-marketing• Add to all pages within site (note addition of /*):
about-uncp/administration/departments/university-communications-marketing/*19. Click “Save Block.”
Adding a Promo to Pages1. From the Drupal toolbar, go to Structure > Blocks.2. From the browser’s menu, select Edit > Find or press Ctrl + F (Windows) / Command
+ F (Mac) on the keyboard to find the block. Using the pattern created above (Promo - PromoType - Descriptor) to go directly to the line the block is on.
3. Click “configure” for the block.4. The first tab is “Pages”. You should select the second option to pick which pages you
want the block to show up on (whitelist).5. In the box below, add the node or paths/URLs of the pages you are whitelisting.
Exclude the base URL and leading slash (“www.uncp.edu/”). Each entry should be on a separate line. Examples:
• Node: node/17340• Add to landing page:
about-uncp/administration/departments/university-communications-marketing• Add to all pages within site (note addition of /*):
about-uncp/administration/departments/university-communications-marketing/*6. Click “Save Block.”
Deleting a Promo1. Please be careful to delete the appropriate promo.2. From the Drupal toolbar, go to Structure > Blocks.3. From the browser’s menu, select Edit > Find or press Ctrl + F (Windows) / Command
+ F (Mac) on the keyboard to search for the Box Description. 4. Click the “delete” button. Click “Delete” on the next page.
Using Existing Promos1. To add an existing promo to your website, from the Drupal toolbar, go to Structure >
Blocks.2. From the browser’s menu, select Edit > Find or press Ctrl + F (Windows) / Command
+ F (Mac) on the keyboard to search for the Box Description.3. Click the “configure” link in the same row as the block.4. Under “Visibility Settings” and “Pages” add the node or paths/URLs to the box. The
new entry will need to be on a separate line.
Creating a SpotlightEach site can have multiple spotlights that will be randomly selected and displayed throughout that site.
Creating a Spotlight (Continued)1. To create a Spotlight, from the Drupal
toolbar, hover over Content and Add Content and click on Spotlights.
2. In the Title field, enter the name of the individual.
3. From the Type drop down menu, select the type of spotlight. Options are Alumni, Faculty and Student.• Based on the option selected, a
series of fields are displayed. • If the “None” option is selected,
information should be entered in the Body field.
Creating a Spotlight (Continued)
Alumni Faculty Student
Creating a Spotlight (Continued)4. Under Image, click the Browse button
to upload an image of the individual. The image should be 100 pixels in width.
5. In the Body field, enter the desired information.
6. Use the H2 tag if including section headings.7. Suggestions sections:
• Biography• Why did you choose to attend UNCP?• What do you like best about UNCP?• What do you enjoy most about
teaching at UNCP?• Additional Comments
8. Select the Site Sections Taxonomy9. Click the Save button.
Creating a Spotlight (Continued)10. (If necessary) To add the dynamic block/promo for the spotlight, so it will appear in
the first column, contact the University Web Publisher at [email protected].
Note: Promos for spotlights are enabled for the “admission-aid,” “academics,” “about-uncp” and “student-life” sections of the site (any sites with these directories in the URL are already setup to display the spotlights).
Creating a Webform
Example for Testing Purposes: www.uncp.edu/node/19714
Creating a Webform (Continued)1. Either open an existing page on
which you wish to add a form or create a new basic page.
2. Once opened or created/saved and published, click the Webform tab.
3. Beneath the Webform tab you will see three buttons: Form components, E-mails, and Form settings.
4. Let’s go through those sections individually.
Webform – Form Components1. Under label, enter the name of
the label. Example: First Name2. Select the type of field from the
drop-down menu. 3. Keep in mind there’s a whole
extra menu coming to add details and flesh out each field.
4. Field options are:• Date – adds date picker
• For the Start Date/End Date, enter “+0 years” to display the current year. Start Date: entering “-2 years” will display the two previous years. End Date: entering “+2 years” displays two years into the future.
• E-mail – requires valid email address• Fieldset – multiple fields• File – allows user to upload a file• Grid – grid arrangement of questions (left) and options/answers (top)• Hidden – the hidden field does not show on the page. Therefore the visitor can't
type anything into a hidden field. Use this input field to store information to be submitted with the form that you want to be invisible to users.
Webform – Form Components (Cont.)• Markup – adds html such as section headings• Number – only allows numbers – no characters or symbols• Page break• Select options – allows user to select multiple options
• To allow the user to select multiple options, click the “Multiple” check box.• Select Listbox if want options displayed as a select list box instead of radio
buttons or checkboxes• Textarea – allows user to enter long answer• Textfield – allows user to enter short answer. This is the most commonly used field.• Time – allows user to select time
• Select time-format and minute increments5. Check the Mandatory button if the field will require an answer. It will add a red
asterisk (*) to the end of the field.6. Click the Add button.
Webform – Form Components (Cont.)
7. Fill in any information that applies.8. Click the Save Component button.9. If you are using the Selection Options
field type, there will be a slightly different screen. (next slide)
Webform – Form Components (Cont.)
10. Under Options, you need to provide a Key-value pair.
11. Key-value pair format:• Safe_key|Some readable option• One key-value pair per line.• To enter the vertical divider (the pipe
character), press the shift key and the key above the Enter/Return key.
Webform – Emails1. Enter the email address
receiving the submissions.2. Click the Add button.3. Under Email Header Details, set:• Email Subject
• This is the text that will appear in the subject line of the email
• I suggest selecting Custom and entering a custom subject line for the email
• Email from Address• This will display the “from”
email address• If the webform has an Email
field, select Component > Email. This will display the email of the individual submitting the form.
Webform – Emails (Cont.)• E-mail from Name
• This will display the name of the person submitting the form
• If the webform has a name field, select Component > Name. This will display the email of the individual submitting the form.
4. Click the Save e-mail settings button
5. Repeat this step if you wish for multiple emails to receive the form submission.
6. Click the Edit button to edit Email settings.
Webform – Emails (Cont.)What if I want the person who fills out a form to receive a confirmation email?
1. Instead of entering another address, select Component Value and the field name where you’ve collected the person’s email address. In this example it’s simply Email.
2. Click Add.3. Set a Custom Subject like in the
example.4. Set a Custom From Email Address,
from yourself or a your office.5. Set a Custom Email From Name.6. One last thing you’ll want to do is
change the Email Template (see next slide)
Webform – Emails (Cont.)7. Usually, we go with the Default
Template. For these auto-reply emails, it’s best to add a little something extra.
8. Under E-mail Template, choose Custom Template.
9. Click in the field and press enter two times to move the information down.
10. In the new first line, enter the message you want to appear in the message.
11. I suggest separating the message from the submission information with five dashes on a separate line.
12. Click the Save e-mail settings button.
Webform – Form Settings1. Click the Form Settings button.2. In the Confirmation Message box,
enter the confirmation message the user will receive when the form is submitted.
• Suggested text: Thank you! Your information has been submitted.
3. Under Redirection Location, enter a Custom URL if you wish for the user to be redirected to a designated page when the Submit button is selected.
4. Click Save Configuration.
Cascading Style Sheets• Cascading Style Sheets (CSS) are how we achieve a consistent look across a website.• Before CSS was popular you added extra code to each tag in a page to style an object.• Now sites are written with special tags naming each object in a page. Every page
checks the CSS file to see how to style the contents and then displays it.• Think of CSS like a tree. Whatever styles you use for the tree trunk will apply to all
the branches. You can make changes on a branch by branch basis. So we get something like this:
• Text on my website (Times New Roman, 10pt, black, regular)• Paragraph (no changes)• Headline 2 (Times New Roman, 16pt, black, bold)• Headline 3 (Times New Roman, 14pt, black, bold)
• Headline 3 on my News Page (Times New Roman, 14pt, gold, bold)
If this is already setup for me in Drupal, why do I need to know how it works?
Because to create Tables, we need to trick Drupal into styling them the way we want and not the way it’s already coded for.
Tables1. Tables are a way to organize data in a
cleaner fashion.2. Using Tables in a complex website built
in Drupal is a challenge.3. We have to work around the website’s
CSS to get what we want.4. Click the Insert/Edit Table button on the
toolbar.5. You will get a window like this one.6. It looks like you have all kinds of cool
options.7. The site is just teasing you because
some of these boxes don’t work.8. The editor creates the code, then upon
saving Drupal cleans the code to make sure it works in HTML5. When it does that, it throws out some of your work.
9. Yes, this is super annoying.
Tables - Continued10. This is more accurate11. Columns and Rows work as advertised.12. Width and Height need to be expressed
in pixels. Example: 460px13. If you don’t touch Width or Height, it
defaults to 100% of the width of the column and height is automatic based on what’s in the table.
14. Any time you want to change one of these four settings, click inside the table somewhere and click the Insert/Edit Table button on the tool bar.
Tables - Continued
15. I’ve created a 2x2 table and typed “Text” into each box.16. It’s going to show up on the page like this:
17. The CSS built into the site template automatically puts a line under each row. You may or may not like that look. We have options.
Tables - Continued
18. Let’s build a Contact Page. I removed the “Text” from the first cell and put in a headshot. Yep, that’s ugly. We can fix it though!
19. I’ll go back to the editing screen and add some basic information.
Tables - Continued18. Let’s build a Contact Page. I removed the “Text” from the first cell and put in a
headshot. Yep, that’s ugly. We can fix it though!19. I’ll go back to the editing screen and add some basic information.
20. Getting warmer, but look how the picture aligns to the top of it’s cell, but my text in the same row ends up at the bottom of the cell. It didn’t look that bad in the editing screen.
Tables - Continued21. Click into the cell where your photo is.22. Click the Table Cell Properties button.23. This box will let you set the Width, so let’s
set it to the same width as the photo at 125px.
24. Click the Advanced tab.25. This is where the magic happens.26. You’ll see where it already put the width
into the Style box. 27. Any CSS we put in this box should be at the
very bottom of the long cascading stack of styles, which means Drupal won’t ignore it and do it’s own thing.
Tables - Continued28. I’m going to add another bit of CSS to
align things in this row to the top of the cells.
29. CSS follows a specific format.30. Don’t forget the ; after every property.31. Background Color and Border Color
should work fine.32. I’ve tried adding CSS to the Advanced
tab for the whole table and that doesn’t seem to work, but individual cells and rows look like they do.
33. Just add this extra style code to each row and your table will look much better.
34. Add something like border: 0px; to remove the thin gray line on the bottom of each row.
