Skip to main content
pdf?stylesheet=default
Blackboard Help

Create and Upload Icon Packs

End of Support for Express ends in July 2017. End of Life for Express ends July 2018.

Express comes with the capability to select an icon pack when creating an Express design for your institution. An icon pack is a set of icons used to identify activities, as links in the interface. Express allows site administrators to add their own icon packs to create an unlimited number of approved icons for the website interface for their users to choose from.


Create an icon pack

Icon packs are created on your local computer and then you upload the packs to Express. This section covers the technical aspects of an Express icon pack, the file structure, and XML manifest file that are specific to an Express icon pack.

Review the details on the structure of an icon pack as you create your own.

You must have knowledge of XML coding to create your own icon packs.


Express icon pack ZIP file structure

The following is a list of folders and files that make up the Express icon pack's structure (not all files are required). You are expected to zip the Express icon packs before you upload them to your institution website.

pix_core/ (optional)
pix_plugin/ (optional)
style/ (optional)
style/core.css (optional)
manifest.xml
sample.png

Download and extract icon pack_example.zip to view an example icon pack.


Pix Core directory (pix_core/)

The Pix Core directory contains all of the core icons for navigation, calendar, and editing actions. The pix_core folder structure looks like the following (all files and folders are optional):

a/ - action icons for the navigation bar
c/ - course icons
f/ - file type icons
g/ - group icons
i/ - interface icons that are not associated with blocks or navigation.
m/ - money icons
s/ - smiley face icons
t/ - usually block and navigation icons
u/ - user image icon
y/ - YUI icons
adv.gif
b.gif
docs.gif
help.gif
madewithmoodle.gif
moodlelogo-med-white.gif
moodlelogo-med.gif
moodlelogo.gif
movehere.gif
req.gif
spacer.gif
webding.png

Within each directory there are a number of icons. The pix_core.zip contains all of the possible icons you can find in the Create a Design option of the Express block. Not all of the icons in the folder need to be uploaded or replaced. Express will default to use the Moodlerooms icon for any icon file not uploaded. Icon files can be saved in the .gif, .jpg, .jpeg or .png formats. Express will force icons to display with a width of 20 pixels and a height of 20 pixels.


Pix Plugins directory (pix_plugins/)

The Pix Plugins directory contains the icons that are used by the blocks, activities, and repositories. The pix_plugins folder structure looks like the following (all files and folders are optional):

blocks/ - block specific icons
local/ - icons for local plugins such as personal learning designer
local/pld
mod/ - activity icons each should have a sub folder with the directory name of the activity and at least an icon.gif file
mod/assignment
mod/book
mod/chat
mod/choice
mod/data
mod/feedback
mod/folder
mod/forum
mod/glossary
mod/imscp
mod/label
mod/lesson
mod/page
mod/quiz
mod/resource
mod/scorm
mod/survey
mod/wiki
mod/workshop
mod/url
repository/ - repository plugin icons
repository/recent
repository/server
repository/upload
repository/user

Each plugin directory has sub-directories for each plugin that has icons. Within this sub-directory there is an icon.gif file that is displayed when the activity is shown in a course. The pix_plugin.zip contains all of the plugin directories and icons that you can find in the Create a Design option of the Express block. Not all of the icons in the folder need to be uploaded or replaced. Express will default to use the Moodlerooms icon for any icon file not uploaded. Icon files can be saved in the .gif, .jpg, .jpeg or .png formats. Express will force icons to display with a width of 20 pixels and a height of 20 pixels.


Style directory (style)

The style directory contains the core cascading style sheet used by the icon pack.


core.css (optional)

The core.css file contains the CSS used to control the size of the icons as well as the CSS for any icons that are used as background images. Moodlerooms uses a width of 16 pixels and a height of 16 pixels for large icons and a width of 11 pixels and a height of 11 pixels for small icons. Express uses a width of 20 pixels and a height of 20 pixels for large icons and a width of 16 pixels and a height of 16 pixels for small icons. Use the core.css to change the height and width based on the size of the icons in the icon pack. Also, change any padding to make sure navigation icons have sufficient padding for the size of the icon.

img.iconsmall { height:11px; width:11px;}
img.icon {height:16px;width:16px;}

.course-content .section .activity img.activityicon {height:16px;width:16px;}

.path-grade-report-grader .gradestable img.smallicon {width:11px; height:11px;}

.block .block_tree .tree_item,
.block_settings .block_tree .tree_item,
.block_navigation .block_tree .tree_item {padding-left:18px; padding-bottom: 3px; margin-top:0; margin-bottom:0;}

.block_navigation .block_tree li.item_with_icon > p img,
.block_navigation .block_tree .type_activity > .tree_item.branch img,
.block_settings .block_tree li.item_with_icon > p img {top:0px;}

.block_navigation .block_tree li.item_with_icon.contains_branch .tree_item{ padding-left: 34px;}
ul.block_tree ul ul li.item_with_icon.contains_branch p img{width: auto; height:16px;}
ul.block_tree ul ul ul li.item_with_icon.contains_branch p img{width: auto; height:16px;}

ul.block_tree li .tree_item.emptybranch,
ul.block_tree li .tree_item.branch{background-size: auto 16px;-moz-background-size: auto 16px;}
ul.block_tree ul li .tree_item.emptybranch,
ul.block_tree ul li .tree_item.branch{background-size: auto 14px;-moz-background-size: auto 14px;}
ul.block_tree ul ul li .tree_item.emptybranch,
ul.block_tree ul ul li .tree_item.branch{background-size: auto 12px;-moz-background-size: auto 12px;}
ul.block_tree ul ul ul li .tree_item.emptybranch,
ul.block_tree ul ul ul li .tree_item.branch{background-size: auto 10px;-moz-background-size: auto 10px;}


Background icons CSS

Moodlerooms has certain icons that are used in the core.css file as background images. Express follows the same method to identify strings in CSS that should be replaced with a url to the icon indicated by the string. The method is iconame. To use the workshop activities userplan task-todo.png in a CSS, you would use userplan/task-todo. The mod_workshop tells the site to look in pix_plugins/mod/workshop, and the userplan/task-todo tells the site to use the task-todo image (file extension can be gif, png, jpg, or jpeg) in the userplan sub-directory. The following CSS covers all the icons that an icon pack could change and the CSS that the Express theme needs to display the icon correctly:

.course_category_tree .category,
#dockeditempanel .dockeditempanel_hd {background-image:url(hgradient);}
#dock,
#dock .dockeditem .dockedtitle {background-image:url(vgradient);}
yui-skin-sam .repository_ggfl_search_panel .ft span.default,
.yui-skin-sam .repository_ggfl_search_panel .yui-button {background-image:url(gradient);}
#page-blocks-community-communitycourse .star-rating{background-image:url(star-rating);}
#page-blocks-community-communitycourse .star-rating li.current-rating{background-image:url(star-rating);}

/* block navigation and setting icons*/
.course_category_tree .category.with_children>.category_label,
.block_settings .block_tree .tree_item.branch,
.block_navigation .block_tree .tree_item.branch {background-image:url(expanded);}
.jsenabled .block_settings .block_tree .tree_item.emptybranch,
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image:url(collapsed empty);}
.smartselect .smartselect_submenuitem,
.jsenabled .course_category_tree .category.with_children.collapsed .category_label,
.jsenabled .block_settings .block_tree .collapsed .tree_item.branch,
.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {background-image:url(collapsed);}
.jsenabled .block_navigation .block_tree .tree_item.branch.loadingbranch {background-image:url(loading small);}
.jsenabled.dir-rtl .block_settings .block_tree .tree_item.emptybranch,
.jsenabled.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {background-image:url(collapsed empty rtl);}
.jsenabled.dir-rtl .block_settings .block_tree .collapsed .tree_item.branch,
.jsenabled.dir-rtl .block_navigation .block_tree .collapsed .tree_item.branch {background-image:url(collapsed rtl);}
.path-mod-quiz .qnbutton.flagged {background-image:url(ne red mark);}

/* Workshop icons*/
.path-mod-workshop .userplan tr.phasetasks li {background-image:url(userplan/task-todo);}
.path-mod-workshop .userplan tr.phasetasks li.completed {background-image:url(userplan/task-done);}
.path-mod-workshop .userplan tr.phasetasks li.fail {background-image:url(userplan/task-fail);}
.path-mod-workshop .userplan tr.phasetasks li.info {background-image:url(userplan/task-info;}

.path-course-view li.activity form.togglecompletion .ajaxworking {background-image:url(ajaxloader);}
.course_category_tree .category .courses .course_link {background-image:url(course);}

/* filepicker */
/* first or middle sibling, no children */
.file-picker .ygtvtn {background-image:url(tn);}
/* first or middle sibling, collapsable */
.file-picker .ygtvtm {background-image:url(tm);}
/* first or middle sibling, collapsable, hover */
.file-picker .ygtvtmh {background-image:url(tmh);}
/* first or middle sibling, expandable */
.file-picker .ygtvtp {background-image:url(tp);}
/* first or middle sibling, expandable, hover */
.file-picker .ygtvtph {background-image:url(tph);}
/* last sibling, no children */
.file-picker .ygtvln {background-image:url(ln);}
/* Last sibling, collapsable */
.file-picker .ygtvlm {background-image:url(lm);}
/* Last sibling, collapsable, hover */
.file-picker .ygtvlmh {background-image:url(lmh);}
/* Last sibling, expandable */
.file-picker .ygtvlp {background-image:url(lp);}
/* Last sibling, expandable, hover */
.file-picker .ygtvlph {background-image:url(lph);}
/* Loading icon */
.file-picker .ygtvloading {background-image:url(loading);}
/* the style for the empty cells that are used for rendering the depth* of the node */
.file-picker .ygtvdepthcell {background-image:url(vline);}

img.folder_icon{ background-image:url(folder_open); }
.collapsed img.folder_icon { background-image:url(folder); }


Icon pack manifest file (manifest.xml)

The icon pack's manifest file is used to store information about the icon pack that will be displayed in the Create a Design feature of the Express block. A manifest.xml file looks like the following:

<?xml version="1.0" encoding="UTF-8"?>
<iconpack>
<name>Serene grayscale</name>
<directory>serenegray</directory>
<notes>These icons are the same as the serene icon pack except they have all been gray scaled, which may work better with some templates.</notes>
</iconpack>

The <directory> tag is used for the name of the directory that the icon pack is stored in. This tag is a child of <iconpack> and is required. The Express block will do the following with the value of this tag:

  • Create a directory with this value where all of the icon pack's files are stored in the moodledata/express/iconpacks directory when when the icon pack is uploaded via the Icon Packs tab.
  • Use this value to locate icon pack images in the pix_core and pix_plugins directories for the icon pack when a design is created from a template.
  • Use this value to locate the sample.png for the icon pack when the icon pack is selected by the user in the Create a Design sub-tab.

The <name> tag is the displayed name for the icon pack in all locations where Express displays the icon pack. This is a child tag of <iconpack> and is required.


Icon pack sample image (sample.png)

The icon pack sample image (sample.png) is a collage of the icons in the pix_core and pix_plugins directories. The icon pack sample image is available in the Create a Design page to provide you with a sample of what the icons will look like.


Upload an icon pack

Steps: Express > Icon Packs

After you create your icon pack, you can upload the icons to your institution website through the Express block.

  1. From the Express block, select Icon Packs.
  2. Select Upload an icon pack zip.
  3. Select Choose a File to access the file selection window.

    If the icon pack has the correct structure, it uploads successfully.

    If a folder or file is not in the correct structure, you see a red error message warning that the file is not part of an Express icon pack, for each unexpected file. These files are removed before the icon pack is added to Express for security purposes. It is possible to have files removed and still successfully upload an icon pack.

  4. Select Save icon pack when finished.

You can also delete or download icon packs from the Icon packs tab.