Public Forums 71,145 posts

[nrichard Friend nrichardJoin date: June 2014Posts: 7Downloads:0Uploads:0 Thanks: 4]

#198452

Hello,

I created a new theme (called “salon”), and T3 generated a new “templates/puriry_iii/css/themes/salon/” folder with a bootstrap.css file in it (among other CSS files). But in this file I have:

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot');
src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Path to the font files is not correct (it should be ../../../../../ and not ../../../) and as a consequence the icons are not showing on the site. Is this a bug?

Thanks for your help

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#537677

Hi Richard,

Did you try to check out the documentation of this Purity III template to create a new theme? http://www.joomlart.com/documentation/purity-iii/customization#customize-theme

[nrichard Friend nrichardJoin date: June 2014Posts: 7Downloads:0Uploads:0 Thanks: 4]

#537941

I created the theme from a “Save as” in ThemeMagic. Anyway it’s the same with a standard theme like the “red” theme. If I check the bootstrap.css on your demo site (http://purity_iii.demo.joomlart.com/templates/purity_iii/css/themes/red/bootstrap.css) I have the same paths:

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot');
src: url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../../plugins/system/t3/base-bs3/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Those paths are not correct, or I am mistaking? As I am not using the “Optimize CSS” option, the bootstrap.css is included directly (<link rel=…) in my pages and thus Glyphicons don’t work…

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#538002

If you want to change the path like that you can open file: templatespurity_iiilessvariables.less

On approx line 100:


// Iconography
// -------------------------
@icon-font-path: "../../../plugins/system/t3/base-bs3/bootstrap/fonts/";
@icon-font-name: "glyphicons-halflings-regular";


change it to:


// Iconography
// -------------------------
@icon-font-path: "../../../../../plugins/system/t3/base-bs3/bootstrap/fonts/";
@icon-font-name: "glyphicons-halflings-regular";


Then access the template manager section in administrator area and compile less to css

Remember to BACKUP all current css files first as when compiling less to css, they will be overwritten.

1 user says Thank You to Saguaros for this useful post

1. nrichard

[nrichard Friend nrichardJoin date: June 2014Posts: 7Downloads:0Uploads:0 Thanks: 4]

#538019

Thank you, it works.

So… This is a bug? That will be corrected in a coming release?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#538020

Could you tell me steps how you use the Glyphicons to reproduce the issue? I will try to duplicate it at my end. If it’s a bug, we will get it fixed as soon as possible.

[nrichard Friend nrichardJoin date: June 2014Posts: 7Downloads:0Uploads:0 Thanks: 4]

#538056

I use Glyphicons as described in http://getbootstrap.com/components/#glyphicons, for example:

<span class=”glyphicon glyphicon-search”></span>

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#538225

Hi Richard,

It may due to the path of your site in your server specific as I tried to add a glyphicon icon into a module in masthead position and see that it displays fine: http://prntscr.com/3qtmnq

Anyways, if you need any further helps, don’t hesitate to let us know.

[nrichard Friend nrichardJoin date: June 2014Posts: 7Downloads:0Uploads:0 Thanks: 4]

#538312

It worked on your side maybe because you use the default theme. Then the bootstrap.ccs that is called is :
http: //purity_iii.demo.joomlart.com/templates/purity_iii/css/bootstrap.css

instead of :
http: //purity_iii.demo.joomlart.com/templates/purity_iii/css/themes/red/bootstrap.css (for red theme for example).

and that make the path to the font files correct.

Would you try again using the red theme? Also disabling the “Optimize CSS” option so that CSS files are not merged into one single file…

Thank you

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#538342

I thought that it happened in default theme so I checked in default theme.

You’re right, this error occurs in red/orange theme. I’ve reported this issue to the development team, they will fix and update in the upcoming release version of this template. You can check the status here: http://pm.joomlart.com/browse/PURITYIII-83

Thanks for your report.

[Author]

Posts