Jump to content
The Krotek Support Forum
  • Sign Up
NeilF

Icons on Joomla template disappearing

Recommended Posts

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

missing icon1.PNG

Share this post


Link to post
Share on other sites
<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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...