Order - Social Share Buttons - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 30 total)

Author

Posts
July 12, 2023 at 9:16 pm #1413171

woogie07
Participant

Hi

I have used the Social Share Buttons element

The order of the icons appears default as checked in the element:
Facebook
Linked In
Instagram

How do I change the default order to:
Linked In
Instagram
Facebook

Thanks

July 13, 2023 at 6:05 am #1413182
Nikko
Inactive Moderator
Hi woogie07,

Please go to Enfold > General Styling > Quick CSS, and add this CSS code:
```
#top .av-share-box ul {
    display: flex;
}

#top .av-share-box ul li {
    display: block;
    flex: 1;
}

#top .av-share-box ul .av-social-link-linkedin {
    order: 1;
}

#top .av-share-box ul .av-social-link-instagram {
    order: 2;
}

#top .av-share-box ul .av-social-link-facebook {
    order: 3;
}
```
Hope it helps.

Best regards,
Nikko
July 13, 2023 at 10:44 am #1413218

woogie07
Participant

Thanks, that worked, although the social icons now have a larger space between them.

July 15, 2023 at 12:30 am #1413323

Nikko
Inactive Moderator

Hi woogie07,

Can you give me a link to the page showing the social share? so I can try to inspect and give you a better code that fits your need.
You can post the link in private content.

Best regards,
Nikko

July 15, 2023 at 9:21 am #1413346

woogie07
Participant

See private

Thanks

July 16, 2023 at 2:10 pm #1413406
Nikko
Inactive Moderator
Hi woogie07,

Please replace the CSS code I gave with this one:
```
#top .av-share-box ul {
    display: flex;
    gap: 12px;
}

#top .av-share-box ul li {
    display: block;
}

#top .av-share-box ul .av-social-link-linkedin {
    order: 1;
}

#top .av-share-box ul .av-social-link-instagram {
    order: 2;
}

#top .av-share-box ul .av-social-link-facebook {
    order: 3;
}
```
Hope it helps.

Best regards,
Nikko
July 22, 2023 at 12:32 pm #1414033

woogie07
Participant

Hi, thanks for the info. That worked.

However, I now need to add and additional circular logo after the social logos. It isn’t a social logo, but a Teams logo that I custom added in the icon set.
Is there a way to do this, or can I manually set up 4 x circular icons side by side within the 1/3 column content element?

Thanks

July 22, 2023 at 11:38 pm #1414094

Mike
Moderator

Hi,
Try to add your Teams logo as a social profiles and then it will show in the share box with your other ones, please see this thread. You have already done the first part of making the icon on Fontello, so just follow after that step.

Best regards,
Mike

July 24, 2023 at 10:25 am #1414198

woogie07
Participant

Hi Mike,

Thanks for this.

My coding knowledge is limited and I do not run a child theme.

If I am adding the Teams logo, is the CSS below correct?
Then I add the Teams logo in > Enfold > Social Profiles

Please advise.

Thanks

********

function avia_add_custom_icon($icons) {
$icons[‘teams’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘ue800’);
return $icons;
}
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);

function avia_add_custom_social_icon($icons) {
$icons[‘Teams’] = ‘teams’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);
add_filter(‘avia_social_share_link_arguments’, ‘avia_add_social_share_link_arguments’, 10, 1);
function avia_add_social_share_link_arguments($args){
$teams = array(‘teams’ => array(“encode”=>true, “encode_urls”=>false, “pattern” => “https://www.microsoft.com/en-gb/microsoft-teams/group-chat-software/”, ‘label’ => __(“Share on Teams”,’avia_framework’)));
$args = array_merge($teams, $args);
return $args;
}

July 24, 2023 at 12:21 pm #1414221

Mike
Moderator

Hi,
I would need to login to your site and examine your Fontello icon zip to determine the correct icon code number, ue800 in the code doesn’t work for eveyone, yours could be a different number.
If you are not going to use a child theme I recommend installing the plugin WPCode – Insert Headers, Footers, and Code Snippets, this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snipets. Otherwise your customization will be lost when you update next.

Best regards,
Mike

July 24, 2023 at 12:32 pm #1414225

woogie07
Participant

Hi Mike,

See login in Private

Thanks

July 25, 2023 at 9:43 am #1414327

woogie07
Participant

Hi

Could you come back to me on this
OR
Is there a simple solution to have 4 x icons in circles on the same row within a 1/3 column?

Thanks

July 25, 2023 at 10:23 am #1414341

Guenni007
Participant

just if another participant comes to this topic:
you can order your social media icons on setting them in the “Social Media Profile” in the right sequence – from top to bottom is left to right.
Unfortunately, you can’t drag and drop the fields into position.

July 25, 2023 at 10:31 am #1414343

woogie07
Participant

Thanks, but the issue is as per the trail. I need to add the Teams Icon that I set up as as an icon before, but it isn’t currently included within the social profiles.

July 25, 2023 at 2:26 pm #1414373
Guenni007
Participant
ok – your mentioned code – your font is called fontello or do you use the existing : entypo-fontello font.
then your code is wrong with the name of the font

next : on docu there is an example code – using images instead of font icons . You will have the opportunity to have better social icon instead f.e:
from : https://iconduck.com/icons/185336/teams
( here with 40px icon – but adapt it to your needs )
```
#top .social_bookmarks li,
#top .social_bookmarks li a {
  width: 40px;
  height: 40px;
}

#top #wrap_all .av-social-link-teams a:before{
    content: "";
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    background: url(/wp-content/uploads/teams.png) no-repeat center center;
    background-size: contain;
}
```
the link you can set in options on enfold
see: https://enfold.webers-webdesign.de/#footer
July 25, 2023 at 2:41 pm #1414374

woogie07
Participant

Hi,

I added the Icon as a custom icon within fontello.

As per my earlier message in the support topic, I am not that knowledgeable on code, so still unsure what is required?
Is the code you suggested ok for the current fontello Icon I have?

Please confirm.

Thanks

July 25, 2023 at 3:25 pm #1414381
Guenni007
Participant
ok – now i tried to do it with a font file
i only uploaded that teams icon : font name is teams so i used:
```
function avia_add_custom_social_icon($icons) {
$icons['Teams'] = 'teams';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

function avia_add_custom_icon($icons) {
    $icons['teams']  = array( 'font' =>'teams', 'icon' => 'ue800' , 'display_name' => 'Teams Link');
    return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
```
see: https://enfold.webers-webdesign.de/3d-icons/#footer
July 25, 2023 at 3:27 pm #1414383

Guenni007
Participant

as a participant as you are – i do not see any private content message.
i do not know what is the name of your uploaded font for that teams icon!

July 25, 2023 at 4:16 pm #1414389

woogie07
Participant

Thanks

Where would I find the name of the custom fontello font I uploaded to the theme?
if I roll over the icon within the element, it says “ue800”

If I can find it, do I add the CSS code you created with the correct name

Thanks

July 25, 2023 at 4:21 pm #1414390
Mike
Moderator
Hi,
Thanks for the login, since you are not using a child theme I added the WP Code plugin for the customization of adding the Teams social profile. Then I add your new Teams social profile to Enfold Theme Options ▸ Social Profiles ▸ Your social profiles and then I enabled it at Enfold Theme Options ▸ Blog Layout ▸ Profile Links At The Bottom Of Your Blog Post and then I enabled it in your Social Buttons element

I then added this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field for the Teams icon background color on hover:
```
#top #wrap_all .av-social-link-teams:hover a{
    color:#fff; 
    background-color:#00f2ea; 
}
```
Please adjust the color to suit.

Best regards,
Mike
July 25, 2023 at 4:28 pm #1414392

Guenni007
Participant

On import export you can see the font you uploaded

on that place where you see on hovering the font icon code there is no info on the font-name?

July 25, 2023 at 4:57 pm #1414395

woogie07
Participant

Thanks for your help on this.

On my contact page, the share icons have the Teams icon as no1
If I wanted the Teams icon to be no 4, do I need to change the CSS supplied by Nikko to below?

eg.

#top .av-share-box ul {
display: flex;
gap: 12px;
}

#top .av-share-box ul li {
display: block;
}

#top .av-share-box ul .av-social-link-linkedin {
order: 1;
}

#top .av-share-box ul .av-social-link-instagram {
order: 2;
}

#top .av-share-box ul .av-social-link-facebook {
order: 3;
}
#top .av-share-box ul .av-social-link-teams {
order: 4;
}

July 25, 2023 at 7:13 pm #1414408

woogie07
Participant

Hi,

Is there a way I can add the social icons/teams icon in the footer last 3rd column?

White icons on Blue #181F35 circle or square in a row of 4 icons?

Please advise.

Thanks

July 25, 2023 at 8:16 pm #1414411

Mike
Moderator

Hi,
Your css to move the Teams icon to be number 4 is correct and I see you have done this, to add your social icons to the third row in the footer, try using Guenni007’s solution to create a shortcode of the social icons, and add it to the third row in the footer.

Best regards,
Mike

July 25, 2023 at 9:25 pm #1414415

woogie07
Participant

Hi Mike,

I do not run the child theme to add the functions php

Can it be added in the functions.php? If so, can you add or let me know where to add?

I presume this would be lost of the theme was updated?

July 25, 2023 at 11:43 pm #1414436

Mike
Moderator

Hi,
Please try adding it to the WP Code plugin that I installed for you, in the top right corner use the PHP snippet as the code type:

You can use this plugin for all of your future code snippets and you won’t lose them when you update.
Please refer to the Teams social profile code that I added for you earlier as an example.

Best regards,
Mike

July 26, 2023 at 10:18 am #1414495

woogie07
Participant

Hi Mike,

Thanks for that.

So once I have inserted the php snippet code into the plugin,
I create a text widget in the footer Menus and insert this into it the text area?
[social-bookmarks]

Please confirm

Thanks

July 26, 2023 at 11:57 am #1414521

Mike
Moderator

Hi,

That is correct, I added the code and the css for the code to your WP Code plugin:

and the shortcode in your third footer widget:

and now it shows in your footer:

Please review.
Best regards,
Mike

July 26, 2023 at 5:42 pm #1414552

woogie07
Participant

Hi Mike,

Thats great.

Thanks again.

July 26, 2023 at 5:55 pm #1414555

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 30 posts - 1 through 30 (of 30 total)

The topic ‘Order – Social Share Buttons’ is closed to new replies.