Showing social logos in log in position

Hi.

I'd like to show social buttons where currently the log in button is.

I've turned the log in module off but what is the best way of creating a layout like in the attached image for Facebook/Twitter/Instagram etc?

Can I acheive this by modifying CSS code and if so what mods should I make?

Thx!

Sorry, no image attached.

Oops! Image attached.

Could you please post an url to your site?

Sorry Cyberek, I'm afraid I have to give you the same answer as elsewhere.

I'm currently trying out the demo site (from quick start package) and so site is local and offline. I haven't made any modifications though (beyond override code you suggested for fullscreen) so it is exactly as demo site.

Thanks!

So in general - Music State uses FontAwesome. You could use some html and css to generate custom icons.
Just to show you an example:
HTML:

Code: Select all

<i class="fa-twitter my-icon"></i>


CSS:

Code: Select all

.my-icon {
border: 2px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 50px;
left: 50%;
margin-left: -25px;
overflow: hidden;
text-indent: -9999px;
width: 50px;   
}
.my-icon:before {
color: #fff;
display: block;
font-family: FontAwesome;
font-size: 28px;
height: 50px;
line-height: 50px;
text-align: center;
text-indent: 0!important;
width: 41px;
}


Awesome Cyberek - this is exactly what I hoped you'd send.

I will create a module using Custom HTML, as you suggest.

Please can you confirm which files I need to insert these codes into? Then do I point the Custom HTML module to .my-icon position?

html into custom module (with tinymce disabled)
css to: /templates/gk_musicstate/css/override.css
Remember to enable "CSS override" in template settings - advanced section.

To create different icons just checkout FontAwesome documentation for correct icon name class.

Hmmmmm....

Thanks so much for coming back to me so quickly again.

I have updated override.css (this is enabled) and created a new custom HTML module called SOCIAL with your code (turned off editor and pasted it in). I have set this module to the LOG IN module position and enabled.

I have also turned off the LOG IN module.

But at the moment the LOG IN module keeps showing??

Do I need to turn LOG IN off somewhere else beyond just switching off the module?

Hi. Can we revisit this today please?

As mentioned, the above hasn't worked and - strangely - has just made the log in option reappear!

Do I need to reference/call .my-icon anywhere?

At the moment I am applying my social custom module to the login position. Is this what I am doing wrong?

Thanks a lot guys!

Sorry, but I cant help you working blind. I need to see working site to be able to check what might be wrong.

I might be able to upload the demo site later and get back to you, but in the meantime...

When you recommended to apply html into custom module (with tinymce disabled), what module position did I need to assign to get this custom module in the spot illustrated in the screenshot I attached? Thnx

You should place it in login module but this part is tricky as "login" button shows when login module has any element inside, so you need to edit this file:
templates/gk_musicstate/layouts/default.php
Please find and remove this line (around 109 line):

Code: Select all

<a href="<?php echo $this->API->get('login_url', 'index.php?option=com_users&view=login'); ?>" id="gkLogin"><?php echo ($userID == 0) ? JText::_('TPL_GK_LANG_LOGIN') : JText::_('TPL_GK_LANG_LOGOUT'); ?></a>


Now you can use login position.

Hi Cyberek, I've removed the code in default.php and I've added the code to the override.css file. Then I've created and published the custom module in the login position but it doesn't appear to show (I've got the title set to display so it's nothing to with the custom code I have used). Any ideas why it is not visible? Is there one more thing I need to do?

Any way for giving me the access (url, administrator login/password, ftp access) via PM?

Sadly, it's not online yet but do YOUR SUGGESTED changes work in a fresh quickstart install of MUSIC STATE?

They don't work for me on a quickstart install.

To be honest - it takes some time to install quickstart, make all changes and then test what might be wrong.
Seeing it on a live site allows to find cause of the problem quite fast (usually with firebug/devtools).
This is how we provide our support.

Good morning Cyberek - I was just following upon this when I got your message. If I upload my music state demo I will let you know, in the meantime because you recommended Creativity elsewhere I am going to try this and now have the same enquiry for this template here: https://www.gavick.com/forums/creativit ... 38308.html

I hope the changes you have suggested above might work on this one?

The general method should be the same.

Hi Cyberek, I managed to get icons to displays in a new module position (which I worked out how to create using the guide you sent me elsewhere). I used some JPEGS to acheive this but now I'd like to do it the way you recommended and to use Font Awesome.

When I strip out the code from my Custom HTML module and replace it with <i class="fa-twitter my-icon"></i> (the code you have given me), nothing appears in the position? Are there some other steps I need to take to show icons this way?

Thnx

Please check wit firebug/dev tools if this element has font-awesome css code.

Cyberek,

I tried again using your font-awesome html and css code... and now it works! So, I have two questions...

Now best should I display... 3 icons: Facebook, Twitter and Instagram.

I just want them lined up horizontally next to each other (like on Fest) and I want them to fade out brighter when a user hovers over them (like on Fest).

Please advise best code to do this?

THANKS!

We are getting into quite big customisations here - and by the general - we are not providing this kind of support.
If you want that kind of changes - either start learning html/css/js and do them by yourself or hire a professional frontend developer.