How to change the "login" icon

September 2015 Joomla Template
GK User
Fri May 20, 2016 1:25 pm
Hi,

I am trying to figure out how to change the person_outline icon which controls the log in popup in te menu bar.
I cannot find where it comes from.
Any ideas?

Thanks,

Bastiaan
User avatar
Fresh Boarder

teitbite
Tue May 24, 2016 2:35 pm
Hi

This icon is set there thanks to icon font, but You can easily change it to an image by adding this to override.css:
Code: Select all
#gkUser > .micon {
background: url(../images/youricon.png) no-repeat center center transparent;
}

#gkUser > .micon::before {
display: none;
}
User avatar
Moderator

GK User
Tue May 24, 2016 7:07 pm
Hi,

Thank you for your reply.
Unfortunately placing this in the override.css did nothing (override is enabled in advanced settings).
The url of the website is www.festgear.nl.
It does not necessary have to be an image another micon would also be great (there is one called shopping_cart).

Hope you can help,

Bastiaan
User avatar
Fresh Boarder

GK User
Wed May 25, 2016 10:52 am
Hi,

I did a complete scan of a local copy of the website and found the person_outline hard coded in the default.php file in the template - layout folder.
I changed it to shopping_cart and that fixed it.

Thanks for pointing me in the right direction!

Bastiaan
User avatar
Fresh Boarder

teitbite
Fri May 27, 2016 2:47 pm
Hi

Yes it's a good solution too.

Mine worked as well, but as I can see there is no cart.png file in template's /images folder, so image could not be loaded, that's why it was not showing.
User avatar
Moderator

GK User
Thu May 25, 2017 3:00 pm
Hi Teitbite
I Use the code, the background image work, but the Logi Icon is still showing in front.
Could you help me please.

By private message going to send you the URL
Thank you
User avatar
Expert Boarder

teitbite
Tue May 30, 2017 6:22 pm
Hi

Easiest is as posted on users above. Edit file /layouts/default.php and replace line 104:

Code: Select all
                  <i class="micon">person_outline</i>


with

Code: Select all
                  <i class="micon"></i>
User avatar
Moderator

GK User
Wed May 31, 2017 6:18 pm
Thank you, it works
User avatar
Expert Boarder

teitbite
Sun Jun 04, 2017 12:33 pm
Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro
User avatar
Moderator

GK User
Mon Jun 12, 2017 3:45 pm
Hi,
is´t possible make that position wider, like 200px widht

Thak you.
User avatar
Expert Boarder

GK User
Wed Jun 14, 2017 7:23 pm
@teitbite

Ist possible make that position wider?
User avatar
Expert Boarder

teitbite
Mon Jun 19, 2017 11:18 am
Hi

You want to make this icon 200px wide? Try:

Code: Select all
#gkUser > .micon {
width: 200px;
display: inline-block;
}
User avatar
Moderator


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.