How to change the order of the social share icons on articles - Forum | JoomShaper
Solved Helix Framework

How to change the order of the social share icons on articles

Asked by Sandra97 2 years ago Last activity 2 years ago

Hello,

Currently, on my articles, the order of the social share icons is Facebook - X - Linkedin.

Could you tell me which file I should edit to change this order?

Thanks in advance

Sandra

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
2 years ago

Small correction is need :))

After ".social-share-icon ul li:first-child {order: 2;}" ADD also:

 .social-share-icon ul li:last-child {order: 1;}
.social-share-icon ul li:nth-child(2) {order: 3;}

it worked on our demo site.

6 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
2 years ago

Hi Sandra,

In most cases that one: templates\shaper_helixultimate\html\layouts\joomla\content\social_share.php

Also in template based on Helix Ultimate: templates\THEME-NAME\html\layouts\joomla\content\social_share.php

Sandra97 Asked this
2 years ago

Hi Paul,

Thanks!
I just edited the order in the file templates/finion/html/layouts/joomla/content/social_share.php
But on the frontend, the order doesn't change.

Any idea why?

Paul Frankowski Senior Staff
2 years ago · edited

Oh, weird maybe Joomla cache. But I have better idea than code edition. Custom CSS method, give me minute.

Paul Frankowski Senior Staff
2 years ago

To make twitter (x) first use thsi Custom CSS:

.view-article .finatic-blog-details .tags-wrapper .share-wrapper .article-social-share .social-share-icon ul {
  display: inline-flex !important;
}

.social-share-icon ul li:first-child {order: 2;}

In general it means: make 1st "icon" 2nd.

Sandra97 Asked this
2 years ago

Thanks Paul. It works fine but the thing is that my client wants as order: Linkedin - Facebook - Twitter (x)

Note that I don't have any cache enable.

Sandra

Sandra97 Asked this
2 years ago

Paul, you rock!

Thank you so much for your precious help.

Sandra

Log in to reply.