Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Basic > Social Icons > Custom - How to ?

Featured Lock Resolved Issue
Hi guys,

  • Basic > Social Icons > Custom: "Insert your custom url with fontawesome icon, eg. fa-facebook http://joomshaper.com"

I cannot find any information about into the Helix 3 documentation,
Please, I don't understand, What does it mean ?:
- How to manage it ?
Please, there is a way on:
- How to customize icons dimensions ?
- How to customize icons colors ? (I like when each icon change to its own color when hover)

38 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
- How to customize icons dimensions ?

You have to use custom CSS.

ul.social-icons > li {font-size: 20px;}


- How to customize icons colors ?

Each icon has its own CSS class, check source code.
Example FB link:

.fa.fa-facebook {color: #43609C;}


is clear now?

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
In custom fields you can use icons from FontAwesome library.

For example, you need link to android app "Super Mario", so use:


fa-android https://play.google.com/store/apps/details?id=com.nintendo.zara

FontAwesome class + URL

Attachments (2)

  • fa.png
    fa.png 20 KB
  • play.png
    play.png 61.2 KB

joomleb

More than a month ago #Permalink
Hi Paul,

1 - How to manage: Thanks, I understood. Anyway I found it not a really "Raw Helix Ultimate" solution ane "very limiting". Let me explain what I mean:
As far as I understand, this Social Icons solution have a lot of preinstalled fields, a lot of preinstalled code (not Raw) and with just the possibility to add an extra Icon, just one (too Limited).
In my opinion you have yet a powerful very Raw solution, would be like for Wrapper / Blocks solution:
A - one "Custom Field" and, with the possibility to add as many as "Custom Fields" (Icons) we need
B - Drag and Drop the "Custom Fields" to ordening the Icons positions. Please, Is there a way right now to ordering the icons ?
What do you think about ?

2 - Font Size: Many Thanks

3 - Color: Many Thanks
For other not expert users like me, I like also the hover color:

.fa.fa-facebook:hover {color: #43609C;}

Paul Frankowski - Staff

More than a month ago #Permalink
1 and 2 - not really, this section is only for beginners.
Advanced users can:
1) Disable it
2) And publish any social module in top1 position
or use Custom Module where they can put social icons with their own order etc.

joomleb

More than a month ago #Permalink
Hi Paul,
yes, I thought on it, anyway thanks for suggestments.

Just my opinion hoping to help Helix Ultimate development and hooping to see that on Helix in near future:
A - I'm sure also advanced users like too much that feature that "simplifies the life"
B - Helix have yet that feature / solution, all the instruments / all the code inside, "just a litlle bit of work":
You can leave also all the preinstalled, but have a way to establish the position and a way to add more than one Custom field is really "a need" !

Is there a way / rules to add "Feature Requests / Suggesments" here ?

Thanks for your attention

Paul Frankowski - Staff

More than a month ago #Permalink
you can add under last blog post about Helix Ultimate,
there is still time.
---
Beside 1.0 is only first step.

joomleb

More than a month ago #Permalink
Hi Paul, done, many thanks!
I close this topic...

Paul Frankowski - Staff

More than a month ago #Permalink
In meantime I added your request to our intranet dashboard.
thanks

joomleb

More than a month ago #Permalink
Hi Paul,
3 - About icons Color Following your suggestions, I'm using the code below for the "hover" color icon:

.fa.fa-facebook:hover {color: #43609C;}


When the mouse going over the icon is running well, but when the mouse is going away, leaves, before going back to being gray it switches to white... You can test it here

Please, Do you have any suggestment ?

Pavel

More than a month ago #Permalink

When the mouse going over the icon is running well, but when the mouse is going away, leaves, before going back to being gray it switches to white... You can test it here

Add a transition for each icon.
Example:

.fa.fa-facebook, .fa.fa-twitter, .fa.fa-google-plus, .fa.fa-youtube, .fa.fa-instagram,
.fa.fa-skype, .fa.fa-whatsapp {
transition: ease .3s;
-webkit-transition: ease .3s;
}


But in general, the approach using the icon class is not quite good. Even when you add a transition, the white color will still be visible if you hover not on the icon, but on the link.
Correcting this will require more additional code.
I suggest that you delete everything that you did through the icon class. And use the container class and link.
Example for the facebook icon:

.social-icon-facebook a:hover {
color: #0a4ea5 !important;
}

In this case, you do not need to add code for the transition. Just write the same code for each button. You can find the container class using the browser's code inspector
http://dl4.joxi.net/drive/2018/03/31/0008/0401/545169/69/49a8209f44.png

joomleb

More than a month ago #Permalink
Hi Pavel,
many thanks for suggestion, using the container links class is running, many thanks!

But, as far as I see, the YouTube link class into the code is missing...
Please, Can you confirm ?

Pavel

More than a month ago #Permalink
Hi Pavel,
many thanks for suggestion, using the container links class is running, many thanks!

But, as far as I see, the YouTube link class into the code is missing...
Please, Can you confirm ?

Hi. Yes, I confirm.
http://dl3.joxi.net/drive/2018/04/01/0008/0401/545169/69/ae7bdb0dc6.png
In this case, you can use the workaround - the attribute selector.

a[aria-label="Youtube"]:hover {
color: #d21e5e !important;
}

joomleb

More than a month ago #Permalink
Hi Pavel,
many thanks for your workaround, it's running...

Anyway, here someone of the Helix Ultimate team can confirm have token note of the missing ?

joomleb

More than a month ago #Permalink
Hi guys,
Please, Can anyone of the Helix Ultimate team confirm to have token note of the missing YouTube link class into the code ?

Paul Frankowski - Staff

More than a month ago #Permalink
yes, I can confirm, indeed. There is missing class. Good eye. Thanks.

joomleb

More than a month ago #Permalink
Hi Paul,
latest 1.0.2 release, as far as I see the class code is still missing, isn't it ?!?

joomleb

3 weeks ago #Permalink
Hi guys,
in first of all to report that in HU 1.0.4, as far as I see, the YouTube class code is still missing, isn't it ?!?
Any hope to see it fixed soon ?

Then, as suggested from Paul I used "Flexi Custom Code" (I don't know if HD AnyCode Module is better) to add a WhatsApp icon, you can see it on my test site:

<ul class="social-icons">
<li>
<a href="https://api.whatsapp.com/send?phone=50760580574" aria-label="whatsapp" target="_blank">
<span class="fa fa-whatsapp" aria-hidden="true"></span></a>
</li>
</ul>


But now the:

.social-icon-whatsapp a:hover {
color: #25d366 !important;
}


Solution to change the WhatsApp icon hover coloris not running (follow the HU link color rule).
Please, How to have it running ? What am I missing ?

Paul Frankowski - Staff

3 weeks ago #Permalink
You made mistake. Class "social-icon-whatsapp" in inside "a" not outside.

Paul Frankowski - Staff

3 weeks ago #Permalink
i checked code of helix 104 > \features\social.php


$html .= '<li class="social-icon-whatsapp"><a href="whatsapp://send?abid='. $whatsapp .'&text=Hi" aria-label="WhatsApp"><span class="fa fa-whatsapp" aria-hidden="true"></span></a></li>


you can add class for youtube manually for li , it's 60sec task

joomleb

3 weeks ago #Permalink
Hi Paul,
thanks I changed it to
<ul class="social-icons">
<li class="social-icon-whatsapp">
<a href="https://api.whatsapp.com/send?phone=50760580574" aria-label="whatsapp" target="_blank">
<span class="fa fa-whatsapp" aria-hidden="true"></span></a>
</li>
</ul>

and it's running.

About YouTube, thanks for the info, anyway it'a a little bit silly: it's a 60sec task each Helix Ultimate release just for me, after more then 10 months for the JoomShaper Team would be a 60sec task, one time and for everyone...

Paul Frankowski - Staff

3 weeks ago #Permalink
I agree, but personally I cannot edit core files for customers, so I am stuck .
I can suggest changes only on forum or make changes in my private package's as I did many times.

joomleb

3 weeks ago #Permalink
Hi Paul,
It was not a criticism of you, but the only way I have to put in evidence a simple, yet solved, fix issue...

Is there a specific Helix Ultimate team leader who I can PM to leave a note ?

Paul Frankowski - Staff

3 weeks ago #Permalink
As I know, Helix update should be in November

joomleb

3 weeks ago #Permalink
Hi Paul, thanks for the info !

Please,

1 - Grid and Responsive
I created a Social row to show Helix Ultimate social icons and the WhatsApp one I added, using a desktop grid:
2 (not used, only for centering social icons) + 8 (centered social icons) + 2 (on right whatsapp icon)
as you can see here on desktop is working fine, while on mobile the social icons are not shown all together in one line (I temporary solved part of issue changing padding left/right from 25px to 15px). The idea would be to have them only in two full lines on mobile:
12 (Social icons)
12 (Whatsapp icon)
I tried to learn here how to use Grid and Responsive row feature options, but there is no much explications.
Please, Can you address me on the right way ?

1b - I'm using the custom CSS code:
#sp-user2 {
text-align: center;
}

to have back the social icons centered in the column, but seem to don't run in the desktop view, while are centered on tablet and mobile.
My Grid raw is 2+8+8, while seem to be 8+4 on desktop...
Please, What am I missing ?

2 - Tooltip
On new HU release would be a good thing ahve Social hover tooltip (Faceboo, Twitter etc.) for the Social Icons.
Please, Is there any way to add them through Custom CSS and respecting the Bootstrap 4 ?

Paul Frankowski - Staff

3 weeks ago #Permalink
Now your social icons seems to be OK.
Of course I am not fully sure how you wanted it (without mockup), but I think you complicated layout too much.

joomleb

3 weeks ago #Permalink
Hi Paul,
but I think you complicated layout too much

If you have time, I'll be happy to know your opinion. Can you explain me what do you mean ?

Then, please:

1A - Grid and Responsive
I tried to read in the documentation how to use Grid and Responsive row feature options, but there is no much explications. Please, Can you address me / suggest me where can I read more on how to work with that options ?

1B - I set a 2+8+2 Social row desktop grid, where:
2 (user1, not used) + 8 (user2, centered social icons) + 2 (user3, on right whatsapp icon).
But, as far as I see seem to be 8 (user2) +4 (user3) on desktop...
Please, What am I missing ?

I have the same problem with Main Body row (2 left + 8 component + 2 right) where set a left/right 15px padding, and then I added in Grid Component Options > Larger Desktop "col-xl-8"
But as you can see in my page is completely left aligned while should be centered (grid 8 of 12) in a 2+8+2 Main Body row grid.

Paul Frankowski - Staff

3 weeks ago #Permalink
I think it would be much better for You instead study documentation to meet with someone you have experience with Bootstrap to talk with you. Yes, SPPB use bootstrap 3 grid. It's not possible with "written words" explain all. We cannot write whole book.

Paul Frankowski - Staff

3 weeks ago #Permalink
I am "eye guy" I prefer graphic mock-up than words.

joomleb

3 weeks ago #Permalink
Hi Paul,
thaks for reply to me.
I am "eye guy" I prefer graphic mock-up than words.
I'm agree with you. the page you see is the summerize of 5 pdf pages, and I'll split its content into 4 different SP Page Builder pages soon.

1B
Joomla 3.9 + Helix Ultimate 1.0.4 + SP Page Builder Pro 3.3.6 - test site:

I set a 2+8+2 Social row desktop grid, where:
2 (user1, not used) + 8 (user2, centered social icons) + 2 (user3, on right whatsapp icon).
It should shown user2 centered on the page, Am I right ?

While user2 is shown on the left. Investigating seem the row to be setted (not true) as 8 (user2) +4 (user3) on desktop view while is 2 (user1) + 8 (user2) + 2 (user3) in Helix Ultimate.
Please, What Am I missing ?
As far as I understand, this Social Icons solution have a lot of preinstalled fields, a lot of preinstalled code (not Raw) and with just the possibility to add an extra Icon, just one (too Limited).
A - one "Custom Field" and, with the possibility to add as many as "Custom Fields" (Icons) we need


I also would like to see the ability to add more than one custom social icon. You all could support a delineator (comma or semi-colon) in that custom field and allow us to add as many social icons/URLs as we want.

Paul Frankowski - Staff

2 days ago #Permalink
Some our users publish Group Icons addons (with chosen icons + links)

because not all know HTML to use custom module, which is much better in my opinion
Some our users publish Group Icons addons (with chosen icons + links)

because not all know HTML to use custom module, which is much better in my opinion


Thanks for the quick response. Yeah, it's pretty easy to just create a module, paste in the HTML code Helix Ultimate is already generating for the social icons, add additional social icons to the HTML (within <li> tags), and then publish to the correct Joomla position. I went ahead and did that and disabled Helix Ultimate's social icons under the basic settings.

However, if Helix is going to have the social icons feature at all, it still would be nice for beginners to be able to add multiple icons/URLs within the custom field (by using a delineator). Not a big deal, but should be able to handle that.

Thanks again!
Hi guys,

1 - I think that beginners with HTML + Documentation with example codes would be able to do all what they want...

2 - Anyway, with a dropdown selector (Facebook/Twitter/Custom/ etc. ...) we should be able to establish also our Social Icons order...
Hi guys,

1 - I think that beginners with HTML + Documentation with example codes would be able to do all what they want...

2 - Anyway, with a dropdown selector (Facebook/Twitter/Custom/ etc. ...) we should be able to establish also our Social Icons order...


Here's example code to create a new module with and assign that module to the layout position...


<ul class="social-icons">
<li class="social-icon-facebook"><a target="_blank" href="https://yoururl.com" aria-label="facebook" rel="noopener noreferrer"><span class="fa fa-facebook" aria-hidden="true"></span></a></li>
<li class="social-icon-twitter"><a target="_blank" href="https://yoururl.com" aria-label="twitter" rel="noopener noreferrer"><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
<li class="social-icon-pinterest"><a target="_blank" href="https://yoururl.com" aria-label="Pinterest" rel="noopener noreferrer"><span class="fa fa-pinterest" aria-hidden="true"></span></a></li>
<li class="social-icon-custom"><a target="_blank" href="https://yoururl.com" rel="noopener noreferrer"><span class="fa fa-vimeo" aria-hidden="true"></span></a></li>
<li class="social-icon-custom"><a target="_blank" href="https://yoururl.com" rel="noopener noreferrer"><span class="fa fa-wikipedia-w" aria-hidden="true"></span></a></li>
</ul>


With the above HTML placed in the source code of a module, you can add as many custom icons and order them how you want. Of course, replace "yoururl.com" with your social URL.

Paul Frankowski - Staff

2 days ago #Permalink
We assume, maybe too optimistic, that users know the basics of HTML. :p
Hi Paul,
you wrote:
...because not all know HTML to use custom module, which is much better in my opinion

Paul Frankowski - Staff

2 days ago #Permalink
I thought about comparing Custom module vs Addon, the first method needs fewer joomla resources to load content.


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 217
Sifat

Sifat

Total Accepted Answers: 133
Toufiq

Toufiq

Total Accepted Answers: 44
Archange Consulting

Archange Consulting

Total Accepted Answers: 2
B

blue_Shift

Total Accepted Answers: 1

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us