• Registered: 2013-03-16
  • Posts: 36

Topic: Custom font question

Since we can control the icons easier now (thanks!) is there a way to differentiate what is used for the gallery and thumbs? Right now they use the same number which results in the same icon.

.jb-navigation .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content: "\e000";
}
.jb-navigation .jbn-right-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-right-button:before
{
    content: "\e001";

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Custom font question

Yes. You would need to modify the theme CSS and split the classes above into 2 different classes with 2 different unicode ids.

  • Registered: 2013-03-16
  • Posts: 36

Re: Custom font question

Hmm, I can't seem to get this. For instance the right button on both areas seems to have the same class .jbn-right-button:before. So short of creating a new class for one or the other, changing the id results in the same icon even on a separate line.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Custom font question

Try the following (with your own custom font and appropriate Unicode Ids):

/* Thumbnail nav buttons */

.jb-navigation .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content: "\e000";
}
.jb-navigation .jbn-right-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-right-button:before
{
    content: "\e001";
}


/* Main image nav buttons */

.jb-navigation .jbn-nav-button .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-nav-button .jbn-left-button:before
{
    content: "\e016";
}
.jb-navigation .jbn-nav-button .jbn-right-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-nav-button .jbn-right-button:before
{
    content: "\e017";
}

5 Reply by cprblak (edited by cprblak 2013-04-20 04:29:07)

  • Registered: 2013-03-16
  • Posts: 36

Re: Custom font question

Thanks Steven! Everything worked as it should, although they were switched for me. So what is listed as Main was Thumb and visa versa. Also downloading the new fonts resulted in the Back button number being changed. So it just had to be given the corresponding number in the new font.

And here's a weird thing. The fonts created by iconMoon would display properly on my local machine but would not even copy to the server. I've never had a file not want to copy. It turns out the font files had a creation date 5 hours into the future. So I had to "touch" them to make the creation date up to date. Very strange.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Custom font question

Everything worked as it should, although they were switched for me. So what is listed as Main was Thumb and visa versa.

Thank you for pointing that out. I have now edited my post above.