Snap

On this page

    Snap is a simple, intuitive, responsive theme, based on the Twitter Bootstrap 3.2 framework.

    The main benefit of Snap is that it allows you to provide a consistent experience for users across any device. Snap is designed to provide an elegant, modern website for online learning.


    Features of Snap

    Snap focuses on drawing the user in through a clean visual experience, and provides learners and educators with quick access to the courses that are important to them.

    • Responsive: Snap displays information well on varying screen resolutions. Images, video, and all your institution's content will scale to fit on a user's device, no matter what shape or size of the display. Text size will be optimized according to screen size. Users can choose the device they want to use when working with their educational materials. Alongside this cross-device optimization, Snap provides simple cross-device navigation for users.
    • Simple Layout and Navigation:
      • Personal Menu: The Menu provides users with quick access to all their courses, from anywhere in a site. Administrators can set the menu color using the Snap Theme Settings page, and instructors can set their course images to appear in the menu. The menu can also include a user's deadlines for scheduled course assignments, and their notifications of messages. The personal menu displays current and past courses, grouped by end date and year, for easy access to students.
      • Admin Menu: The Admin menu provides quick access to the Administration block from any page.
      • Course Contents, Tools, and Search: Course layout in Snap has been designed to resemble a standard website. With Snap, the course layout displays each section, week, or topic on its own page within the course, with clear titles, and navigation between pages. Other elements of the course such as participants, grades, and blocks are shown in the Course Dashboard tab. The unique single-column structure of Snap allows teachers to creates a clean, distraction-free site layout with lots of content, that is conducive to learning and easy to navigate.

    More on using Snap for Teachers


    Enable Snap for your institution

    Steps: Site administration > Appearance > Themes > Theme selector

    To select the Snap theme, log in as a user with site administration privileges.

    1. From Site administration, select Appearance.
    2. Select Themes and Theme Selector.
    3. Beside Default select Change theme.
    4. Find the Snap theme and select Use theme.
    5. Select Continue.

    Customize Snap

    Steps: Site administration > Appearance > Themes > Snap

    Snap presents administrators with some simple, yet powerful, website customization options. You can modify the colors of four areas of Snap's navigation bar without adding CSS. You can change the background and font colors for the navigation bar and the My Courses link.

    1. From Site administration, select Appearance.
    2. Select Themes and Snap.
    3. Set the Branding for your site:
      • In Site name, type the name of your institution.
      • In Site description, type a description for your institution. This information appears as the tag line for your site on the homepage. It is not the title of the site.
      • Set your institution's Brand color. Type the hexadecimal code or select the color. Any link on your site and many backgrounds are set with this color.
      • Choose the Logo for your institution's site. Drag or upload a file for your logo.
      • Choose the icon to use as your Favicon. Select an image to use as a bookmark link when a student or instructor marks the site as a browser favorite.
      • Select the Cover display to upload an image for your institution's site. Drag or upload an image as the site's homepage. Optionally, you can upload up to three images to use as a Course Carousel.
    4. Set the menus and navigation for your site.
      • Choose what you want to appear in a user's personal menu. All options are selected by default.
      • Hide default Moodle navigation block is selected by default. This removes the Moodle blocks and uses only the Snap menu.
      • Show Course footer is selected by default.
      • Type the information to appear in your site's footer.The footer of your website is a good place to display links to other sites that may be important to learners within your school or organization, help, support and administrative policies that your institution may be required to publish, or other information such as the address and telephone number of the building.

        If you want to change the default links available in the on the bottom right of the footer, you need to make the change in the Theme Settings section. Select the Site Administration block, then Appearance, then Themes, and then Theme Settings. Set your changes in the Custom Menu Items box.

    5. Set the Advanced Branding for your site. Blackboard recommends you keep the default values. The Advanced Branding section is for those users that are highly skilled in HTML/CSS. To learn more, see Activating fonts and Custom CSS.

    Moodlerooms does not offer support for issues that arise as a result of custom CSS. Any issues found to be a result of custom CSS are your responsibility to resolve.


    Advanced branding

    Using a custom font library in Snap is no different from using one on any other html/css based website. If you use a service for your site fonts, such as Adobe, cloud.typography, Fontdeck, Typekit or Google fonts, you will have to create a link to include the fonts on your website.

    If you are hosting the fonts on your own content delivery network, you will need the link tag for your CDN.

    Embedding fonts

    Steps: Site administration > Appearance > Additional HTML

    1. From Site administration select Appearance and Additional HTML.
    2. In the Within HEAD field, enter the font include script.
    3. Select Save changes.

    This will include your fonts on every page within your site.

    Activating fonts

    Steps: Site administration > Appearance > Themes > Snap

    1. From Site administration select Appearance.
    2. Select Themes and Snap.
    3. Enter the font name with quotes of the Heading font and Serif fonts.

      "Roboto"

    Custom CSS

    Steps: Site administration > Appearance > Themes > Snap

    Snap allows you to add your own custom CSS that can be included on every page of your website. The Custom CSS box accepts any CSS code that you want to include, allowing you to override or create a new CSS without having to edit the CSS file or download the design. We recommend that you validate any CSS code before including it on your site.

    1. From Site administration select Appearance.
    2. Select Themes and Snap.
    3. Enter the custom CSS.

    Moodlerooms does not offer support for issues that arise as a result of custom CSS. Any issues found to be a result of custom CSS are your responsibility to resolve.


    Snap with LaTeX filter

    Steps: Site administration > Plugins > Filters > TeX notation

    If your institution uses LaTeX filter for mathematical expressions, your site may experience enlarged font sizes. Here are some tips to get the best look out your display:

    1. From Site administration select Plugins.
    2. Select Filters and TeX notation.
    3. In the TeX notation page, change the Density setting to a higher number.

      It is recommended that you set Snap using a 280 density. This setting will improve the overall smoothness of the lines in the image.

    4. Switch to PNG in the convert output format.

      The PNG file type smooths the appearance of the expression significantly.These settings change the appearance of the TeX filtered notation throughout the site.


    Snap Features & Benefits spots

    Steps: Site administration > Appearance > Themes > Snap > Features & Benefits Marketing

    Add up to three columns of information under the page banner image in Snap. Use this area to advertise features or benefits of the site to your users and prospective users.

    To create a feature or benefit marketing spot administrators navigate to Site admin. From Site admin select Appearance, Themes, Snap, and Features & Benefits Marketing. From here you can add up to 3 features/benefits to the front page, displayed below the page banner image.

    To create a feature spot add a title and some text (with an optional image). Adding one feature displays one feature, two displays two features and three displays three features. You can also add a heading to the feature spots, which will only display if you have created a feature spot.

    Once a feature spot is added, select Turn editing on from the front page see a quick link to edit the feature spot. This reduces the amount of time it takes to add marketing materials to your front page and provides greater control with less HTML knowledge.

    Add features and benefits

    Features and benefits on the front page


    Snap Carousel

    Snap theme Cover Carousel

    Carousel Example


    Featured courses

    Steps: Site administration > Appearance > Themes > Snap > Featured courses

    Highlight courses on your front page. Site administrators can add up to 8 courses on the front page by using the course id numbers.

    1. From Site administration select Appearance and Themes.
    2. Expand Snap and select Featured courses.
    3. Type the course id for each course you want to feature.
    4. Select Save changes.

    Course cover images and titles automatically appear on the front page after configuration.

    Add featured courses

    Featured courses on the front page


    Show resources as cards or lists

    Steps: Site administration > Appearance > Themes > Snap > Resource display

    Change how resources and activities appear in your Snap courses. Snap allows organizations to display resources and activities as cards or simple links.

    1. From Site administration select Appearance and Themes.
    2. Expand Snap and select Resource display.
    3. Select List or Card.
    4. Select Save changes.

    Change the resource display

    Cards and links


    Change course page layout

    Steps: Site administration > Appearance > Themes > Snap

    Administrators can now choose where course navigation goes in Snap. Move the table of contents to the left of the course content or above it.

    By default, the table of contents appears above the course content. Follow these steps is you want to move it to the left.

    1. From Site administration select Appearance and Themes.
    2. Expand Snap and select Snap.
    3. Under Advanced branding select Vertical table of contents.
    4. Select Save changes.

    Table of contents above

    Left table of contents


    Social media links in Snap

    Steps: Site administration > Appearance > Themes > Snap

    Add Facebook, Twitter, Youtube and Instagram links in the footer automatically. Add the URL to pages on each service through Snap's administrative settings and the icons and links appear in the footer.

    Now you connect socially with your users without needing to add HTML to the Site footer area of Snap's settings. The location of these icons is predetermined and assigned in the footer and can only be changed using CSS.

    Add social media links

    Add social media links

    Social media links in footer

    Social media links in footer