Icon usage (validation, add/delete in list) usage

bggann

Active Member
Okay - way too many hours into this.
When using protostar I get the default icons - such as the "eye" for required fields. I can change that icon on a field by field basis by changing the text in the validation icon field and the names "roughly" correspond to the J3.x standard icons (not all work).
https://docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts
-> I don't really like the eye and would like to globally change it, but it appears I have to change each element. SOMEWHERE, SOMEBODY is telling it to use the eye - any pointers?

It gets worse.
But - I don't want to use protostar - I want to use another template (wright for example) when I display in that template, _some_ of my icons go way. Wright uses font-awsome

When I use wright:
- Validation: the "eye" disappears. I can recover it by editing the icon field to explicitly say "eye" (or a few others). But again - I don't want to have to manually edit every validated field.
- The "delete" icon in list displays goes away.

I've see a few posts about how to add the joomla icon set to another template - but they are too terse. They say add icomoon.css to my template (where! - I put it in templates/js_wright/css), I've done so - but no joy.

So, two problems
-> how can I get the 'default' icons back for template that uses something like fontawsome
-> How can I change the default icon for validation

Note: I do know how to control the icon's size and color in custom_css.php

I'd like to document this in the wiki - if I can figure out how.
 
Thanks troester.
Some of this I knew.
For instance, I can go in and change the icon individually in every validation plugin I've applied and it works. I can apply 'eye' and get the default 'eye' back.
However, I don't want to customize each element individually - horrendously bad code support process. I want to change the default (as well as make it actually work in wright which is a js template.
'
The default icons for validations are set in the plugins
View attachment 19159
http://fabrikar.com/forums/index.php?wiki/validation-plugins/#validation-icons

I think this might work. I;'m not sure the difference between the two items you refer to here. One relates to getting a new thing from github - not clear if this is included in current released Joomla - but I'll look.
For Bootstrap3/4 or uikit Joomla templates add
https://github.com/Fabrik/Fabrik-Joomla-alt-layouts

This seems to refer to how I might customize each element - again a lot of work, but I'll look.
See http://fabrikar.com/forums/index.php?wiki/prerequisites/#fabrik-3-4-2

Approaching this 2 ways.
1) get default icons to work in wright (https://wright.joomlashack.com/)
2) change the default from eyeball to something like star (and red)

I can achieve 2 on an individual basis by adding "star" to the validation icon for each validated element and creating a custom_css.php in bootstrap_tabs (which is what I'm using).
But it means I need to touch every element. I have ~140 elements - many of which have validation - and I'm not excited about touching each one.

I'll look at the frameworks above and see if I can see how to modify the default icon for an element (for instance for validation "not empty" for a field element) - as discussed in Jlayouts http://fabrikar.com/forums/index.php?wiki/jlayouts/

If I'm way off here - please let me know.

- note - for some reason I'm not getting emails about replies to forum posts.

If I figure this out, I'll reply here and maybe update the wiki if appropriate.

-bob
 
I really appreciate the pointers troester, but....
it did not work.

The default icons for validations are set in the plugins
For Bootstrap3/4 or uikit Joomla templates add
https://github.com/Fabrik/Fabrik-Joomla-alt-layouts

I put the files from bootstrap3 in Git hub into

/templates/js_wright/html/layouts/com_fabrik
- which I did have to create per the readme
BTW - js_wright is bootstrap.
I changed the purity_iii to js_wright
Didn't work
- My groups no longer honor the "columns" setting - they show 1 column rather than 3 (or 4 in one case)
- My repeated groups Add/Delete icons are gone (just thin red/green boxes with no icon)
- The validation icon is not shown - even for fields where I specified it - much less the 'default' ones.

Am I being stupid or is this not applicable?

Note: The fact that this refers to purity_iii and Joomla now ships with protostar, which does not have these folders and works fine - makes me think this is out of date.

Now looking at Jlayouts which is referred to on the pre-req page....

It may be faster for me to edit every element manually - but what a friggin support nightmare if I need to change it due to customer input.
 
The default icons for validations are set in the plugins
index.php
This means in the Joomla plugin settings (Manage/Plugins), so ALL notEmpty validations which didn't set an individual icon will get it.


js_wright is bootstrap
Bootstrap2 ? 3? 4?
The alt-layouts are for Bootstrap3.
I assume for Bootstrap4 it needs some tweaking, e.g. custom CSS
.row-fluid {display:flex;}
.fabrikGroup:not(.form-horizontal) label.fabrikLabel {float: none;}
is doing on my site for multi column groups
 
Last edited:
Oh cheeze - I never even looked there. I'm not used to seeing options in plugins. Yes, some have them, but rarely. So when you were talking about the validation icon I was thinking in the element/validation tab.
Changing it in the plugin changed it immediately in the forms - globally. I see some of the other validation plugins have icon settings.

Do you know if this is in the wiki - if not I'll add it.

I still have the problem with getting 'default' icon to show up in js_wright. I've submitted a support requst with joomlashack on that. They say "bootstrap" but don't specify the generation.

- thanks!
 
I'm closer
I added iconmoon.css (that is normally in medi/jui/css) to the 'css' directory of js_wright - and modified the paths in it to point at /media/jui/fonts
ie, what was:
CSS:
@font-face {
   font-family: 'IcoMoon';
   src: url('../fonts/IcoMoon.eot');
   src: url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
      url('../fonts/IcoMoon.svg#IcoMoon') format('svg'),
      url('../fonts/IcoMoon.woff') format('woff'),
      url('../fonts/IcoMoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
became
CSS:
@font-face {
   font-family: 'IcoMoon';
   src: url('../../../media/jui/fonts/IcoMoon.eot');
   src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
      url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg'),
      url('../../../media/jui/fonts/IcoMoon.woff') format('woff'),
      url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}
Now the icons work - but the ? for hover tips does not. Sigh. That looks to be a file, not an icon, maybe, but stepping through Fabrik code it seems like it should find that file, but does not.
.....
I have to have some indication of a hover tip....
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top