Styling #Hashtags? Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
4 posters

    Styling #Hashtags?

    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°1

    In progress Styling #Hashtags?

    Post 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
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°2

    In progress Re: Styling #Hashtags?

    Post 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


    Last edited by SLGray on February 23rd 2016, 10:20 pm; edited 1 time in total



    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°3

    In progress Re: Styling #Hashtags?

    Post by Rukiafan February 23rd 2016, 10:19 pm

    I see! Thanks! What about styling the Hashtags?
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°4

    In progress Re: Styling #Hashtags?

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




    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°5

    In progress Re: Styling #Hashtags?

    Post 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?
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°6

    In progress Re: Styling #Hashtags?

    Post 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.



    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°7

    In progress Re: Styling #Hashtags?

    Post 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
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°8

    In progress Re: Styling #Hashtags?

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

    The code in the tutorial is not a hover code.



    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°9

    In progress Re: Styling #Hashtags?

    Post by Rukiafan February 23rd 2016, 10:39 pm

    Okay that'll work mostly, but how can I hide the # symbol in hashtags?
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°10

    In progress Re: Styling #Hashtags?

    Post 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.



    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°11

    In progress Re: Styling #Hashtags?

    Post 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
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°12

    In progress Re: Styling #Hashtags?

    Post 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
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51515
    Reputation : 3519
    Language : English
    Location : United States
    • Post n°13

    In progress Re: Styling #Hashtags?

    Post 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.



    Styling #Hashtags? Slgray10

    When your topic has been solved, ensure you mark the topic solved.
    Never post your email in public.
    • Back to top
    An
    An
    An
    Forumember


    Posts : 44
    Reputation : 24
    Language : English
    • Post n°14

    In progress Re: Styling #Hashtags?

    Post 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.
    • Back to top
    Rukiafan
    Rukiafan
    Rukiafan
    Forumember


    Posts : 329
    Reputation : 9
    Language : English
    • Post n°15

    In progress Re: Styling #Hashtags?

    Post 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
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°16

    In progress Re: Styling #Hashtags?

    Post 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/
    • Back to top