1. Helix Ultimate
  2. Sunday, 28 January 2018
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)
Accepted Answer
- 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?
  1. more than a month ago
  2. Helix Ultimate
  3. # Permalink
Responses (42)
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)
  1. more than a month ago
  2. Helix Ultimate
  3. # 1
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;}
  1. more than a month ago
  2. Helix Ultimate
  3. # 2
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 3
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 4
you can add under last blog post about Helix Ultimate,
there is still time.
---
Beside 1.0 is only first step.
  1. more than a month ago
  2. Helix Ultimate
  3. # 5
Hi Paul, done, many thanks!
I close this topic...
  1. more than a month ago
  2. Helix Ultimate
  3. # 6
In meantime I added your request to our intranet dashboard.
thanks
  1. more than a month ago
  2. Helix Ultimate
  3. # 7
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 8

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
  1. more than a month ago
  2. Helix Ultimate
  3. # 9
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 10
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;
}
  1. more than a month ago
  2. Helix Ultimate
  3. # 11
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 12
Hi guys,
Please, Can anyone of the Helix Ultimate team confirm to have token note of the missing YouTube link class into the code ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 13
yes, I can confirm, indeed. There is missing class. Good eye. Thanks.
  1. more than a month ago
  2. Helix Ultimate
  3. # 14
Hi Paul,
latest 1.0.2 release, as far as I see the class code is still missing, isn't it ?!?
  1. more than a month ago
  2. Helix Ultimate
  3. # 15
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 16
You made mistake. Class "social-icon-whatsapp" in inside "a" not outside.
  1. more than a month ago
  2. Helix Ultimate
  3. # 17
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 18
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...
  1. more than a month ago
  2. Helix Ultimate
  3. # 19
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 20
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 21
As I know, Helix update should be in November
  1. more than a month ago
  2. Helix Ultimate
  3. # 22
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 23
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 24
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 25
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 26
I am "eye guy" I prefer graphic mock-up than words.
  1. more than a month ago
  2. Helix Ultimate
  3. # 27
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 ?
  1. more than a month ago
  2. Helix Ultimate
  3. # 28
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 29
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
  1. more than a month ago
  2. Helix Ultimate
  3. # 30
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!
  1. more than a month ago
  2. Helix Ultimate
  3. # 31
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...
  1. more than a month ago
  2. Helix Ultimate
  3. # 32
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.
  1. more than a month ago
  2. Helix Ultimate
  3. # 33
We assume, maybe too optimistic, that users know the basics of HTML. :p
  1. more than a month ago
  2. Helix Ultimate
  3. # 34
Hi Paul,
you wrote:
...because not all know HTML to use custom module, which is much better in my opinion
  1. more than a month ago
  2. Helix Ultimate
  3. # 35
I thought about comparing Custom module vs Addon, the first method needs fewer joomla resources to load content.
  1. more than a month ago
  2. Helix Ultimate
  3. # 36
yes, I can confirm, indeed. There is missing class. Good eye. Thanks.

Hi guys,
from Helix Ultimate 1.0.1 and now I re-checked with 1.1.1 (6 releases!), still missing the YouTube class...

Really have no sense to forget these small fixes...
  1. more than a month ago
  2. Helix Ultimate
  3. # 37
I agree, but it doesn't depend on me.
  1. more than a month ago
  2. Helix Ultimate
  3. # 38
I agree, but it doesn't depend on me.
Hi Paul,
logically this is not a personal criticism of you, but it is the only way we have to communicate with the JoomShaper team...

Is not a single case, seem that often Bugs confirmed here in the forum are as forgotten...

And there is no a simple way for us to follow them and their fixes (like happen in GitHub)
  1. more than a month ago
  2. Helix Ultimate
  3. # 39
Hi guys,
yes, I can confirm, indeed. There is missing class. Good eye. Thanks.

from Helix Ultimate 1.0.1 and now I re-checked with 1.1.2 (7 releases!), still missing the YouTube class...

Really have no sense to forget these small fixes...
  1. more than a month ago
  2. Helix Ultimate
  3. # 40
Unfortunately, but it's not up to me
  1. more than a month ago
  2. Helix Ultimate
  3. # 41


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.