The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Styling #Hashtags?

View previous topic View next topic Go down

In progress Styling #Hashtags?

Post by Rukiafan on February 23rd 2016, 10:13 pm

Is their anyway that we could style hashtags to appear like the keywords in the topic titles here: http://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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by SLGray on February 23rd 2016, 10:18 pm

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

Style Hashtags: http://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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

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

I see! Thanks! What about styling the Hashtags?

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

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



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Rukiafan on 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?

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by SLGray on 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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Rukiafan on February 23rd 2016, 10:35 pm

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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

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

The code in the tutorial is not a hover code.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

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

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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by SLGray on 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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Rukiafan on 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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Rukiafan on 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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by SLGray on March 6th 2016, 7:32 pm

http://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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Styling #Hashtags?

Post by An on 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.

An
Forumember

Posts : 42
Reputation : 23
Language : English

http://help.forumotion.com

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Rukiafan on 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

Rukiafan
Forumember

Posts : 267
Reputation : 8
Language : English

Back to top Go down

In progress Re: Styling #Hashtags?

Post by Ange Tuteur on 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/

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum