Template Fluorspar

[dbltoe]

<not_a_rant>There's a lot of talent and expertise represented here on the forum but, I doubt anyone without the same template and settings as yours can figure out the underlying CSS of the icon on this page by looking at an image.</not_a_rant>

I can tell you a whole lot about the similar icon at the top of the page because I can get my browser to that page.

It is a font_awesome icon sometimes represented in code as fa-home. On your main page, it is listed in the navMain as a class for an i tag .fas fa-home fa-sm and titled as home

It's color and status is covered using #navMain i or #navMain .home i

The template lists some six lines that MIGHT change the color!

The hover color is listed in two separate ways in THREE elements of the stylesheet. So, if you change the color on line 93, it will have no effect on the hover color listed in line 371. And, it may well be overidden by line 98 of the stylesheet that defines the hover color for the a tag.

So, we need to be able to delve into the code to see all the possibilities. The template may also use :active tags on the links to show what page you are on. https://jeandret.com/index.php?main_...order=1&page=4 shows an example where bootstrap uses the :active to let the customer know they are on page 4.

Maybe this will help in seeing why the posting tips ask for a link rather than a picture. There's no way I could discover that much info on the upper home icon without being able to open the link to your home page in a browser.

[dbltoe]

IF
the icon uses something other than #navBreadCrumb on the Down for Maintenance Page, I can't say without a good look.

If the icon uses the #navBreadCrumb .fa-home like that icon seen on the Crystals page, we can come up with.....

line 129 of the stylesheet will change the gray to whatever color you need.

line 131 covers the change of the background and color on hover.

BUT, lines 129, 132, and 380 get involved as well.

Unfortunately, it's quite common for templates from this source to have multiple elements in the CSS addressing the same item.

[HeleneWallis]

Sorry, it might have helped if I had been more specific about what I need to change. I know how to change colors, styles, etc. What I need to do is to add an aria-label attribute to the line that is loading that icon. I found the one in the upper left hand corner. It's loaded in includes/templates/fluorspar/common/tpl_header.php. But I can not for the life of me find where the icon in the breadcrumb series is being loaded from. Accessibility checkers mark it with an error because the anchor tag has no text--i.e. an empty link. I can use 'aria-label="Home" within the i tag if I can just find where it's being generated and loaded from.

Here's a link to the page.

https://www.zentest.newnaturalsonlin...or_maintenance

[simon1066]

Sorry, it might have helped if I had been more specific about what I need to change. I know how to change colors, styles, etc. What I need to do is to add an aria-label attribute to the line that is loading that icon. I found the one in the upper left hand corner. It's loaded in includes/templates/fluorspar/common/tpl_header.php. But I can not for the life of me find where the icon in the breadcrumb series is being loaded from. Accessibility checkers mark it with an error because the anchor tag has no text--i.e. an empty link. I can use 'aria-label="Home" within the i tag if I can just find where it's being generated and loaded from.

Here's a link to the page.

https://www.zentest.newnaturalsonlin...or_maintenance

Inspecting the breadcrumb home icon in browser dev tools I found this class:

fas fa-home fa-2x

Searching the fileset for that class I found:

define('HEADER_TITLE_CATALOG', '<i class="fas fa-home fa-2x"></i>');

in fluorspar_v1.8\fluorspar\includes\languages\english\fluorspar\header.php

Hope that's the one you were looking for.

[HeleneWallis]

Inspecting the breadcrumb home icon in browser dev tools I found this class:

fas fa-home fa-2x

Searching the fileset for that class I found:

define('HEADER_TITLE_CATALOG', '<i class="fas fa-home fa-2x"></i>');

in fluorspar_v1.8\fluorspar\includes\languages\english\fluorspar\header.php

Hope that's the one you were looking for.

That is indeed the one I was looking for, thank you. But adding the aria-label attribute to the link isn't fixing the problem.

The code that appears there now is

<a href="https://www.zentest.newnaturalsonline.com/">
<i class="fas fa-home fa-2x" aria-label="Home"></i>
</a>

But I'm still getting the empty link error.

[dbltoe]

Icons are not necessarily recognized like an image. You may need to add "role=img" to make it work.

Also, you then may get a hit saying the label is ambiguous because it simply says "Home".

You may also get a hit for the whole thing presented through ::before.

Again, using / versus the https://www....... That may help. Certainly "more correctorer"

[HeleneWallis]

Icons are not necessarily recognized like an image. You may need to add "role=img" to make it work.

Also, you then may get a hit saying the label is ambiguous because it simply says "Home".

You may also get a hit for the whole thing presented through ::before.

Again, using / versus the https://www....... That may help. Certainly "more correctorer"

I added the role attribute. I know ANDI demands that. Some others do not, and I'm working only with WAVE at the moment. It didn't make any difference to the error though. Still says empty link.

I did not put the full canonical path in there. It's inserted, I believe, from line 145 of \includes\templates\fluorspar\common\tpl_main_page.php. And I think that's where the aria-label attribute needs to go. But I'm not sufficiently proficient with php to unravel the last part of that line, though I understand the logic of the first part.

[HeleneWallis]

Digging some more into Fluorspar, I'm finding an anomaly. In the 'New Products,' 'Featured' and 'Specials' links under 'Quick Links,' the constant name 'TEXT_NO_PRODUCTS' is being displayed if there are no new products, instead of the value of the constant ('There are no products to list in this category'). It's almost as though the value wasn't defined anywhere, but I can see that it is (in '\includes\languages\english\index.php'). Other constants defined there are being used appropriately in the relevant places. Any suggestions?

https://www.zentest.newnaturalsonlin...e=products_new

[HeleneWallis]

Does anyone have some idea why the constant name "TEXT_NO_PRODUCTS" is being displayed instead of the value of the constant (as described above)?

I'm ready to switch to 1.57d and the new template, but I can't do it until I resolve this problem.

[dbltoe]

Perhaps you have an override in \includes\languages\english\flourspar\index.php That does not have the define in it.

That would override the default \includes\languages\english\index.php.