Styling #Hashtags?

by Rukiafan February 23rd 2016, 10:13 pm

Is their anyway that we could style hashtags to appear like the keywords in the topic titles here: https://help.forumotion.com/t133869-style-topic-title-keywords#901194

With dark grey colored padding rather than the white colored padding in the tutorial. I'd also like to prevent normal members from using the new #Hashtag system so it can be used only for keywords in the blog entries!

@Ange Tuteur I summon you! Wink

by **SLGray** February 23rd 2016, 10:18 pm

You can set who can use it in the administration panel.

Style Hashtags: https://help.forumotion.com/t140504-additional-options-for-hashtags#955294

by Rukiafan February 23rd 2016, 10:19 pm

I see! Thanks! What about styling the Hashtags?

by **SLGray** February 23rd 2016, 10:20 pm

SLGray wrote:Style Hashtags: https://help.forumotion.com/t140504-additional-options-for-hashtags#955294

by Rukiafan February 23rd 2016, 10:29 pm

That does absolutely nothing for me. I want to style the hashtag itself not add a popup to it when highlighted. By the way is there any way to make hashtags not show the # before them?

by **SLGray** February 23rd 2016, 10:32 pm

The tutorial adds codes that give hashtags a selector that you can use in the CSS stylesheet to style the hashtags the way you want.

by Rukiafan February 23rd 2016, 10:35 pm

Even without highlighting them? Because I want the styling to affect the hashtags at all times. Wink

by **SLGray** February 23rd 2016, 10:37 pm

The code in the tutorial is not a hover code.

by Rukiafan February 23rd 2016, 10:39 pm

Okay that'll work mostly, but how can I hide the # symbol in hashtags?

by **SLGray** February 23rd 2016, 10:43 pm

That is how the hashtag system works. You have to use that symbol to make a word a hashtag.

by Rukiafan February 23rd 2016, 10:50 pm

I kind of want it to be used as Keywords for our blogs rather than "hashtags" though. Which is why I want style them and get rid of the symbol. I know the symbol can be hidden with CSS somehow. Razz

@Ange Tuteur Also the code in that tutorial isn't working on my website... scratch

by Rukiafan March 6th 2016, 7:16 pm

@Ange Tuteur Could you please send me the minified CSS for this? I'm getting those weird symbols in my CSS for the Hashtag Style code...also any tips for turning the Hashtags into keywords by hiding the # symbol?

Thanks in advance! Wink

by **SLGray** March 6th 2016, 7:32 pm

https://help.forumotion.com/t140504-additional-options-for-hashtags#1003297

I believe if you hide the # symbol it will cause the words to not work as hashtags.

by An March 6th 2016, 10:30 pm

Use the script below to slice the hash from hashtags.

Code:: $(function() { $('a[href^="/tags/"]').each(function() { var html = this.innerHTML; if (html.charAt(0) == '#') { this.innerHTML = html.slice(1); } }); });

The modification is aesthetic, so the hashtags will not lose their normal functionality.

by Rukiafan March 7th 2016, 6:16 am

@An Thanks it worked! @SLGray Could you please provide me with a minified version of the CSS for this feature? Weird things happen when I copy normal CSS using my Wii U's built-in web browser. Embarassed

by Ange Tuteur March 7th 2016, 7:19 pm

This is the popup CSS :

Code:: .fa_hashtag-options{color:#666;font-size:11px;font-family:Verdana,Arial,Helvetica,sans-serif;line-height:14px;background:#EEE;border:1px solid #CCC;border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.175);margin-top:20px;padding:3px;position:absolute;z-index:100}.fa_hashtag-title{font-size:12px;border-bottom:1px solid #CCC;padding-bottom:3px;margin-bottom:3px}.fa_hashtag-options a{color:#333;text-decoration:none;display:inline-block;padding:2px 6px 2px 0}.fa_hashtag-options a:hover{color:#666;text-decoration:underline}.fa_hashtag-options b{color:#333;padding-left:6px}.fa_hashtag-tag{color:#000;font-weight:700}

This is the hashtag CSS :

Code:: a.fa_hashtag{color:#666;text-decoration:none;background-color:#EEE;border:1px solid #CCC;border-radius:3px;display:inline-block;padding:3px}a.fa_hashtag:hover{color:#333;background-color:#DDD;border-color:#999}

and this is the sceditor dropdown CSS ( if you installed the sceditor script ) :

Code:: .sceditor-button-hashtag div{background-image:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png)!important}#fa_hashtag{background:url(http://i19.servimg.com/u/f19/19/06/98/92/scehas11.png) 3px 50% no-repeat #FFF;padding-left:22px}

For future reference anyone can minify CSS code with this tool :
https://cssminifier.com/