Icons for custom modules

đź’¬ General Discussion
1

Hi!

I created a custom module to add a simple tagging possibility to accounts and contacts. It’s only a little layout bug, but is it possible to create custom icons for this module?
The module builder created some demo icons in custom\themes\default\images, but no icons are shown on the website (subpanels, left shortcut bar, …).
Or do I have to clear some cache?

Thank you!

Stefan

1 Like
2

Hi,
Have you set your CRM files permissions properly?

Thanks

3

Hi,

thank you for the hint.
Upgrade wizard shows “File Permissions: All Files Writable”.

Are the icons managed via css/fontawesome? There is a “”-Tag in front of the module name, but no icon shown.
How can I add an icon to the css/fontawesome declaration?

Thank you!

Stefan

PS: Fresh installed SuiteCRM 7.10.4 on Ubuntu.

4

I was talking about Server Files permission.

Set the following permissions on the SuiteCRM directory:
sudo chown -R www-data:www-data .
sudo chmod -R 755 .
sudo chmod -R 775 cache custom modules themes data upload config_override.php

Thanks

5

Hi!

I tried a fresh 7.10.4 installation on a new ubuntu VM with 777 permissions on the suitecrm-folder:
Create new module.
Publish module.
Quick repair and rebuild.

See attachments.

Thank you!

Stefan

1 Like
6

OK Good.

7

Sorry, I didn’t mention that it didn’t work on a new installation, as you can see it on the screenshots.
Is der any way to fix this?

Thank you!

Stefan

8

Hi,
I have checked the screenshots. I am sorry i have no more solution to mention. Yet i can take a look to your CRM by skype, if you prefer that.

sohaib.majeed44

Thanks

9

DId you manage to solve the icon issue?

10

Hi,
no, I no longer took care of it.

I only found out that the original icons are provided by fonts (like Glyphicons).
See html code

<span class="suitepicon suitepicon-module-...."></span>

font references
https://github.com/salesagility/SuiteCRM/blob/master/themes/SuiteP/css/suitep-base/suitepicon.scss
or
https://github.com/salesagility/SuiteCRM/tree/master/themes/SuiteP/css/suitep-base

Sorry.

Stefan

1 Like
11

Thanks anyway, I will explore it more…

12

Hi All,

I think the issue is the following when we create a custom module the name somehow is generated on the class of the icon
and because is a custom module you need to be very lucky to guess that the name will much with an icon .

  1. Can someone kindly let us know which library of icons SuiteCRM is using?
  2. do you know which exactly file is the one that generates that
<span class="suitepicon suitepicon-module-...."></span>

with the className = customModuleName ?
3) The problem start when and update of SuiteCrm take place and they remove .svg icons and start putting images with the new way.

I can confirm the following :
On my production server i run Version 7.9.12 and icons are handled by .svg icons
On my Dev Server i am running the latest 7.10.7
and the icons are broken on the custom modules - Custom sub-panels - studio(custom module icons) because of course my custom-module- names does not much with any icon in the class… @stf thanks for the photos i can confirm the exact same issue.

That’s my workaround i hope it helps :slight_smile:
Thanks a lot everyone for the good work!

13

Can Anyone give some help with this please??? :frowning: :frowning: :frowning:

14

I succesfully display a custom icon of a custom module in SuiteCRM 7.11 using SuiteP theme, doing this:

  • Create the file “style.css” inside folder custom/themes/SuiteP/css/Dawn
  • In styles.css add a css class “.suitepicon-module-pvr-hobbie:before{content:”\f1b8"}" (My custom module name is PVR_Hobbie and you should modify the content for your desired icon)

Note that you should do this in all sub-themes of SuiteP.

1 Like
15

I tried your method, it worked, but the thing is, after I execute repair, I lost the modification. I suppose the file style.css got rollbacked.
Since we need to execute repair from time to time, do we really need to restore the modified style.css every time after repair?
Any idea to sort it out?

16

That file style.css you created, is it a full copy of the big style.css in SuiteP (with your changes added), or is it a small CSS file with just what you want to change?

17

Thank you for your quick response.
I didn’t create a new style.css, and it was there.
I just insert the definition for the icon of my custom module by simulating the icon definition of other module.

18

If the file is there in “custom” directory, that is probably because you created it there in the past, for some reason.

I recently discovered that the CSS files in “/custom/themes” directory are not handled in the standard fashion: they don’t completely replace their equivalent in “/themes” directory. Instead, they are appended to the default file.

So the correct thing to do is to use those custom files just to add some CSS, not to replace the entire thing (leaving you in a situation that is not very good when upgrades come and change style.css, which is common to happen).

So I was able to replace the Accounts module icon by creating

custom/themes/SuiteP/css/Dawn/style.css

With just this inside it (nothing else!):

.suitepicon-module-accounts:before{content:"\f1b8"}

And doing a QR & R.

1 Like
19

Note that the file style.css is inside “custom” folder (custom/themes/SuiteP/css/Dawn). I’ve been working several days after I wrote the change, doing a lot of repair and rebuilds and never lost my changes.

20

Only a small css file with just the changes.