Sitefinity How-tos

How to

• Create a List and List items

  Create a List

  You can create multiple lists with multiple list items within each list.

  1. Click the Content navigation menu item and then select Lists
     
  2. Click the Create a list button
  
  
  3. Type a title and click the Create button

  After you have created a list, you can now create list items.

  Create List items

  1. Within a list, click the Create a list item button
  
  
  2. Add a title. This will be displayed as your list item title
     
  3. Click the Publish button
• Add content to a list item

  Within the edit view of a list item, you have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar.
  

  Examples of how this content displays on a page:

  • Expandable List
    
  • Link Card Icons w/ Content
    
• Add Categories and Tags

  Adding categories/tags allows the user to click on a desired category/tag to filter the content on the page. It can also filter specific items to be displayed on a page. You can add multiple categories and tags to content items such as lists, blogs, events, and images.
  

  Adding Categories

  1. Click the plus symbol under the Categories section.
  2. Begin typing a category name to choose a predefined category, select create a category* (see note below), or select show all categories to select from the category list 
     
     *NOTE: Any new category created should be saved under the site's parent category. Email sitefinity@utmb.edu for assistance in organizing new categories.

  Adding Tags

  1. Click the plus symbol under the Tags section.
  2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
     
• Make a list item a link
  1. Within the edit view of a list item, under the Custom fields section, type or paste the hyperlink into the Hyperlink field.

  

   

• Add icons to list items
  1. Copy the class name inside the quotation marks from the selected icon available in the Font Awesome online library
     
  2. Within the edit view of a list item, paste the class name into the Icon field under the Custom fields section of the list item
     
  3. Further customize the icon color by adding an icon color class to the CSS area. See Other Color Options.
     

  Need to add an icon to the HTML code? View the icons style guide

• Add custom CSS classes to a list item
  1. Within the edit view of a list item, add the class name(s) into the Custom CSS Class(es) field under the Custom fields section of the list item.
  2. If multiple classes are being added list them single space separated as shown in the example below:
     
• Add Modal box content to a list item

  This content will display inside a modal box when the list item is selected.

  1. Within the edit view of a list item, under the Custom fields section, you must add # into the Hyperlink field.
     
  2. Add content to the ModalBoxContent field. You can format content similar to the content area of a list item.
     
• Add an image to a list item
  1. Within the edit view of a list item, under the Related media section click the plus symbol.
     
  2. Click Upload an image from your computer or Select an image from your library

  Images can also be added to the content and modal box fields.

• Scheduling to publish and/or unpublish

  Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.

  1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
     
  2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.
     

Sitefinity Core Videos

• Sitefinity - Lists 11/20/15
• Sitefinity - Categories and Tags 11/20/15

How to

• Create a Blog

  Create a Blog

  1. Click the Content navigation menu item and then select Blogs
     
     
  2. Click the Create a Blog button
     
  3. Type the blog title and click the Create button
• Create a Blog post

  After you have created a Blog, you can now create blog posts.

  Create blog posts

  1. Within the selected blog, Click the Create a post button
  
  
  2. Add a title. This will be displayed as your blog post title
     
  3. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
     
  4. Add a summary
  
  
  5. Add a featured image
     1. Under the Related Media section click the plus symbol 
     
  6. Click Upload an image from your computer or Select an image from your library
  7. Click the Publish button

  Blog post example showing featured image, blog post title, and summary:
  

  
• Add Categories and Tags

  Adding categories/tags allows the user to click on a desired category/tag to filter the content on the page. It can also filter specific items to be displayed on a page. You can add multiple categories and tags to content items such as lists, blogs, events, and images.
  

  Adding Categories

  1. Click the plus symbol under the Categories section.
  2. Begin typing a category name to choose a predefined category, select create a category* (see note below), or select show all categories to select from the category list 
     
     *NOTE: Any new category created should be saved under the site's parent category. Email sitefinity@utmb.edu for assistance in organizing new categories.

  Adding Tags

  1. Click the plus symbol under the Tags section.
  2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
     
• Crediting author(s) and citing source
  1. Within the edit view of a blog post, under the Custom fields section, type in the author and/or article source information.
     • Author: Set the author's name. e.g. - John Doe
     • Article Source Name: Name of the external source where the original article was published
     • Article Source Publish Date: Date the external article was originally published
     • Article Source URL: add the website URL
       

  

• Redirect post to another webpage

  Within the edit view of a blog or news post, you can redirect a post to another webpage. Note that any content in the content area will not display on a webpage.

  1. Under the Custom fields section, paste the URL in the Redirect URL field
     
• Create a Blog slider

  Within the edit view of a blog post, you can add blog slider content that can be displayed on a page.
  

  1. Add a blog slider image
     1. Under the Related Media section click the Blog Slide Background Image plus symbol 
        
     2. Click Upload an image from your computer or Select an image from your library
  2. Add the Blog Slide Title and Blog Slide Summary.
     1. Under the Custom Fields section add the title and summary if applicable. Keep both short.
        

  Blog slide example displayed on a webpage with default settings: If no content has been added to the Blog Slider fields in the edit view of a blog post, the slider will use the blog post Title and Summary fields, have a dark gray background, the text will be white with no card background behind the text and the button will be a transparent "read more". 

  
• Customize Blog slider with CSS

  Within the edit view of a blog post, CSS classes can be applied to affect the look of the individual slide, image, or content of a blog post.

  Under the Custom fields section add classes to the Blog Slide Custom CSS field. Multiple CSS classes can be added but must be separated by a space. CSS classes can be found below.

  

  Blog slide CSS classes

  Classes with "sm" text will only affect small screens (smaller than 640px).
  Classes with "md" text will only affect medium screens (641px to 1007px).
  Classes with "lg" text will only affect large screens (1008px and larger).

  Card overlay color

  • uk-overlay-default (White transparent background)
  • uk-overlay-primary (Dark transparent background)

  Card overlay placement

  • uk-position-top
  • uk-position-left
  • uk-position-right
  • uk-position-bottom
  • uk-position-center
  • uk-position-top-left
  • uk-position-top-center

  • uk-position-top-right
  • uk-position-center-left (default)
  • uk-position-center-right
  • uk-position-bottom-left
  • uk-position-bottom-center
  • uk-position-bottom-right

  Slide Background Image Handling
  

  • img-fill
  • img-sm-fill
  • img-md-fill
  • img-lg-fill
  • img-contain
  • img-sm-contain
  • img-md-contain

  • img-lg-contain
  • img-cover (default)
  • img-sm-cover
  • img-md-cover
  • img-lg-cover
  • img-hide

  Content title text size, style and heading structure

  • title-h1 (default)
  • title-sm-h1
  • title-md-h1
  • title-lg-h1
  • title-h2
  • title-sm-h2
  • title-md-h2
  • title-lg-h2
  • title-h3
  • title-sm-h3
  • title-md-h3
  • title-lg-h3
  • title-h4

  • title-sm-h4
  • title-md-h4
  • title-lg-h4
  • title-h5
  • title-sm-h5
  • title-md-h5
  • title-lg-h5
  • title-h6
  • title-sm-h6
  • title-md-h6
  • title-lg-h6
  • title-hide

  Content summary text size

  • summary-large
  • summary-sm-large
  • summary-md-large
  • summary-lg-large
  • summary-medium (default)
  • summary-sm-medium
  • summary-md-medium

  • summary-lg-medium
  • summary-small
  • summary-sm-small
  • summary-md-small
  • summary-lg-small
  • summary-hide

  Content text alignment

  • text-left (default)
  • text-right
  • text-center

  Content text color options

  • content-red
  • content-gray
  • content-gray-light
  • content-white (default)
  • content-black
  • content-blue
  • content-blue-light
  • content-teal
  • content-teal-light
  • content-orange
  • content-orange-light
  • content-green
  • content-green-light
  • content-gray-1

  • content-gray-2
  • content-gray-3
  • content-gray-4
  • content-gray-5
  • content-gray-6
  • content-gray-7
  • content-gray-8
  • content-gray-9
  • content-gray-a
  • content-gray-b
  • content-gray-c
  • content-gray-d
  • content-gray-e

  Card Overlay width (%-based)

  • content-width-30
  • content-width-sm-30
  • content-width-md-30
  • content-width-lg-30
  • content-width-40
  • content-width-sm-40
  • content-width-md-40
  • content-width-lg-40
  • content-width-50 (default)
  • content-width-sm-50
  • content-width-md-50
  • content-width-lg-50
  • content-width-60
  • content-width-sm-60
  • content-width-md-60
  • content-width-lg-60

  • content-width-70
  • content-width-sm-70
  • content-width-md-70
  • content-width-lg-70
  • content-width-80
  • content-width-sm-80
  • content-width-md-80
  • content-width-lg-80
  • content-width-90
  • content-width-sm-90
  • content-width-md-90
  • content-width-lg-90
  • content-width-100
  • content-width-sm-100
  • content-width-md-100
  • content-width-lg-100

  Button text options

  • btn-read-more (default)
  • btn-read-article
  • btn-learn-more

  • btn-find-out-more
  • btn-hide

  Button color and size options

  • btn-default (default)
  • btn-red
  • btn-gray
  • btn-gray-light
  • btn-white
  • btn-black
  • btn-blue
  • btn-orange
  • btn-green
  • btn-purple
  • btn-teal

  • btn-coolgray3
  • btn-primary
  • btn-secondary
  • btn-info
  • btn-danger
  • btn-warning
  • btn-success
  • btn-large
  • btn-small
  • btn-block

  Background color + gradients

  • red-bg
  • gray-bg (default)
  • gray-light-bg
  • gray-mid-bg
  • gray-dark-bg
  • blue-bg
  • blue-light-bg
  • teal-bg
  • teal-light-bg
  • orange-bg
  • orange-light-bg
  • black-bg
  • white-bg
  • gray-1-bg
  • gray-2-bg
  • gray-3-bg
  • gray-4-bg

  • gray-5-bg
  • gray-6-bg
  • gray-7-bg
  • gray-8-bg
  • gray-9-bg
  • gray-a-bg
  • gray-b-bg
  • gray-c-bg
  • gray-d-bg
  • gray-e-bg
  • bg-gradiant (default)
  • bg-gradiant-horizontal
  • bg-gradiant-diagonal
  • bg-gradiant-bright
  • bg-gradiant-bright-horizontal
  • bg-gradiant-bright-diagonal
• Scheduling to publish and/or unpublish

  Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.

  1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
     
  2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.
     

Sitefinity Core Videos

• Sitefinity - Blogs 11/20/15

How to

• Create a News Item

  Unlike Blogs, you can only have one News Feed with multiple news items.

  1. Click the Content navigation menu item and then select News
     
  2. Click the Create a News Item button
     
  3. Add a title. This will be displayed as your news post title
     
  4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
     
  5. Add a summary
  
  
  6. Add a featured image
     1. Under the Related Media section click the plus symbol 
     
  7. Click Upload an image from your computer or Select an image from your library
  8. Click the Publish button
• Add Categories and Tags

  Adding categories/tags allows the user to click on a desired category/tag to filter the content on the page. It can also filter specific items to be displayed on a page. You can add multiple categories and tags to content items such as lists, blogs, events, and images.
  

  Adding Categories

  1. Click the plus symbol under the Categories section.
  2. Begin typing a category name to choose a predefined category, select create a category* (see note below), or select show all categories to select from the category list 
     
     *NOTE: Any new category created should be saved under the site's parent category. Email sitefinity@utmb.edu for assistance in organizing new categories.

  Adding Tags

  1. Click the plus symbol under the Tags section.
  2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
     
• Crediting author(s) and citing source
  1. Within the edit view of a news post, under the Custom fields section, type in the author and/or article source information.
     • Author: Set the author's name. e.g. - John Doe
     • Article Source Name: Name of the external source where the original article was published
     • Article Source URL: add the website URL
       
• Redirect post to another webpage

  Within the edit view of a blog or news post, you can redirect a post to another webpage. Note that any content in the content area will not display on a webpage.

  1. Under the Custom fields section, paste the URL in the Redirect URL field
     
• Scheduling to publish and/or unpublish

  Within the edit view of a page or content item, you can schedule a post to publish and/or unpublish on a specific date.

  1. Click the ellipses button (...) on the top-right of the page. Then select Schedule publish/unpublish from the drop-down menu.
     
  2. Type or select the date and time you would like to publish the page or item. You can also type or select the date and time you would like to unpublish. Click the Save changes button when complete.
     

Sitefinity Core Videos

• Sitefinity - News 11/20/15

How to

• Create a Calendar & Event

  Create a Calendar

  1. Click the Content navigation menu item and then select Events
     
  2. Click the Create a calendar button
     
  3. Add the calendar title and color. Refer to the web color guide for UTMB brand colors. Click the Create button when finished.
     

  Create an Event

  1. Click the Content navigation menu item and then select Events
     
  2. Click the Create an event button. You can click the < All calendars link to change the calendar first, if you have multiple calendars.
     
  3. Type the event title.
     
  4. Click in the content area. You have the option to use the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Type and format the content.
     
  5. Add a summary
     
  6. Type or select the Event start and Event end date and time. If it is an all-day event, you can check the All day box.
     
  7. Add categories and tags
     This allows you to filter what is displayed on a page. You can add multiple categories and tags.
     
  • Adding Categories
    1. Click the plus symbol under the Categories section.
    2. Begin typing a category name to choose a predefined category, select create a category, or select show all categories to select from the category list 
       
  • Adding Tags
    1. Click the plus symbol under the Tags section.
    2. Begin typing a tag name to create a new tag or select a predefined tag. You can also select Show all tags to search through the predefined tags.
       
  8. Add location information
     • Street
     • City
     • Country
     • State
     • How to find us
     • Venue
     • Postal Code
     
     
  9. Add contact information
     • Email
     • Website
     • Contact name
     • Cell phone
     • Phone
     
     
  10. Add an image
      • Under the Related media section click the plus symbol. Select or upload an image.
      
      
  11. Click the Publish button

How to

• Create a Shared Content Block

  You can create content blocks that can be shared on multiple pages.

  1. Click the Content navigation menu item and then select Content blocks
     
  2. Click the Create a content block button
     
  3. Add a title. The title will not display on the page.
  4. Click in the content area to add content. Format content using the formatting toolbar and/or edit the HTML by selecting the </> option on the far right of the toolbar. Formatting options include:
     • Make the text a paragraph, quotation, heading, bold, or italic
     • Change the text color
     • Create an unordered and ordered list
     • Indent or outdent text
     • Create a link
     • Add an image
     • Create a table
     • Align content
     • Make the text a subscript and a superscript
     • Add a horizontal rule
     • Remove formatting
       
  5. Optional: Add Categories and tags to filter what is displayed on a page. You can add multiple categories and tags.
     
  6. Click the Create button when finished

How to

• Create a Form
  1. Click the Content navigation menu item and then select Forms.
     
  2. Click the Create a form button
     
  3. Add a title and click the Create button
     
• Add form fields

  Within the edit view of a form, you can add common form fields to a form

  1. On the right side menu, click the Content tab, click the Common Controls drop-down menu. Click, hold and drag a form field onto the Body section of the form, and then release the form field.
     
  2. Customize each form field by clicking Edit on the form field widget.
  3. Required for all UTMB Sitefinity forms: Add a CAPCHA before the Submit button on the form.
• Form layout options

  Within the edit view of a form, you can organize form fields by using various layout elements.

  1. On the right side menu, click the Layout tab, click the Grid widgets drop-down menu. Click, hold and drag a grid widget onto the Body section of the form, and then release the grid widget. The example shows the grid-6+6 grid widget which divides the section into 2 columns. Read more about the known issues for form layouts.
  2. There are several layout options. Be sure to experiment with the various layout options to find the layout that works best for the form. Learn more about layouts.
     
• Form settings

  Within the edit view of a form, you can update the form settings.

  1. On the right side menu, click the ellipses button (...) on the top-right of the page. Then select Title & properties from the drop-down menu.
     
  2. Settings options
     • Restrict who can submit form entries
     • Create a custom "After submission" message or redirect to another page
       
     • Send email notification that a new form has been submitted
     • Confirmation emails cannot be sent to the form respondent at this time
       

Sitefinity Core Videos

• Sitefinity - Form Administration 10/26/16
  
  

  Form Administration PDF 

  Managing Form Responses – Duration: 09:55

  Video Time-stamps. 

  • Notifications 00:20
  • Logging in 01:33
  • Coming from an email notification
  • To log in to Sitefinity without a notification
  • Managing responses 02:11
  • Form Administrator and Form Entries Screens
  • Getting to the Forms Administrator 02:32
  • Forms Administrator – Response Management 03:02
  • Form Entries 03:42
  • Form Status Displayed: 03:58
  • Form Entry Details Displayed: 04:40
  • Form Entry Filter and Search: 05:07
  • Form Entry Details Screen – Individual Responses 05:57
  • Details 05:57
  • Options:
  • Close and Archive: 07:24
  • Open and In Progress. 07:51
  • Open and Not in Progress. 08:15
  • Locked Form Entry – Avoiding Issues and Unlocking 08:54

How to

• Create a Feature Collection
  1. Click the Content navigation menu item and then select Feature Box
     
  2. Click the Create a featurecollection button
     
  3. Add a title.
     
  4. Optional: Add buttons (maximum of 5 buttons)
     1. Check the Show Navigation Menu checkbox
     2. Enter in the button fields needed per button:
        • Button Title
        • Button Link
        • Button CSS Class
        • Button Icon
        • Button Image
          
  5. Click the Publish button when complete.
• Create a Feature box

  After you have created a Feature Collection, you can create Feature boxes. Each feature collection can have multiple feature boxes.

  1. Click the Feature Collection title.
     
  2. Click the Create a featurebox button
     
  3. Add a title, slide caption (optional), and a hyperlink (optional)
     
  4. Optional: Add Categories and tags to filter what is displayed on a page. You can add multiple categories and tags.
     
  5. Add an image. All images in a Feature collection must be cropped to the same dimensions.
     
  6. Click the Publish button when complete.

How to

• Sharing a SharePoint link on the web
  1. In SharePoint, hover over the file that you want to share and click the share button.
     
  2. Click the gear icon next to the Copy link button
     
  3. Select who you would like this link to work for:
     • Anyone: This link will be a public link and anyone who clicks the link can view the document
     • People in the University of Texas Medical Branch with the link: Only UTMB employees who are logged into sp.utmb.edu can view the document
     • People with existing access: Only people with existing access to the SharePoint folder can view the document
     • Specific people: Only people you specify can view the document
       
  4. Under Other settings, adjust the edit settings if necessary:
     • Can edit: do not select this if you are making the link public as it will allow anyone with the link to edit the original document
     • Can view: default setting which allows users to view and not edit the document
       
  5. Click the Apply button
     
  6. Click the Copy link button.
     
  7. You can now paste the link into a list item, content block, blog post, event, news item, etc.

  Note: For documents to be shared with the public or anyone outside of your department, the document must live in the Collaboration environment in SharePoint.

• Replacing a SharePoint document without breaking links
  1. Name the new file the exact same as the file you would like to replace in Sharepoint.
     • NOTE: It is best practice to not include dates in the file name of the document. You can rename the file in Sharepoint and it will not break the current link.
  2. Upload the new file into the same folder in Sharepoint where the current document is stored
  3. A window will pop up with the message: A file with this name already exists. Would you like to add this new file as the latest version of the existing files, or rename it and keep them both?
     
  4. Click the Replace button