Blackboard

BB learn 2012 theme in SP 8: Where are the icons?

rated by 0 users
Answered (Not Verified) This post has 0 verified answers | 13 Replies | 5 Followers

Top 75 Contributor
38 Posts
Guy Heatley posted on 1 May 2012 10:55 AM

Hi, I don't usually have much to do with the look and feel of the BB front end so excuse me if my question has an obvious answer! I'm asking on behalf of a colleague ...

Apparently we need to use the "BB Learn 2012" theme from SP8  for some of its new features.

How do I get the icons for links used at the top of the page (Home, my places, logout etc) to re-appear?

Is there some way to export the new theme, tweak it and upload it again under a different name?

Thanks!

Guy

 

All Replies

Top 10 Contributor
Male
7,800 Posts

Hi Guy,

Are you missing the icons completely, or are you wanting to change the existing icons?

Other themes allow you to select between several icon sets and none at all for those top frame links (My Places, Home, Help) by editing the Navigation Settings on the Brand.  However, it looks like the "Bb Learn 2012" theme only has one set of icons, so it doesn't give you the option to choose different icons or choose to display text instead of/in addition to the icons.

Yes, you can export the theme and tweak it.  Just go to Brands and Themes > Theme and Palette Catalog and choose Download from the pull-down item menu for the the theme you want to customize.  That will give you a .zip file full of CSS files and icons.  You can edit those, then create a new theme on the same Theme and Palette Catalog screen and upload the new theme file.

Mike

Top 75 Contributor
38 Posts

Hi Mike,

If I go to: 

Brands and Themes --> Manage Brands --> Customise: Default Brand (which is BB Learn 2012)

then select the "Navigation Settings" tab, in the section called "

4.   Designate Home and Support Links

I don't see Icon Sets for the BBlearn 2012 theme: they are completely missing - no reference to icons at all.

On a theme we have imported from the previous blackboard version, that section allows selection of a set of icons via radio buttons.

This is what is causing the frustration: we want some icons but also want the features of the BB Learn 2012 theme.

Guy

Top 10 Contributor
Male
7,800 Posts

Hi Guy,

As I mentioned in my previous post, it looks like the "Bb Learn 2012" theme has only one set of icons, and doesn't give you the choice to select from several icon sets or to have text and no icons the way the older themes did..

Are you saying that you're not seeing any icons at all in the top frame when you use the new theme, or are you just saying that you can't change the existing icons from the brand customization area?

Mike

Top 10 Contributor
Male
7,800 Posts

Guy,

By the way, the standard Learn 2012 theme icons are stored in the images/ folder when you download the theme, so you should be able to change those for other icons if you wanted as part of creating a custom version of the theme.

Mike

Not Ranked
Male
3 Posts

I wonder if the problem I'm having is the same as this... if not I can create a new thread.

We needed to edit the theme for our upcoming SP8 upgrade using the "Bb Learn 2012" theme as a base, so I downloaded the Learn 2012 as described above, modified the CSS as needed (changing colors only) and re-uploaded as a new theme.

When I select the new theme that I have just uploaded under the "Customize: Default Brand" everything looks fine except for the icons i.e. the home icons and the gear icons. (see screenshot below)

I did not modify or move any of the icon files in the theme folders.

Suggestions?

Not Ranked
Male
3 Posts

As you can see, the home icons appear as the letter H, gear icons appear as the letter S... just to name a few.

Not Ranked
4 Posts

I've seen this reported as two different issues:

1. If the "H" is appearing in all browsers, then the possible cause is when theme_specific.css is modified and saved using a text editor. (I have not experienced this myself and I don't know what the solution is, other than don't modify theme_specific.css.)

2. If the "H" is appearing only in Internet Explorer, then it is a browser incompatibility issue. I'm told that Blackboard has logged it as a bug but no fix is available.

I have experienced #2. I have modified the original theme Bb Learn 2012, but I did not modify theme_specific.css. The "H" only appears in IE.

Joe


 

Top 10 Contributor
Male
7,800 Posts

I've been using a modified version of the Learn 2012 theme on my test server almost since I set it up--I'd forgotten there even were icons in those places!  But now that I switch back to the default Learn 2012 theme, I see where the icons should be.  By the way, this is different from the icon selection settings that Guy was originally asking about.

For me, the H and S are appearing on both Firefox and IE (most recent versions of each).   I believe that I've modified things besides theme_specific.css, but I haven't had a chance yet to dig in and see where it's trying to get those icon files from.  I only edited on Wordpad, so I don't think there are any odd characters being added, but I could be wrong.

Mike

Not Ranked
Male
3 Posts

I believe I did modify theme_specific.css and indeed it exhibits in both browsers.

I also believe that it is looking for the "utlilicons-web-webfont.ttf" in \fonts\utilicons.  Not being able to find that font would account for the letters in place of the icons.

Not Ranked
4 Posts

While we haven't exactly figured out why the Utilicons font works with the default 2012 theme, but not with a copy of it, I think we found a suggested change to the CSS that will fix the issue.

My very limited testing was successful with the following changes to the Fonts section the theme_specific.css:

/*UTILICONS ---updated based on http://www.fontspring.com/blog/fixing-ie9-font-face-problems*/

@font-face {
    font-family: 'Utilicons';
    src: url('fonts/utilicons/utilicons-web-webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/utilicons/utilicons-web-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/utilicons/utilicons-web-webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/utilicons/utilicons-web-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/utilicons/utilicons-web-webfont.svg#webfontphKv1xv9') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
    }

Not Ranked
2 Posts

I've added this to my stylesheet , but still continue to NOT see the utilicons in IE.  

Not Ranked
4 Posts

Which version(s)/modes of IE?

Not Ranked
2 Posts

I'm using IE9 and tried both with compat mode on and off.

 

Someone on the ASU listsrv posted this fix and it is working, 

Change the following url('fonts/utilicons/utilicons-web-webfont.eot'); to
url('/themes/as_2012/fonts/utilicons/utilicons-web-webfont.eot');

in the following...

@font-face {
 font-family: 'Utilicons';
 src: url('fonts/utilicons/utilicons-web-webfont.eot');
 src: local('☺'), url('fonts/utilicons/utilicons-web-webfont.woff') format('woff'), url('fonts/utilicons/utilicons-web-webfont.ttf') format('truetype'), url('fonts/utilicons/utilicons-web-webfont.svg#webfontphKv1xv9') format('svg');
 font-weight: normal;
 font-style: normal;
}

 

Thanks,

Shannon

Page 1 of 1 (14 items) | RSS