Presentation on theme: "Drupal Training Series ADVANCED Provided by University Communications & Marketing Web Publisher: 910-521-6820 v. 1.0."— Presentation transcript:
Drupal Training Series ADVANCED Provided by University Communications & Marketing Web Publisher: v. 1.0
Topics Covered Commonly Used Pixel Sizes Promos Spotlights Webforms Tables Provided by University Communications & Marketing Web Publisher:
Commonly Used Pixel Sizes Feature Image 700px by 300px Headshot Photos 100px by 125px Main Content Area 460px wide First Sidebar 200px wide Second Sidebar 220px wide Promo – Image & Text Image 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 & Marketing Web Publisher:
Promo - Subsection Use 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)www.uncp.edu/academics Example: Costs & Paying for College section on Admissions homepage (www.uncp.edu/admissions-aid)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. Link 1.Link 1 2.Link 2 3.Link 3
Promo – Image Only Use 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)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 & Text Use 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)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 – Links Use 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 – Button Use 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)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 Promo 1.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 Pages 1.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 Promo 1.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 Promos 1.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 Spotlight Each 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) AlumniFaculty 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 Taxonomy 9.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 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:
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, s, and Form settings. 4.Let’s go through those sections individually.
Webform – Form Components 1.Under label, enter the name of the label. Example: First Name 2.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. – requires valid 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 increments 5.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 – s 1.Enter the address receiving the submissions. 2.Click the Add button. 3.Under Header Details, set: Subject This is the text that will appear in the subject line of the I suggest selecting Custom and entering a custom subject line for the from Address This will display the “from” address If the webform has an field, select Component > . This will display the of the individual submitting the form.
Webform – s (Cont.) 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 of the individual submitting the form. 4.Click the Save settings button 5.Repeat this step if you wish for multiple s to receive the form submission. 6.Click the Edit button to edit settings.
Webform – s (Cont.) What if I want the person who fills out a form to receive a confirmation ? 1.Instead of entering another address, select Component Value and the field name where you’ve collected the person’s address. In this example it’s simply . 2.Click Add. 3.Set a Custom Subject like in the example. 4.Set a Custom From Address, from yourself or a your office. 5.Set a Custom From Name. 6.One last thing you’ll want to do is change the Template (see next slide)
Webform – s (Cont.) 7.Usually, we go with the Default Template. For these auto-reply s, it’s best to add a little something extra. 8.Under 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 settings button.
Webform – Form Settings 1.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.
Tables 1.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 - Continued 10.This is more accurate 11.Columns and Rows work as advertised. 12.Width and Height need to be expressed in pixels. Example: 460px 13.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 - 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. 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 - Continued 21.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 - Continued 28.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.