Manual

CMS (Drupal) Training

MASTER EQUINE MANAGER

Development site: http://drupal-01.exnet.iastate.edu/MASTEREQUINE

LIVE site (NOT AVAILABLE until it is live): http://www.extension.iastate.edu/MASTEREQUINE

 

 


 

Go to the Development site: http://drupal-01.exnet.iastate.edu/masterequine/user

Username: your NetID
Password:  YourNetID1!

For security, change your password after your first login:

1.     Go to an admin page

2.     Click on the “Hello [your username]” in the upper right hand corner

3.     Click Edit on the right

4.     Enter a new password and save.

1.     Go to your website (http://www.extension.iastate.edu/masterequine).

2.     In the footer, click on “Log in”. Enter your NetID and Net ID password. (What you use to login to your email)

1.     After logging in, you will be dropped off at the Extension Homepage. We need to set one destination to be able to use our NetIDs to log in. This seems to be the best option for all sites.

2.     You can tell you are logged in when you see the black bar at the top of the page.

You can see all the content for your site by going to the “Affiliated Content” tab > “Affiliate Site List” in the black bar.

Then click “Master Equine Manager content.” This will take you to a list of all your content.

Using the Content Editor (WYSIWYG Editor)

·       The Body section is the main area of the page. You can use the tool bar to insert images, text, links etc.  This works very similar to Word.

·       There are preset heading styles that you can use to change the size and color of the font, view the “Format” dropdown.

·       There is also a spellcheck option

·       You can make the edit area bigger by grabbing onto the bottom right corner and dragging it.

·       You may also access the HTML code through “Source” button”

**IMPORTANT: Some of the styling will look different while editing it than it does on the live site.**

 

 

Uploading images to server

·       Place cursor in content area where you want the image to appear.

·       Click on the image icon.

·       Click on Browse Server

·       Click on Upload in left-hand corner.

·       Browse to find image on computer and click upload

·       Click insert file at top right.

·       Click on OK.

To find an image that was already uploaded

·       Place cursor in content area where you want the image to appear.

·       Click on the image icon.

·       Click on Browse Server

·       Description: Macintosh HD:Users:austin:Desktop:Picture 3.pngScroll to find the image you want.

·       Click on it.

·       Click insert file at top right.

·       Click on OK.

Changing the position of the image (i.e., right with words wrapped around it)

·       Click on the image.

·       Click the image icon.

·       In the properties, select the image alignment and add horizontal or vertical spacing around the image. This gives a little space between the text and the image.

 

 

 

 

 

1.     Add and highlight the text you want to put the link on.

2.     Click the Link Icon in the Content Editor

3.     If the document is an external links, simply paste the link into the URL field.

4.     If you want to upload a document or link to an existing document, click Browse Server.

5.     A file browser dialogue box will open showing all the files and images already uploaded to your site.

a.     To upload a new document, click Upload.

                                               i.     Browse your desktop for the file.

                                             ii.     Click Upload.

b.     To find a document already uploaded, scroll or search for the document in the list.

                                               i.     Once found, click on it.

c.     To add the document as a link, click Insert File.

6.     You will be taken back to the first dialogue box with the URL of the document now added.

7.     Click OK. It is now added to the text you had highlighted.

 

 

 Use tables to add columns to your content or to organize information in a table format.

1.     To add a table, click on the Table Icon  in the Content Editor.

2.     Select how many columns and rows you need.

3.     If using a table for creating columns, do not use borders.

Editing a table

·       To add rows, right click in one row. A menu will appear. Click on Rows, and then add a row above or below.

·       Follow the same steps for adding columns only go to the Column tab.

·       To delete rows or columns, right click in one row. A menu will appear. Click on Rows, then select delete rows.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Find the video you want to embed on either Vimeo or YouTube.

From YouTube:

1.     Click Share

2.     Click Embed

3.     Select the size of the video at the bottom.

4.     Copy the embed code.

5.     Go to your Body field.

6.     Click Source

7.     Paste the code into the correct location.

8.     Click Source again to go back to the editor view.

From Vimeo

1.     Click Embed in the upper right corner of the video

2.     A dialogue box will appear.

3.     Click Customize Embed Options

4.     Change the size

5.     Copy the embed code.

6.     Go to your Body field.

7.     Click Source

8.     Paste the code into the correct location.

9.     Click Source again to go back to the editor view.

·       The default Input Format of the new system’s editor is Filtered HTML. This helps correct incorrect code, prevent malicious code and create links automatically.

·       To fix this, you need to change the Input Format of the field to Full HTML.

·       Under Input format – On every text area in the template, there is the option of choosing your input type. Filtered HTML is for basic pages that don’t have any specific styling. Full HTML allows for <div> tags and style attributes.

·       change to Full HTML—If something isn’t looking right on a new page, check to see if this is set to Full HTML

 

 

 

 


 

Creating a new Banner

·       Go to Content Management > Create Content > Banner Slideshow

·       Enter Title – This becomes the title of your banner and shows up on the right above the intro text.

·       Body – This is where you will put your intro text. Keep it short.

·       Button link – Add a text in a separate line and simply add a link on it. It will automatically get styled as a button.

·       Upload Banner Image – Browse to the photo and click Upload

·       Add the URL in the Banner_Link URL field. This is where they banner will link to. Should be the same as the link you add in the Body field (if applicable)

·       Save

Editing the Banner Slideshow

·       Each image is edited separately.

·       To access each banner to edit them, go to: http://www.extension.iastate.edu/masterequine/banner/  (this page was created so you can view all the images and access their “Edit” button.)

1.     You may also edit these pages through “Affiliated Content > Affiliate site list > Master Equine Manager content - http://drupal-01.exnet.iastate.edu/masterequine/drupadmin/domain/content/53

2.     This gives a list of all the content for your domain.

·       Change image (Size is 660px x 305px)  - Drupal will automatically resize and crop your photo.

 

1.     On the Homepage, click Edit on the right hand side.

2.     Edit the BODY field

o  Do NOT add links or any styling to this area.

3.     Save

 

 

Editing hompage area 1 (Middle column)

1.     On the Homepage, click Edit on the right hand side.

2.     Edit the Homepage Area 1 field

o  Add a title bar by typing a title and making it a Header 2

o  Place other content below the title

3.     Save

Editing homepage area 2 (Friends of equine science)

1.     On the Homepage, click Edit on the right hand side.

2.     Edit the Homepage Area 2 field

o  Keep each image on a separate bullet in the list

3.     Save

1.     On the Homepage, click Edit on the right hand side.

2.     Edit the Sidebar Area 3 field

3.     Save

Editing Homepage Sidebar Areas 2, 3, and 4

These sidebar areas are NOT used in the Master Equine Manager design. Content in these areas will NOT appear on the website.

·       You have to create pages before you add them to the menu

Creating a new page

·       Go to Content Management > Create Content > Web Page

·       Enter Title – This will be the page title and become the URL (which you can change later if you want)

·       You can enter content now. Refer to the next main bullet.

 

 

 

 

 

Entering Content

·       The Body section is the main area of the page. You can use the tool bar to insert images, text, links etc.  This works very similar to Word.

§  There are preset heading styles that you can use, view the “Format” dropdown.

§  There is also a spellcheck option

§  You can make the edit area bigger by grabbing onto the bottom right corner and dragging it.

§  You may also access the HTML code through “Source” button

**IMPORTANT: Some of the styling will look different while editing it than it does on the live site.**

§  Uploading images to server

·       Place cursor in content area where you want the image to appear.

·       Click on the image icon.

·       Click on Browse Server

·       Click on Upload in left-hand corner.

·       Browse to find image on computer and click upload

·       Click insert file at top right.

·       Click on OK.

§  To find an image that was already uploaded

·       Place cursor in content area where you want the image to appear.

·       Click on the image icon.

·       Click on Browse Server

·       Scroll to find the image you want.

·       Click on it.

·       Click insert file at top right.

·       Click on OK.

§  Changing the position of the image (ie, right with words wrapped around it)

·       Click on the image.

·       Click the image icon.

·       In the properties, select the image alignment and add horizontal or vertical spacing around the image. This gives a little space between the text and the image.

Description: Macintosh HD:Users:austin:Desktop:Picture 3.png

·       Input format – On every text area in the template, there is the option of choosing your input type. Filtered HTML is for basic pages that don’t have any specific styling. Full HTML allows for <div> tags and style attributes.

·       change to Full HTML—If something isn’t looking right on a new page, check to see if this is set to Full HTML

 

 

 

 

Sidebar areas

·       Use the sidebar areas for four types of content: (from the ISU Web Style Guide)

·       Sidebar Area 1 – Related Content or Links - can be used on second-level pages to add a better user experience by listing and linking to content that would be relevant to page visitor

·       Sidebar Area 2 – Contact Information - the place for phone numbers, email addresses and physical addresses.

·       Sidebar Area 3 – Impact/Success Story - an area to feature real-life stories that allow users to make a connection with services, products, research and information

·       Sidebar Area 4 – Publications - an area to promote any publications. Links to the ISU Extension online store and other specific publications would go here

·       Use Heading 6 for the titles of the sidebar areas.

Other Options

·       Scheduling publish time

§  You can schedule when a new page will get published or unpublished under Scheduling Options

§ 

·       URL

§  The url is automatically set on any new page. It takes the page title and converts it into a url. If you would like to change the url, uncheck the Automatic Alias box under URL Path Settings and type in your custom url.

·       Save.

Menus

·       Description: Macintosh HD:Users:austin:Desktop:Picture 2.pngAt the bottom of the page, you should see “Edit main menu”. This is where you will go to add links to the navigation or add your page in the “site map” hierarchy

You can ignore “Edit sub-menu” and “Edit navigation”

 

 

§  You’ll see the menu in hierarchy. This is the list of pages that are connected to the main menu and the pages underneath. Items can be enabled and expanded. These are the main tabs of your site. Enabled means it shows up in the menu and Expanded means “show the dropdown”. Your website is not set up to use Expanded menus so you can ignore that option.

§  You will see that each page in this hierarchy has a crosshair symbol Description: Macintosh HD:Users:austin:Desktop:Picture 8.png next to it. Use this symbol to move the menu item to its correct position. You can move it up and down to change its order. You can move it left and right to change its level in the hierarchy (what its parent page is).

·       Items at the second level and below will appear in the left navigation

·       You may have items in the third level. This will change the style of the second-level parent item to look like a header. The third level links will have a gray background.

§  The left navigation is displayed automatically based on what parent item you are under.

§  The items that are disabled are added to the hierarchy to allow Drupal’s “active-trail” to work properly. This means, the tab stays highlighted after navigating to a 3rd level page.

·       Click Add item

·       Enter the Path or URL of the page. Start url with /masterequine/ If the page is in Drupal, you can leave off http://www.extension.iastate.edu/. If it is a page outside of Drupal, put in the full URL.

·       Menu Link title is what shows in menu to the user.

·       Description (don’t need this)

·       Choose parent. If it is a main item leave at <Master Equine Menu>. If a 2nd level item choose the main menu item it will fall under. (Be sure to only add items to the < Master Equine Menu >)

·       Hit Save.

1.     Navigate to the page you would like to delete

2.     Click to Edit the page

3.     On the right (or the bottom of the page) there is a Delete button next to the Save and Preview buttons. The one on the right looks disabled, but it isn’t.  Click the Delete Button

4.     It will ask you to confirm. Hit Delete again

Master Equine Manager is using the Events system as the Upcoming Courses section on the website.

1.     Content Management > Create Content > Events

2.     Description: Macintosh HD:Users:austin:Desktop:Picture 3.pngEnter a title (Name of the course)

3.     Event Description

a.     Master Equine Manager will use this area to display the dates of the course as well as the “Learn More” and “Register” links. Place the dates on the first line and the links on the second line, as shown in the image to the right.

4.     Enter a From Date (when the course starts)

5.     Enter a To Date (when the course ends) (optional) – Drupal will automatically remove the course from the list after this date.

 

1.     Content Management > Create Content > Webform

2.     Give the form a Title

3.     Enter any content you want to appear above the form fields in the Body field (OPTIONAL)

4.     OPTIONAL -- Edit the Publications & Materials or How Extension Helps fields (If nothing is in these fields, they won’t show)

a.     Publications box. Use this box to promote publications related to the page or topic.

                                               i.     Add a title by changing a short line of text to a Heading 6 format to create a heading for your box.

b.     How Extension Helps – Use this box to link to promote how ISUEO is impacting Iowa

5.     To add the form fields, you must save the page. Save.

6.     Now you will go to a Webform tab.

7.     Under the Webform Tab, there are three pages Form Components (where you enter your fields), Emails (where you add email address to receive notification), Form settings (where you edit the confirmation page, etc.)

8.     Add fields by adding the name of the component and selecting the Type

a.     Notice there are different types for common things like Date, Email, File, etc. By choosing the type, you will get different options for displaying and managing the field.

b.     You can also make the field required by checking the Mandatory box.

c.     Click Add to add the field.

d.     When you click add you are given options for your field.

                                               i.     You can give it a description, check if it is required or if it must be unique (not recommended) and give a max length.

                                             ii.     You can also set the width of the field (use smaller width for a small data like phone)

                                            iii.     You can put a label next to it.

e.     Submit.

f.      Repeat steps a-e to add more fields.

9.     Now you must configure the form to notify you of a submission. Go to Emails under the Webform tab.

a.     Enter the email address that should receive notifications of responses.

b.     Click Add.

c.     Folded Corner: TIP: Use mail IDs for your email address to avoid having to update the form when a person leaves.

d.     You will get a page of options for this email address.

e.     Subject – you can choose the default email, enter your own or use a field from your form as the subject line. (Recommend either default or your own)

f.      Email From Address - you can choose the default email, enter your own or use a field from your form as the subject line. (Recommend either default or your own)

g.     Email From Name - you can choose the default email, enter your own or use a field from your form as the subject line. (Recommend either default or your own)

h.     You can also adjust the format of the email that is sent. (Recommend leaving this as is)

                                               i.     Under Included email values – you can check which fields you want to see in your email. If you don’t include them in the email, you can still get to them through the Submission URL that will appear in the email.

i.      Save Email Settings.

10.  Now you must configure the confirmation page and other settings. Go to Form Settings under the Webform tab.

 

a.     Enter your confirmation message into the field.

b.     Select the redirect location.

                                               i.     Confirmation Page – sends the user to a standard confirmation page that only shows your message.

                                             ii.     Custom URL – If you create a separate confirmation page through Create Content > Web Page, you can add the URL here.

                                            iii.     No redirect (reload current page) – Your confirmation message will appear at the top of your webform page. (Recommended)

c.     Submission limit – you may set a limit if you want.

d.     Submission access – You may set this form up to only show to certain roles. If you want the general public to be able to submit, Anonymous user needs to be checked. (Recommend leaving these as is)

e.     Under Advanced Settings, you can add more functionality. Leave these as is.

                                               i.     Only one you could consider changing is the Submit Button Text. This will change the text on the submission button from the default “Submit” to whatever you enter here.

f.      Save Configuration

11.  Go to View to see your form and test it.

12.  If it says unpublished, go to Edit > Publishing Options > check the box “Published” > Save

This functionality is not working right now. We are working to fix this problem.