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.

Styling #Hashtags?

4 posters

Go down

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
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Styling #Hashtags?

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

I see! Thanks! What about styling the Hashtags?
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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?
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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?
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51608
Reputation : 3529
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

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.
An
An
Forumember

Posts : 44
Reputation : 24
Language : English

https://help.forumotion.com

Back to top Go down

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
Rukiafan
Rukiafan
Forumember

Posts : 329
Reputation : 9
Language : English

Back to top Go down

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/
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top

- Similar topics

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