How to replace the current tagging box to comma seperate tagging (like wordpress)?

[Jimmy Liew]

Hi all,

I have tried searching for a small fixed for my classic tiddlywiki to change the current tagging box to a comma-seperate tagging (like wordpress).  If anyone can provide a simple break fix, I would be appreciated.  Thanks.


Regards,
Jim

[Eric Shulman]

On Monday, January 27, 2014 9:41:45 PM UTC-8, Jimmy Liew wrote:

I have tried searching for a small fixed for my classic tiddlywiki to change the current tagging box to a comma-seperate tagging (like wordpress).  If anyone can provide a simple break fix, I would be appreciated.  Thanks.

Here's some CSS that you can add to your [[StyleSheet]] that will give you comma-separated inline display of the tags:

   .tagged li { display:inline; }

   .tagged li:after { content:", "; }

   .tagged .button { padding-left:0em; padding-right:0em; }

   .tagged .listTitle:after { content:"" !important; }

These lines do the following:

1) make all tags display on one line (with word wrapping if needed)

2) add a comma (and space) after each tag item

3) omit the padding around the tag text (so that the comma spacing looks right)

4) omit the comma and space following the "tags:" heading

To make it look more like the default WordPress tag display, you can remove the tag box/background:

   .tagged, .selected .tagged { float:none; border:0px; padding:0px; background:none; }

You can also move the entire tags display to the bottom of the tiddler by editing the [[ViewTemplate]].  Simply move the "tagged" div so it *follows* the "viewer" div, like this:

   <div class='viewer' macro='view text wikified'></div>

   <div class='tagged' macro='tags'></div>  

One minor glitch: because I used the "li:after" selector in the CSS, there's an extra trailing comma following the last tag.  I was able to override the comma display for the .listTitle item (because it has a specific classname), but that can't be done for the last tag, since it doesn't have any special class assigned to it.  I tried experimenting with the ":last-child" selector to override the comma on the final tag, but haven't found the correct solution yet.

Let me know how this works for you....

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

EVERY DONATION IS IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Zaphod Beeblebrox]

Sorry to re-animate this very old post, but I just couldn't restrain myself from thanking Eric for helping me to solve a problem that has been plaguing me for days!

I followed your simple, clear directions and made the changes to my TiddlyWiki, but also changed a couple of other things:

Changed the display label of "tags:" to one which looks better to me and conforms more to the look of WordPress (and similar) platforms:

1. Searched (with a text editor) for "tags:"
2. Found it under merge(config.views.wikified.tag,{
   labelTags: "tags: ",
3. Changed it to labelTags: "Filed Under: ",
   

I know it would've been better to modify it through my custom StyleSheet, but I don't know the CSS syntax to use in this instance...

I also moved the list over to the left-hand side by adding

• .tagged {float: left;}

to your list of changes.

I plan to do some further editing of this item, including perhaps some styling of the tags themselves, to give them a 'tag-pill' look, like TW5 has.

Speaking of that, why, oh why haven't you applied your great brain to whipping TW5 into shape the way you did with TWC?!?  There are so many great features that I'd love to be taking advantage of with the newer version, but am running into roadblocks because of its incompatibilities with some of the things I need to accomplish.

Sorry, didn't intend to write a novel, here :blush:

Thank You, Eric :)