DRUPAL Manual October 2014
DRUPAL Manual October 2014 Drupal Manual For additional information regarding Drupal policies or access, contact University Communications and Marketing at webteam@kent.edu or 330-672-2727. © This information is provided by the divisions of Information Services and University Relations., Kent State University and is proprietary and confidential. These materials are made available for the exclusive use of Kent State University employees, and shall not be duplicated, published or disclosed for other purposes without written permission. October 2014 Page 2 Table of Contents Drupal Manual Getting Started in Drupal Finding Pages Creating a Basic Page Changing Page Layout 4 5 6 13 Basic Editing 16 Text Formatting 22 Videos 27 Adding Links Images Tables 19 23 28 Online Forms 30 News 40 Predesigned Blocks 52 Navigation Profiles Group Theme Web Standards and Style Guide Content Addendum: Common Mistakes October 2014 36 46 53 54 Addendum Page 3 Drupal Manual Getting Started in Drupal Web Browser Requirements Most up-to-date Web browsers will work with Drupal. The only browser that is currently not working well with Drupal is Internet Explorer version 8 or earlier. Otherwise, there is no specific recommendation or requirement. You can edit on any computer with Internet access from anywhere! Important Changes to Consider The new content management system Kent State is using in the website redesign works differently than CommonSpot, the current system. • • A first time login is required by you, after which University Communications and Marketing (UCM) can setup your account. Decisions regarding navigation will be determined and preset by your group’s administrator. Initial Login and Account Setup The first step to getting started in Drupal is signing in! Follow these steps to sign into Drupal with your FlashLine credentials: 1. Go to https://www.kent.edu/user. 2. Username = FlashLine User ID For example apalmie1 is the FlashLine User ID for apalmie1@kent.edu (the part before @kent.edu) 3. Password = FlashLine password 4. Click the Login button. 5. As mentioned above an initial login is required so that UCM can create your account. Logging In Day-to-Day 1. Login at www.kent.edu/user using your FlashLine credentials. 2. Go to your site url: https://www.kent.edu/site-name. October 2014 Page 4 Finding Pages Drupal Manual There are two ways to find your site’s pages. 1. Go to https://www.kent.edu/admin/content o Click Find content and search for the page by completing one or more of the fields available. To find pages you created, enter your FlashLine ID in the Author field. To find all your group’s pages, enter your group node ID number in the Group Audience field. 2. https://www.kent.edu/admin/config/search/path/list/your-site-url will show your pages alphabetically. October 2014 Page 5 Drupal Manual Creating a Basic Page Creating a New Page There are two ways to create a Basic Page. 1. Click the Basic Page link located on your homepage. 2. From your dashboard http://www.kent.edu/admin/dashboard click Add content and select Basic Page. The basic page content options are shown on page 7. Directions for best practices for each field are provided after the screen shot. October 2014 Page 6 Drupal Manual Image 1.2 See pages 8-10 for details about each field. October 2014 Page 7 Drupal Manual The numbers referenced below correspond with the fields shown in Image 1.2 on page 7. The black navigation bar at the top of the page may disappear if you navigate to a different page. This can be corrected by adding an s to the end of http in the URL. See Image 1.2 on page 7. Title Your page title, breadcrumbs, footer link and the page URL are automatically generated from your page title when you first save your page. The URL created will be https://www.kent.edu/your-group-name/the-text-entered-in-the-titlefield-when-you-first-save-your-page. If your page has a long title, as illustrated on page 7, but you would like the URL to be shorter you MUST enter the short title in the ‘Title’ field BEFORE the page is saved or you will have to wait until the site is live to make the change. After the page is saved the title can be updated with the longer title while the original URL will stay intact. The URL may be overwritten in the Permalink field if your site is already live. NOTE: Changing the permalink before your site is published will prevent the “_new” portion of the URL from being replaced as needed when the site is activated to go live and will cause it to appear in search results before the site launches. See Image 1.2 on page 7. Permalink Do not enter anything in this field until after your site is live. Entering a custom URL is only necessary if a specific URL is needed for a printed publication and should only occur after your site launch. See Image 1.2 on page 7. Subtitle This field is only used on news stories. See Image 1.2 on page 7. Content This is where the content for the main section of your page should be added. The Basic Editing section has descriptions of the most common editing tools used. See Image 1.2 on page 7 and the expanded view on page 9. Menu options Check the Provide a menu link box to add the page to your site navigation. October 2014 Page 8 Drupal Manual 1. Title: Enter the title that will appear in the navigation. 2. Parent: Select the page’s parent (main topic area) from the drop down list. a. To add the page to the top navigation select the group title which is shown in <brackets>. In the example on page 8, it would be <Training>. The page Main Nav One has <Training> as its parent. b. To add the page to a different menu, simply select the parent page from the list. In the example above, Main Nav One is selected as the parent of the Basic One Page, which results in it appearing in the Main Nav One mega menu and in the left navigation. c. To add the page to the Quick Links menu (located in the footer), select <Training Quick Links>. 3. Title Description: Enter the description to be displayed when the link is hovered over. Here is the menu created in the example above: See Image 1.2 on page 7. Publishing options Published is automatically checked. • Keep it checked if you are in the migration phase even though your site will not go live on Kent.edu until it is complete and your webteam representative publishes it. • If your site is already live, uncheck the Published box before you save the page if you are not ready to publish the page. Create new version is normally checked by default and should be kept checked so you can revert back to an earlier version if necessary. NOTE: Only the content on the Edit page is saved. Entering details about the changes is optional. October 2014 Page 9 Drupal Manual See Image 1.2 on page 7. Authoring information Author – will be prefilled with your FlashLine ID Date and (military) time button will prefill when you save your page. This information is only visible online in news stories and can be overwritten if needed. See Image 1.2 on page 7. Buttons – Save, Preview and Delete • Save - You MUST select the save button before you exit the page or your work will be deleted. • Preview - Currently not displaying correctly. • Delete – Will become available after the page is saved. Selecting it will delete your page from your site. See Image 1.2 on page 7. Featured Photo Large Billboard Feature Photo Small Feature Photo You have two options for which type of feature photo you want displayed on your page. 1. Large Billboard (left) expands the entire width of the page. You can add up to five images to the large option. They will automatically rotate. 2. Small (right) appears in the upper left corner of the page above the left navigation. To be uploaded a featured image must meet these specifications: • Files must be less than 3 MB. • Allowed file types: png, gif, jpg and jpeg. • Images must be at least 1500 x 600 pixels. A larger image will provide more flexibility when cropping. • The PhotoShop Web cropping grid (Interior Page Image Crop) shown on page 11 should be used as a guide for what area of the image should be the focal point and what area will become semi-transparent once the image is placed on the page with the navigation. October 2014 Page 10 Drupal Manual Add a new file 1. To upload a file, select Choose File. 2. Select the image by locating the image on your computer. 3. Click Upload. 4. Click either the large or small thumbnail. A cropping window will appear. 5. Drag and drop to move the preselected area to highlight the area you would like to feature. Keep in mind a portion at the top will be behind the header with a bit of transparency on the header bar. • To change the featured area, click the thumbnail. • To change to a different image size, click the related thumbnail and select the area you want featured. • If your image is larger than the required width of 1500 pixels, you can resize the crop box by dragging the corner handles. 6. Enter Alternate text and Title. 7. To edit the Featured Photo(s) (in Edit mode) select the Featured Photo link to expand the current selections. October 2014 Page 11 Drupal Manual See Image 1.2 on page 7. Feature Photo Size Select the correct radio button. If a size is not selected the photo(s) will not appear on your page. See Image 1.2 on page 7. Tags Do not enter any information here. Keywords are not used in search engine optimization anymore and meta tags can be entered elsewhere. See Image 1.2 on page 7. Group Audience Your group will be preselected. Meta Tags (below Group Audience – not shown in the screen shot) Not all users will have access to Meta tags. The only field you may want to add information to is the Description. Page title is automatically generated by Drupal. October 2014 Page 12 Drupal Manual Changing Page Layout Your content won’t all fit inside one rectangular text block? Not a problem! You can change the page layout: 1. Click the Change this layout button (you must be on the View tab) at the bottom of page to select one of these KSU Basic Page Layouts. 2. Select the layout desired. If the page displays left navigation, the left column will be the area it should be placed. 3. Click Save. 4. Create a new basic page and add the information you will add to your original basic page. Title the page with a reference to the page it will be located on so you will be able to locate it later if editing is necessary. Save the page. Note the node ID of the page you created. Currently, there is no way to see the node ID on the pane that refers to it, so if you need to edit it, you will have to search for the page. 5. Return to the page where you want to add the additional content. Click Customize this page to rearrange your page content and/or add extra sections, called panes or panels. 6. Click the + sign to add another pane to a column/panel. 7. All content needs to be added by selecting Existing node from the “Add content to the ## Columns.” Do not select any of the options below this line. October 2014 Page 13 Drupal Manual 8. 9. Configure the new existing node (see screen shot on page 15). a. Enter the code or NID of a node: enter the node ID of the page that contains the content you are adding. b. More Information: to remove the title from the page check the box to “override title” and leave the text box empty c. Uncheck the Include node links for “add comment.” “read more” etc. d. Select Full content from the Build node drop-down box. e. Select the Save button to save your pane. 10. Add additional panes as needed. 11. Save the page. October 2014 Page 14 Drupal Manual October 2014 Page 15 Basic Editing Drupal Manual Editing Content on a Page 1. Click the Edit button to edit the main content block, featured photo(s) or the page properties. 2. If a page needs edited and it is a page you customized with panels, click the Customize this page button then click the pane’s gear icon. The Configure window will open where you can make the necessary edits. October 2014 Page 16 Drupal Manual HINT: To view a larger Content Settings workspace you can click either: 1. Click the Toggle Full Screen Mode icon to see the window as a full screen (top) 2. Lengthen the area by dragging the bottom right corner down (bottom) What do the editing icons mean? These icons, looking left to right on the top row (row 1), do the following: • • • • • • • • • • • • • • • Bold Italic Strikethrough Insert-remove a bulleted list Insert/remove a numbered list Create an ordered list Create a block quote Align left Align center Align right Link Unlink Full screen mode Spell checker Add media October 2014 Page 17 Drupal Manual The icons in the middle row (row 2), do the following: • • • • • • • Paragraph or headings selection Remove formatting Insert special character Increase indent Decrease indent Undo Redo The icons in the bottom row (row 3), do the following: • • • • Text/button/link style selections and image alignment options Insert horizontal line Insert/edit table (see Table section) Insert/edit attributes (used for anchor links) October 2014 Page 18 Adding Links Drupal Manual Media Library LinkIt Link to an Existing Page or File Various file types can be uploaded and linked to. The file must first be uploaded to the Media Library. Insert/Edit Attributes 1. Highlight the text you want to link. 2. Click the Linkit icon on the toolbar. 3. Enter the page title or a keyword in the Search content field to search for existing pages. A list will be generated for you to select from. 4. From the list, select the page you want to link to. Files such as PDF will be displayed in a separate section after Web pages. 5. Click the Insert link button. October 2014 Page 19 Creating a Button as a Link 1. 2. 3. 4. 5. Drupal Manual Highlight the text you want to link. Click the Linkit icon on the toolbar. Enter the complete URL in the Target path field. Click the Insert link button. From the Styles list of options select the button style desired. a. If you change the style and the button style does not change, you will need to unlink the text and link it again. Styled Text Link 1. Highlight the text you want to link. 2. Click the Linkit icon on the toolbar. 3. Enter the complete URL in the Target path field. 4. Click the Insert link button. 5. From the Styles list of options select the either Read More text. Avoid using the phrase, “Read more.” October 2014 or Action Link . Be sure to use descriptive Page 20 Drupal Manual Link to an External Page 1. Highlight the text you want to link. 2. Click the Linkit icon on the toolbar. 3. Enter the complete URL in the Target path field. 4. Click the Insert link button. Anchor Link A link that will ‘jump’ a user to a specific part of a page. 1. 2. 3. 4. 5. 6. Place your cursor where the anchor belongs. Click the Insert/Edit Attributes icon. Enter a name for the anchor location in the ID field. Highlight the text you want to link to the anchor location. Click the Linkit icon on the toolbar. To link to a location on the same page enter a hashtag (#) followed by the anchor location name in the Target path field. For example, if your location name was schedule, you would enter #schedule in the Target path field. to link to a location on a different page you would enter the page URL followed by a hashtag (#) and the anchor location. For example, https://www.kent.edu/summer-sessions#schedule 7. Click the Insert link button. Quick Links These are the links that appear in white in your footer above your social media icons. They appear on every page of your site. 1. Select the Group tab or button from your home page. Select Menus to access your group’s menus. 2. Select add link from the Quick Links row to add a link to the menu. 3. Select list links to see the entire list and to reorder the list. October 2014 Page 21 Text Formatting Drupal Manual Copying and Pasting Text from Word or an Email DO NOT directly paste text from Microsoft Word or an email program into a Drupal page. Word has its own hidden version of HTML baked into your text, which you don’t see when copying/pasting. Word’s version does not play well with the real HTML and will cause headaches. Often text will look strange pasted from Word. It will also present compatibility issues with predefined style sheets and scripts that make our pages interactive. Clean out the code by copying your text from the source and paste it into Notepad (Windows) or TextEdit (Mac). Then reselect the text from that program and paste it into the Drupal content window. Style Sheet 1. Primary Navigation Mega Menu Items a. Alpha order (add all first then reorder) b. Minimum of four, maximum of 12 2. Formatting a. Introductory paragraph i. If it needs to be more prominent, put introduction style on it b. Subhead breaks – one return not shift enter c. Buttons i. Five types can be selected 1. Small - Use most frequently 2. Medium 3. Medium Alt 4. Large - Use less frequently to imply significance 5. Large Icon ii. You should create a standard within your site and communicate that to your site admins to ensure consistency 3. Text and Terminology Guidelines – see Content Addendum 4. Quick accessibility requirements controlled by Drupal: a. When setting links, “click here” and “read more” should be avoided. Rather, set the link on a descriptive label. For example: Find more information about Wellness Programs (set the link on the wellness programs text). b. Images require an alt tag, which displays when a cursor rolls over the image or is read by a screen reader. It should describe what is happening in the photo. 5. Images a. Require above-mentioned alt tag b. Should not include student names, rather, use ‘a sophomore English major.’ i. Should be good quality 6. Footer quick links – optional use a. Maximum of eight, recommended October 2014 Page 22 Images Drupal Manual Images should be sized and saved for Web (as progressive, if possible) before they are added to Drupal. If you have multiple files or images to upload you can add them to the Media Library from any page. However, it is important to name the file with a title you can easily search for later. • • Image files should be less than 3 MB. Allowed file types include: jpg, jpeg, gif or png. Images can be added two ways. Option 1 Add an Image in a Text Block 1. Select the Media Library icon. Media Library 2. 3. 4. 5. 6. Locate the image on your computer. Select Upload then Next. Add Title text and Alt text as required. Select Save. Select the Submit button. Images will be purged from the site if the uploading process is not completed with clicking the Submit button. It is hard to see at first, but if you scroll a little you will see it is located in the bottom left area of the options page. 7. Padding will automatically be added to the image. 8. Select the alignment from the Styles menu. The image may not appear to be aligned correctly, however after you save your page, you will see it is aligned correctly. Option 2 Add an Image in a Separate Panel 1. Click the plus sign (+) from the column where you want the image to appear. 2. Select the Add image option October 2014 Page 23 Drupal Manual 3. Select Choose File from the Content Settings section. 4. 5. 6. 7. 8. Locate the image on your computer. Select Upload then Next. Enter the Alternate text as required. Select Save. Move the panel (Drag and drop with the move icon ) to the desired location on the page. Mega Menu Icon Images Directions are located in the Navigation section. Footer Image To replace the image that is displayed in the footer 1. 2. 3. 4. Go to your group’s homepage. Click the Edit button or tab. Expand Footer Options. Click Choose File, locate the image on your local computer and click Upload. October 2014 Page 24 Drupal Manual Information Graphics The Information Graphics Library displays the various graphics that have already been created for use on Drupal with the option download the graphic. Note: if you’re using a non-traditional theme color template, it is best to have info graphics prepared that match your site’s accent color first. If you require a different graphic to be created you can complete the Information Graphic Request Form. To add an infographic to your page, go to your group homepage and select Infographic from the Add Content list. • • Title - This is an administrative title and does not show to the user. Image - Upload an approved gif file from the infographic library. Be sure to add alt text. October 2014 Page 25 • • • • Drupal Manual Text – Enter a fun fact or title that will appear below the graphic. Link – Enter the link the graphic will take the user to. Group audience – Your group should already be selected. The option to select the order of appearance is coming soon. Adding Infographics to a Page 1. Once you’ve created all of your info graphics, navigate to the page you’d like to place them on. 2. Click Customize This Page and click the plus sign to add a new pane. 3. Select View Panes, locate Group Infographics. There are currently two views to choose from: a. 50% view - used when adding into a narrow column (shows 3 across and stacks) b. 100% view - used when adding into a full width column (shows 6 across and stacks) 4. Once you’ve added to your page, drag the pane to the appropriate location on your page. 5. When you’re finished, click Save and refresh the page. You should see all of the info graphics you created appear. 6. See the stylistic recommendations for using infographics in the Pattern Library 7. http://patterns.kent.edu/patterns/#infographics. October 2014 Page 26 Videos Drupal Manual Videos can be added two ways. Option 1 1. To add a video in a text block, click the Add media icon select the Web tab. 2. Enter the YouTube or Vimeo URL in the File or URL media resource field. 3. Click the Submit button. 4. The video will appear in the text block and can be resized to a smaller size if necessary. Simply grab the corner handle and drag to desired size. Option 2 1. To add a video in its own panel, click the + sign on the column where you want to add the video. 2. Click Add video. 3. Select Browse. 4. 5. 6. 7. Click the Submit button. The video will appear in the preview. Click Save. The video will resize according to where the panel is located. If it is moved to a wider column, the video will resize to fill the width. October 2014 Page 27 Tables Drupal Manual Long tables of information with many columns will flow off the edge of the screen on phones, making them unviewable. A style has been added to Drupal that will automatically arrange the table headers along the left side and will allow the user to scroll through the columns horizontally on the right (see screenshot). It also ensures the tables will stretch to 100% of the block in which it resides (you can place two tables side by side by using the 50/50 layout). o In order for the style to take effect, you must designate which row(s) are header rows. 1. Highlight the table row that should be the column headings. 2. Click on the Table Row Properties icon. 3. Under Row Type choose Header and click OK. o The first improvement will only happen automatically if your table headers in Drupal are marked as header rows. 1. Highlight the table row that should be the column headings 2. Click on the Table Row Properties icon. 3. Under Row Type, choose Header and click OK. Additionally, more than one paragraph should not be entered into a cell. The format will not appear correctly on phones. Instead, split the information into an additional row or column or remove the information from a table and place it in a location without formatting limitations. October 2014 Page 28 Drupal Manual These additional table options will become active once a table is present: Table Row Properties – o o o o o o o o o October 2014 Table Cell Properties Insert Row Before Insert Row After Delete Row Insert Column Before Insert Column After Delete Column Split Merged Table Cells Merge Table Cells Page 29 Online Forms Drupal Manual Form Components An online form can be added two ways. Option 1 The Form is Contained On a Basic Page While creating a form you can switch from the Webform mode to View mode if you would like to see the results of your options. 1. From a saved Basic Page select the Webform button (view mode) or tab (edit mode). 2. A Webform Page will open with the Form components tab displayed. 3. Enter the field name in the New component name field located in the Label column. 4. Select the Field Type from the drop down options: • Time To capture the time the form was completed enter %now in the Default value field and check the Private option in the Display settings. • Date If you would like the user to select a date you can enter a Start date and End date. As well, you can check the Enable popup calendar box if you would like the user to see a date picker. To capture the date the form was completed enter %today in the Default value field and check the Private option in the Display settings. • Email – to enter the user’s email by default, check the User email as default box available in the Token values section. You will see the %useremail token is then added to the Default value field. If a user can only complete the form once, the Unique checkbox (available in the Validation section) should be selected. October 2014 Page 30 Drupal Manual • Fieldset – You must decide if the title and description is Collapsible or Collapsed by Default. A Collapsible fieldset is shown below and displays the title and the description. Collapsed by Default shows only the title. • File – allows a user to upload a file. You have the options to add a specific Upload directory (the final location of the file), the Max upload size, Allowed file extentions, and you can select a Progress indicator (either a throbber or bar with progress meter) type. Grid – for a survey styled question List the Options (titles across the top of the grid) and Questions (vertical list) as: • The component would display when saved as: • October 2014 Hidden – The Hidden field is not used often, but would be an option if you would like to collect information such as an IP address or username without the user’s input. See the Token values sections for options. Page 31 • • • • Drupal Manual Markup – Enter a text block. Number - A variety of ways to capture a number are available. Page Break – Enter a page break. Select options – Select this component to offer a list to the user to select from List the Options the user must select from as: A radio button list will display. If you would like the user to be able to select more than one option, select the Multiple checkbox; a list with a box by each option will display. • Text area – Select this component to add a large area for the user to enter text. You have the option to select the width (number of columns) and height (number of rows) of the area. You can also select if you would like the area to be able to be resized. • Textfield – Select this component to add an area for the user to enter one line of text. You have the options to require the content to be unique and you can select the maximum number of characters. A prefix and suffix option is available as well if text before and/or after the field is needed. 5. Check the Mandatory box if a response is required. This box will display as checked if you checked the Mandatory box in the Validation section on the components options page. 6. Click the Add button to enter the required component details. Each Field Type will open a page of options pertaining specifically to that type. Most all contain these fields: • Label* - The title that is displayed by the form component. • Field Key* - How the Label is displayed in the results. • Default value – Add if you would like to display the most likely option displayed. • Descriptions – The information you enter in the description field will display as text under the component when the page is viewed. • Token Values (default options are presented) • Validation - check the Mandatory box if the user must enter a value • Display - Various options are presented depending on the component selected. Select as needed to fit your needs. Private (Private fields are shown only to users with results access) 7. Once a field is added the Operations column it will populate with options to Edit, Clone, and Delete. The field display order can be changed by dragging and dropping the move icon. *Required October 2014 Page 32 Option 2 Drupal Manual The Entire Web Page is a Form – No text outside of the field descriptions is necessary. 1. Select the Webform link on your group home page. 2. Insert desired fields (described in Option 1) Email Confirmation Setup To send email confirmations, select the Emails option. 1. Enter the email address of who will receive an email notification that the form has been submitted. October 2014 Page 33 Drupal Manual 2. Click the Add button to open where you can customize the format of the email that will be received. Form Settings The Form Settings options allow you to enter how the user receives confirmation of their submission. You can also add restrictions to the number of submissions and change the status of the form. October 2014 Page 34 Drupal Manual Submission access options are also available and mostly likely all should be selected if they are not already as the default. The following Advanced settings are available as well. The “Submit” button text can be changed here if alternate text is required. October 2014 Page 35 Navigation Drupal Manual Your site navigation is created alphabetically by default when you select a parent (main navigation/subject area) in the Menu Options while creating a Basic Page. Changing or adding a parent will change the page’s location in the navigation. Image 1.3 See pages 31 and 32 for details about each field. Image 1.4 See page 32 for details about each field. October 2014 Page 36 Drupal Manual See Image 1.3 on page 32. Main Navigation Select the <your site name> from the Menu Options. This option will add the page to the top navigation bar. See Image 1.3 on page 32. Mega Menu Selecting a top navigation page as the parent will add the page to the mega menu that appears when a user hovers over the parent page in the top navigation bar. This page and its children will be displayed in the left navigation too. See Image 1.3 on page 32. Left Navigation Selecting a level two page as a parent will add the page to the left navigation. See Image 1.3 on page 32. Quick Links Selecting the site’s quick links as a parent will add the page to the Quick Links located on the right side of the footer. See Image 1.3 on page 32. Mega Menu Icon Image and Link Adding an image with a button to navigate to a specific page is optional. 1. 2. 3. 4. 5. On your homepage, click the Group button (View mode) or tab (Edit mode). Select Menus, then your main navigation menu. Click List Links on the right side of the page. On the the top tier navigation, you will have the ability to add an image by clicking on Edit. Edit these sections to create the menu icon: o Check the Use an Icon box – this tells the page an icon will be used. o Image Style – Should default to menu_icon, so there shouldn’t be a need to touch this. Just be aware that the style control is here. o Click Choose File to Upload a new icon image – image should be 118 px horizontal x 150 px vertical. o Feature Teaser – The text in the highlight section. o Feature Link Title – The text that will appear in the button. o Feature URL Override – If you leave this alone, it will link to the top-level landing page, but you can set this to go to a highlighted page within the subsite (or an external page). o Click Save at the bottom of the screen. See Image 1.4 on page 32 and screen shot on page 34. Action Items Action items can be added to your group’s homepage by entering the Title to display with the URL in the fields located in the Group Action Items section on the group homepage. Please be sure to included http:// as part of the URL path; it is required to be either complete or relative just adding www at the beginning is not enough to create the proper link here. October 2014 Page 37 Drupal Manual NOTE: If your group was created prior to July 7, 2014 you will need to add the steps below to have the block appear on your home page. 1. 2. 3. 4. 5. October 2014 In View mode select Customize this page. Select the plus sign to add a pane to the left panel. Select Block content. Locate the Sidebar List of Action Items. Click the green add tab to add to the panel. Page 38 Modify the Site Navigation Drupal Manual To reorder or add an external link to your navigation, login to your homepage https://www.kent.edu/group-name. Select the Group tab (Edit mode) or button (View mode) then select Menus. 1. Click List Links to see the navigation for the site. If a page needs moved, you can drag and drop it to a new location. The navigation level can be changed if needed. Add an External Link It is possible to add a link to your site navigation that is not located In Drupal and, therefore not available to add to a menu by selecting a parent in Menu options. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. On your homepage, click the Group button (View mode) or tab (Edit mode). Select Menus, then your main navigation menu. Select the Add item tab. Enter the text you want to appear in the navigation in the Menu link title field. Enter the page URL in the Path field. If you are linking to a Kent State Drupal page, enter the page node ID as node/####. Check both the Enabled and Show as expanded options. Select the parent of this page. For example, if you were adding a menu link for Undergraduate Admissions, Admissions would be its parent. The weight can remain at 0. Resize to fill the width. Click the Save button at the bottom of the page. October 2014 Page 39 News Drupal Manual Select News Article from your home page. The following one page form will open for you to complete. Each section is described below. Image 1.5 See page 36 and 37 for details about each field. Headlines • Headline - Main headline (in article) • Short Headline - A shorter headline version - it is shown on the image (overlay) - on the Home page • Subheadline - A teaser displayed below your headline Author Name of author or department publishing the article – not required. Publishing Options • Check - uncheck if you are not ready to publish your article. • Revision - check new revision; every time you save your article it will be saved as a new version that can be restored later if necessary. Authoring Information • Author - defaults to the user • Date - will autofill when saved if a specific date is not entered. This field populates the order of appearance online. • Time - will autofill when saved if a specific time (military) is not entered. • Note: entering a future date and time will not hold the articles publication until that date and time. October 2014 Page 40 Drupal Manual Body See image 1.5 on page 36. Add content by pasting content into the text editor. Note, you must insert text via Notepad (PC) or Text/Edit (MAC). Update formatting where needed and add hyperlinks. WYSIWYG and HTML editing options are available. About the Article • • Location: Add campus (selecting multiple is not an option yet) Tags: List the taxonomy items (i.e., the college, school, department, focus of article) Sidebar (Ignore this area for now. This feature has not been added yet.) Photos Feature Photo – is only used on Success Stories. If you wish to add an image to the body of the article follow the image instructions. October 2014 Page 41 Drupal Manual Videos Enter the URL of the video you would like featured, as well as a description. The video will automatically size to span the entire width of its location (body or sidebar). Featured News News Story Designation – Do not select anything here. This selection or lack of selection will affect the Kent State main home page news feed. Success Story (For UCM use only, at this time. Enhancements coming for other clients.) October 2014 Page 42 Drupal Manual Group Audience Your Groups – Your group should be preselected. If not, select it from the list. Other Groups – add additional groups as needed and separate with commas if there is more than one. Setup a News Feed Choose the Basic Page on which you want to display news. For example, you might create a basic page called News. If you’re displaying your news on the group home page, skip this step. On the basic page or group home page, do the following: 1. 2. 3. 4. Click the Customize This Page button. Click the plus sign on the panel where you want the news to display. For example, you may want it in the content area as opposed to the sidebar. Choose View Panes Choose one of these display options: a. OG News Feed - All Headlines Only - This displays only your news headlines as a bulleted list starting with the most recent, 10 per page. b. October 2014 View: OG News Feed - Top 5 Headlines - This displays your most recent 5 headlines as a bulleted list starting with the most recent - perfect for the group home page. Page 43 Drupal Manual c. View: OG News Feed: Group News - Author, Date Headline - Displays the Headline, Author and Date, 10 per page. d. View: OG News Feed: Group News - Summary, Author, Date October 2014 Page 44 e. 5. 6. 7. Drupal Manual View: OG News Feed: Group News - Thumbnail, Summary, Author, Date, Headline – Same as above, but includes a thumbnail pulled from the featured photo of the news story. Click Add and then Save. Drag the newly added feed BELOW the page title and breadcrumbs Click Save and refresh the page. You will see the news from the organic group automatically has populated. October 2014 Page 45 Drupal Manual Profiles Until profile display is built, the display view will not look as it will in the final version. Some fields may be missing. To verify that a profile has been created, you can visit www.kent.edu/all-profiles. Most fields are self-explanatory. If additional information is worth noting in a section, a note will be added under the screen shot. View a prototype of how profiles will display: http://ucm.dreamhosters.com/patterns/prototype/profile-single.html http://ucm.dreamhosters.com/patterns/prototype/profile-listing.html 1. Create a profile by going to https://cms.kent.edu/node/add/porfiles. Fill out the fields on the new profile • October 2014 Page Title - For the title of the Profile, enter the person’s name as you would want it to display in their full profile view - for example Dr. Roger Smith, Ph.D. Page 46 • • • • • October 2014 Drupal Manual FlashLine User Name - be sure to fill in the FlashLine user name if the person is affiliated with Kent State Profile photo - minimum dimensions are 500 x 750. You can find many photos at http://photo.kent.edu. Click on the photo to crop it after uploading. KSU Status - options would be Staff, Faculty, Graduate Student, etc. - if a status doesn’t exist, you can type one to add it to the list. One person can have multiple statuses. List phone numbers using university style, i.e. 330-672-1234 Website – multiple websites can be added Page 47 Drupal Manual October 2014 Page 48 Drupal Manual • • • • October 2014 Selected Publications - Publications should be recent publications only. Resume - file types accepted - txt, pdf, doc or docx CV - file types accepted - txt, pdf, doc or docx Research & Areas of Expertise - combines the previous separate research and expertise areas into one section. You may enter up to 10 areas. Page 49 Drupal Manual October 2014 • Courses Teaching - this is an open field. You may format these as needed. • Display Options - use this section only if tagging or if you want to promote a profile to a specific slot. • Find an Expert/Researcher (For UCM Media Relations Use Only) Page 50 Drupal Manual • Groups audience - it is important that you select the correct group for which the person is affiliated. One person can be affiliated with multiple groups. Make sure that the Publish box is checked so that the profile is live. That box should be checked by default. 3. Click Save. 2. October 2014 Page 51 Predesigned Blocks Drupal Manual There are blocks that have been created that you can add to your page. This reusable content can be inserted on pages in Drupal, such as regional campuses. The content will display without taking the user away from their site. This is reusable content that should not be or changed in any way. Changing the block would change every instance on the Kent State website. If you require a different version, you may copy and paste the information into a new pane, edit the content and save it to your page. Tuitions and Fees There is new Tuition and Fees information (approved by Stina in the Bursar’s Office). Follow these simple steps to add this block to your page. 1. 2. 3. 4. 5. 6. 7. Click the Customize this page button Locate the panel you want to add the block to. Click the plus sign to open the menu of content options. Select Reusable Content. Scroll to locate Tuitions & Fees 2014-2015. Click the green Add button. Relocate the pane to the desired location on the page. Why (Insert Major)? For each department’s Why Xxxxxx? page, a block from Career Services should be added. The page name that is it placed on must be named with this format: major-why-(insert program name). For example, the theatre department’s full page URL would be https://www.kent.edu/major-why-theatre. Follow these simple steps to add this block to your page. 1. 2. 3. 4. 5. 6. 7. Click the Customize this page button Locate the panel you want to add the block to. Click the plus sign to open the menu of content options. Select Reusable Content. Scroll to locate View: Why This Major. Click the green Add button. Relocate the pane to the desired location on the page. October 2014 Page 52 Group Theme Drupal Manual If allowed by your dean or administrator you can change the colors of your group website. 5. 6. 7. 8. Go to your group’s homepage. Click the Edit button or tab. Expand Display Options. Select the from the Group Theme list of color options: October 2014 Page 53 Drupal Manual Web Standards and Style Guide Please refer to the Guide to Web Standards for complete details regarding the various website elements. The Kent State Guide to Visual Standards (May 2014) contains all the visual standards. Both are available at http://www.kent.edu/web. October 2014 Page 54 Drupal Manual Content Addendum: Common Mistakes 1. Text a. Website is one word b. Email is not hyphenated c. Dates: i. The month in the date should be abbreviated when it appears with the event date (i.e., Aug. 1). ii. However the month should be spelled out when it appears with the year (i.e., August 2002). d. Time: i. 8 a.m. or 3 p.m. ii. 8:30 a.m. or 3:30 p.m. iii. 8-9 a.m. iv. 8 – 9:30 a.m. v. 10:30 a.m. – noon vi. noon – 2:30 p.m. vii. 2:30-3:30 p.m. viii. 3:30 – 5 p.m. e. Online is one word. f. University should appear as university when used alone, please note the lowercase “u.” g. On first reference, full department names are written out in entirety and capitalized (i.e., University Relations and Development). On second reference, it may be shortened and lowercased (i.e., development). h. Advisor – use the -or ending, not –er. i. Ampersand — university style uses “and,” not an ampersand unless an ampersand is part of the proper name of a non-university entity or if it is being used as navigation or a design element used in the Website. i. Website navigation titles should use the ampersand. ii. Website page content should spell out the word “and.” 2. Terminology – if using any variation of these terms, they must be used in this fashion: a. FLASHcard – A physical identification card containing a student or employee’s photos. The card has a 10 - 16 digit ISO number printed on it. May also refer to the FLASHcard Office location. Incorrect terms currently in use: i. FlashCard ii. Flash card iii. FlashCARD b. FlashLine user name - A combination of a user’s first and last name (up to eight positions, sometimes with a number) that acts as the login user name for most campus resources. The FlashLine user name is everything before @kent.edu in the email address. Incorrect terms currently in use: i. FlashLine ID ii. User name iii. Email ID October 2014 Page 55 iv. User ID Drupal Manual c. Kent State email addresses - The full @kent.edu email address, which includes the FlashLine user name. Incorrect terms currently in use: i. University email address ii. KSU email address iii. Kent email address iv. FlashLine address d. Kent State ID number (Banner ID) - A 9 digit id number, currently beginning with an “8,” that identifies students, faculty, staff, alumni and other constituents in the Banner system. Incorrect terms currently in use: i. Student ID ii. Banner ID iii. Employee ID iv. University ID 3. University Guide to Style includes university standards for approved use of buildings, Regional Campuses, how to refer to the president and more. October 2014 Page 56
© Copyright 2024