Icons on Joomla template disappearing

[NeilF]

Hi

First of all thanks for the great shoutbox. Works a treat.

When I enable the module shoutbox I am losing a few icons - the Edit Profile pencil icon, and then a twitter and facebook icon. Attached is a pic of the missing icon from the top right corner of the page.

When I disable the module the icons return.

Any idea what could be causing the conflict.

Many thanks,

Neil

[NeilF]

<div id="tpr-nav">
	<ul class="log-panel">
		<li><a data-toggle="modal" href="#LoginForm" class="open-register-form"><i class="fa fa-user" aria-hidden="true"></i></a></li>
		<li><a class="v_register" href="/your-profile?view=registration"><i class="fa fa-pencil"></i></a></li>
	</ul>
</div>

This is some of the code that's affected from the page source. The class "fa fa-pencil" tag seems to be the one that goes AWOL. Not sure if this helps, but just in case.

[NeilF]

Also, one other small problem. On iPhone and Safari the shoutbox is slightly too low - so the box to type in the words is just out of reach. It looks OK in Chrome.

[The Krotek]

1 hour ago, NeilF said:

When I enable the module shoutbox I am losing a few icons - the Edit Profile pencil icon, and then a twitter and facebook icon. Attached is a pic of the missing icon from the top right corner of the page.

It's just a CSS conflict. You basically have multiple definitions for the same selectors (classes). Also there's a chance, that you have old version of Font Awesome (4.x) loaded as well. Smart Shoutbox uses Font Awesome 5. Anyway, you need to find out which is your case and override it manually.

49 minutes ago, NeilF said:

Also, one other small problem. On iPhone and Safari the shoutbox is slightly too low - so the box to type in the words is just out of reach. It looks OK in Chrome.

I don't use iPhone, so can't check. Didn't notice any issues on my Android phone. But you can adjust CSS by yourself - see definitions for mobile devices under @media element.

[NeilF]

Thanks. I guessed it was some kind of CSS conflict. Not really sure how to avoid this kind of thing.

Ironically the module loads perfectly, with no conflict when I it's on the same page as the chat component through the main menu. On all other pages the conflict is there.

[The Krotek]

4 minutes ago, NeilF said:

Ironically the module loads perfectly, with no conflict when I it's on the same page as the chat component through the main menu. On all other pages the conflict is there.

Nothing strange at all. Component and module bith use the same files and libraries, loaded from the same place and on Chat page you most likely have much less stuff loaded - only the basic theme resources. On other pages you may have some 3rd party module or plugin running, which creates a CSS conflict.

This is absolutely normal, all themes are different, any can create a conflict with any extension, which comes with its own CSS files.

[NeilF]

OK Cheers.  I have tested the chat module on a blank page with just the menus and the module (so no other extensions or mods) and I get the same problem. I will just disable the module.

[The Krotek]

15 minutes ago, NeilF said:

I have tested the chat module on a blank page with just the menus and the module (so no other extensions or mods) and I get the same problem. I will just disable the module.

Again, module and component use THE SAME resources. Just find out the conflicting CSS definitions and override them.

[NeilF]

Just did a couple of checks:

a) Loaded the chat page no modules - no template conflict
b) Loaded the chat page with the chat module - no template conflict
c) Loaded a blank page with the chat module - template conflict

 

[The Krotek]

I don't understand what does "template conflict" mean. If you're talking about that "fa-pencil" icon, then no, you didn't load a blank page, because this icon belongs to login module. And yes, according to the code you provided, you have Font Awesome 4 loaded as well. Version 5 have different icon naming, this is why this conflict occurs.

But anyway, it's a CSS conflict issue, nothing else. I specifically excluded CSS conflicts from support, because it is literally impossible to make extension compatible with all the thousands of themes on the market.