Make post sharing more obvious

[Paul B]

Brogan submitted a new resource:

Make post sharing more obvious - Add this

This is a very small change but one which may see your posts being shared more widely.

It's not immediately obvious that clicking on the # or the post ID will make the sharing overlay available.

View attachment 77562

A simple bit of CSS can fix that.

Read more about this resource...

 

[rdn]

Using FontAwesome

.message .publicControls .item.postNumber:before {
    content: "\f0fe";
    font-family: FontAwesome;
    margin-right: 3px;
    color: #FE6D4C;
}

 

[Paul B]

I don't use FA.

Not everyone does, believe it or not

 

[erich37]

great Addon

 

[zagorskey]

Using CSS only:

.message .publicControls .item.postNumber:before{
content:'+';
float:left;
margin:2px 3px 0 0;
padding:1px;
color:#fff;
font:700 14px/8px Arial;
background:#fe6d4c;
border-radius:2px
}

 

[JamesBrown]

That looks great Brogan. However I don't have the Share This option showing like you do at your site. Is this turned on in xF or is it an addon? Thanks.

 

[Steve F]

That looks great Brogan. However I don't have the Share This option showing like you do at your site. Is this turned on in xF or is it an addon? Thanks.

It is default in XenForo, and should on by default.

 

[rdn]

That looks great Brogan. However I don't have the Share This option showing like you do at your site. Is this turned on in xF or is it an addon? Thanks.

• /admin.php?options/list/stats
• AddThis

 

[JamesBrown]

• /admin.php?options/list/stats
• AddThis

Sorry that's a bit too cryptic for me. explain as if you were talking to a young child, I might get it then Thanks,

 

[Paul B]

ACP -> Options -> Statistics and Metrics

 

[karll]

The FontAwesome solution doesn't look good with a dark background / style. Is there a way to fix it? I tried adding "background: #FFFFFF;" but there are some gaps above and below the character that become white as well ....

 

[Paul B]

I don't use FA so I can't help.

You can always use one of the other solutions.

 

[karll]

OK, straight CSS is perfect. Thank you

 

[IPF]

Works like a charm. I used my own button.

 

[Mike Edge]

Two thumbs up!

 

[Wildcat Media]

I am going to make use of the CSS version.

In one of my forums, I made a template edit which essentially just duplicates the "#15" link but uses the word "Share". The icon in this resource is much cleaner though.

Thanks for the resource @Brogan !

 

[Mouth]

I've added the CSS Only option to my Extra.CSS, but am not seeing the addition.
Would appreciate if someone could take a look and let me know why? I've spent around 20mins and not been able to determine why not.

 

[Paul B]

Are you using a third party style?

 

[Mouth]

Are you using a third party style?

Yes, UI.X (with some customisation)

 

[Paul B]

I suspect the selectors may be different.

I'm on my tablet so I can't inspect the code on your site.