Icons are Replaced with Letters After Importing a Bb Learn 2012 Theme
Date Published: Jun 22,2017 Category: Planned_First_Fix_Release:Will_Not_Fix; Product:Course_Tools_Learn;
Version:X9_1_SP10,X9_1_SP11_9_1_110082_0,X9_1_SP12_9_1_120113_0,X9_1_SP13_9_1_130093_0,X9_1_SP14,Learn_April_2014_9_1_201404_160205,Learn_October_20
Article No.: 000016580
Producto: Blackboard Learn
Versión: 9.1
Paquetes de servicio: 9.1 SP10 (9.1.100401.0), 9.1 SP11 (9.1.110082.0), 9.1 SP12 (9.1.120113.0), 9.1 SP13 (9.1.130093.0), 9.1 SP14 (9.1.140152.0), Learn April 2014
(9.1.201404.160205), Learn October 2014 (9.1.201410.160373), Learn 9.1 Q4 2015 (9.1.201510.1171621)
Descripción del problema: When the Bb Learn 2012 theme is downloaded, imported and used in the system, icons are displayed as letters instead of images. This occurs
whether changes have been made to theme files or not.
Pasos para repetir:
1.
2.
3.
4.
5.
6.
7.
8.
9.
Log in as System Administrator
Download a default theme
Navigate to Sys Admin > Brands and Themes > Theme and Palette Catalog > Download 'Bb Learn 2012'
Navigate to Sys Admin > Brands and Themes > Theme and Palette Catalog > Create theme > upload the unchanged zip file obtained in step 2
Set as the system theme
Navigate to Sys Admin > Brands and Themes > Manage Brands > Customize institution brand > Select the new theme created in step 3
Open Internet Explporer
Navigate through the tabs, observing the utility icons for Home and System Admin are replaced with letters
Switch the designated theme back to Bblearn 2012 and the icons return
Expected Behavior:
The utility icons are displayed.
Observed Behavior:
Letters are displayed.
Síntomas: Toward the top frame and within breadcrumb trails, single letters of the alphabet are seen instead of the graphical utility icons: i.e. An H for Home tab usually
represented by an image of a House and an S for the System Administrator Panel where it's usually seen as a gear/cogwheel.
Causa: After the user downloads and imports a theme, the font source URL value in the Theme CSS file does not point to the appropriate location of the utility icons.
Resolución/Solución alternativa: First Fix:
This is the culprit most of the time, and how to fix.
Download theme and extract.
Open theme_specific.css in core folder
Locate line 12 src: local('') and replace it with src: local('☺')
The problem is some text editors are breaking this code src: local('☺') it changes it to src: local('')
I suggest using text pad as it does not convert the character so it will save properly. Sublime for example is known to convert the character.
Zip theme and replace bad theme with fixed theme.
If issue is not resolved then some other foreign character has been introduced to the files and you will need to find it via the easiest way with second fix.
Second Fix:
If first fix fails try the following:
This problem likely occurs because a foreign character is somehow included in the theme text.
1. Pull the code and run it through notepad or some other test editor that will expunge foreign characters.
The image below has a Latin character.
9 times out of ten this foreign character is the only thing that it breaking the theme and not the secondary workaround.
TextPad is very good at finding and telling you about a foreign character.
If you're still experiencing the problem, build the theme on another PC or ask support for help.
Use the below solution only if the previous fixes did not correct the error. Most times the below fix will not correct the problem if there is a foreign character in the theme.
While this may have worked at one time for others, it makes little sense that a default theme with this line NOT commented out doesn't break the theme and there is no need
to add the new line. If the default is working then you likely have a foreign character and should see fix above.
1.
2.
3.
4.
5.
6.
7.
8.
Navigate to System Admin > Brands and Themes > Click the Download option in the actions menu next to the Theme name
Extract the file theme_specific.css from the zip file
Open the css file in a text editor and make the following change for: @font-face
Comment out this line: src: url('fonts/utilicons/utilicons-web-webfont.eot');
Add a new line pasting the following: src: url('/themes/as_2012/fonts/utilicons/utilicons-web-webfont.eot');
Save the changes to the css file then (drag and drop) merge it back into the ZIP file overwriting the original css file
In Bb Learn System Admin > Brands and Themes > click Create Theme and use the browse option to select the theme ZIP file
Use a private browsing session, an alternative browser or clear browser cache to confirm the steps resolved the problem
Información de mejores prácticas: After performing the workaround, please initiate a new (private) browsing session or alternative browser to confirm the icons are properly
displayed. Users can opt to clear browser cache if the icons are reported to still be missing.
Versión de destino: Will Not Fix
Parche disponible: No