Glyphicons in portal? - Forum - Rollbase - Progress Community

Glyphicons in portal?

 Forum

Glyphicons in portal?

This question is answered

Hi,

I am using Bootstrap for the UI in a portal and I can't get the glyphicons to display properly. In setting up the portal I replicated the Bootstrap css sheet and inserted links to the CDN glyphicon files, uploaded that as a hosted file, and linked to the hosted file for the main stylesheet listed in the html header for the portal.

In trying to find the problem I took the source code from the portal page as rendered by Firefox and saved it to a local file, and when I load that file into a browser (including all the links to the Rollbase hosted files for .css and .js files) the glyphicons display properly. When I use Firebug to compare the css properties of the Rollbase hosted page  vs. the local file they are identical.

Any suggestions? What is keeping the glyphicons from displaying properly?

Thank you!

Greg

Verified Answer
  • The tokens are not being replaced with actual values when they are used on a hosted file. To resolve this, you need to copy the contents of your main stylesheet and transfer it to the header and footer of the portal.


    Godfrey
All Replies
  • Hi Greg,

    Can you please share the portal link? I would like to inspect the elements and check whether they are properly linked or not.


    Thanks,
    Godfrey
  • Thanks, Godfrey. What do you mean by elements - links to hosted files? If so, I know those are all correct because when the browser loads the local file it references all the css and js files hosted in Rollbase and displays everything correctly. Or are you thinking of something else?

  • I am referring to the whole HTML content of your portal page. The issue in the actual portal page will be much easier to debug if I can access it from my browser.

    If you cannot share your portal link, perhaps you can send me the source code of your portal page and the errors on the console tab of your browser (preferably Google Chrome).


    Thanks,
    Godfrey
  • Thank you, Godfrey. I didn't know to check the console (still learning my way around), and when I did I saw that Rollbase was blocking downloading the glyphicons from the cdn server because it wasn't on an https protocol. So I uploaded the relevant glyphicon files to Rollbase as hosted files and changed the css sheet to link to those, so that the font family is defined:

    @font-face {

    font-family: 'Glyphicons Halflings';

    src: url('{!#HOSTED_FILE.123456789}');

    src: url('netdna.bootstrapcdn.com/.../glyphicons-halflings-regular.eot) format('embedded-opentype'), url('{!#HOSTED_FILE.123456789}') format('woff'), url('{!#HOSTED_FILE.123456789}') format('truetype'), url('netdna.bootstrapcdn.com/.../glyphicons-halflings-regular.svg) format('svg');

    }

    But it still didn't work - here are the error messages from Firefox and Chrome consoles:

    Firefox:

    Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead Image:1
    TypeError: $(...).tooltip is not a function portal.jsp:155
    downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:0): status=2147746065
    source: https://www.rollbase.com/storage/servlet/%7B!#HOSTED_FILE.123456789} Image
    Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery-1.7.1.min.js:3

    Chrome:

    Uncaught TypeError: undefined is not a function portal.jsp?c=123456789&p=123456789&g=123456789:155
    Failed to load resource: the server responded with a status of 404 (Not Found) https://www.rollbase.com/storage/servlet/%7B!#HOSTED_FILE.114685581}
    Failed to load resource: net::ERR_CACHE_MISS https://www.rollbase.com/prod1/portal/portal.jsp?c=123456789&p=123456789&g=123456789


    So there's something weird happening where in one place the { is being converted to hex?

    And not sure about the tooltip function.

    Can you tell anything or do you need more information?

    Thank you very much!!

    Greg

  • I had a similar issue with fonts before and it was resolved by moving the font files to the SETTINGS object. First, create the file upload fields on SETTINGS and make sure to check "Make files publicly accessible (do not require login)". Then, upload the font files via Setup Home ----> Administration Setup ----> Settings.

    You should be able to access it directly from your portal by copying the tokens from Template Helper (e.g. {!#SETTINGS.my_file#url}).

    Also, I've noticed a typo error on your code. Please close the URL values with quotation marks to avoid error. Or it could just be the rich-text stripping the closing quotation mark. To avoid this I recommend you to use the community syntax highlighter. You can check this link for more details: https://community.progress.com/community_groups/rollbase/f/25/t/10818.aspx

    Godfrey
  • Thank you, I tried that but I'm still getting error messages.

    I uploaded the files into the Settings object as you instructed and then modified the css sheet to read:

    @font-face {
    font-family: 'Glyphicons Halflings';
    src: url('{!#SETTINGS.glyphicons_halflings_regular_eot#url}');
    src: url('{!#SETTINGS.glyphicons_halflings_regular_woff#url}') format('woff');
    url('{!#SETTINGS.glyphicons_halflings_regular_ttf#url}') format('truetype');
    }


    And am getting the error messages in the Chrome console:

    Uncaught TypeError: undefined is not a function portal.jsp?c=123456789&p=123456789&g=123456789:155
    Failed to load resource: the server responded with a status of 404 (Not Found) https://www.rollbase.com/storage/servlet/%7B!#SETTINGS.glyphicons_halflings_regular_woff#url}
    Failed to load resource: net::ERR_CACHE_MISS https://www.rollbase.com/prod1/portal/portal.jsp?c=123456789&p=123456789&g=123456789


    So it seems that the opening curly bracket { is getting converted to hex and then the resource is not being loaded properly, even from the Settings object?

    Greg

  • Where is this code stored? It's strange that the tokens are not replaced with actual URL.

    The link "https://www.rollbase.com/storage/servlet/{!#SETTINGS.glyphicons_halflings_regular_woff#url}" also looks like a combination of the base url and the settings token.


    Godfrey
  • This code is in the main css stylesheet for the portal. It's just the bootstrap 3.0 style sheet with the modified links for the glyphicon font family. The stylesheet is a hosted file linked from the portal header.

    Any ideas?

    Thanks,

    Greg

  • p.s. I would imagine using glyphicons in a portal is not such a rare occurrence - is there a best practice for doing this? I looked around and couldn't find anything and went with what made sense to me, but maybe I missed something...

  • The tokens are not being replaced with actual values when they are used on a hosted file. To resolve this, you need to copy the contents of your main stylesheet and transfer it to the header and footer of the portal.


    Godfrey
  • Awesome, that worked! Thank you so much for your help!!

    Greg