Glyphicons in portal?

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