Ghostwriter theme by Rory Gibson adapted for TW5

[Riz]

Ghostwriter is a popular, minimalist and mobile responsive theme for the blogging platform ghost. Recently I adapted it for TW5

Screenshots http://imgur.com/a/5XReS

Demo https://ibnishak.github.io/ghostwriter/

If you want to try it out, backup your wiki, download this json, drag and drop it to your wiki. https://github.com/ibnishak/ghostwriter/tree/theme-json

Let me know how it works out for you.

[Jed Carty]

That looks really good! It flows very smoothly.

[ZEN]

drag and drop seems not to work for me ...i am doing something wrong ...*cry*
i saved a seperat wiki ...donwloaded the json drag the document ...not the zip into the open wiki site and nothing ..nothing happens
any idea?

[Riz]

Thanks Jed!!

@Zen - When you drag and drop the json to the wiki, the import tiddler appears or not?

[Hans Maulwurf]

Looks great, really nice work

[Riz]

Thanks Hans

[Josiah]

Ciao Riz...

FYI, I cited it on Twitter less than an hour ago (https://twitter.com/TiddlyTweeter/status/793746506612367360) . Already there is a positive response.

Best Wishes
Josiah

On Wednesday, 2 November 2016 11:06:08 UTC+1, Riz wrote:

Thanks Hans

[Riz]

Thank you Josiah. That is generous!!.

[Sylvain Naudin]

Amazing ! It looks great !! Thank you for this work, a very good use case :)

I will definitely have a closer look.

Sylvain

[Riz]

Thank you Sylvain :-)

[HC Haase]

Looks very nice

However I cant figure out how to edit a tiddler (or use any of the view toolbar)??

It may be best suited  for blogging purposes. For wiki purposes I would prefer some floating left and some clear end of tiddler. But beautiful none the less.

[HC Haase]

Funny
when I make the browser window small, the view toolbar appear...

[Riz]

Hi Haase,

The view toolbar is always there, it just appears when you hover over the region that normally houses the view-toolbar. This is done for aesthetic purposes. Credit to this technique - as given in the 'About' section goes to Tobias. You can ofcourse choose to have it appear always, or just the close button while keeping others transparent till hover - by editing the main stylesheet.

It appears when you reduce the browser window small - specifically less than 768px - because I have inactivated the appear-only-on-hover feature for mobile devices.

[Riz]

Here is the steps that will keep the 'close' button always visible while others will appear when you hover over the close button

1. Open up "$:/themes/ghostwriter/stylesheet/main"
2. Find the part that says  /* TIDDLER TOOLBAR */
3. Change it to
@media only screen and (min-width: 768px) {


 .tc-tiddler-view-frame .tc-tiddler-controls svg {
     fill: transparent;
 }

.tc-tiddler-view-frame .tc-tiddler-controls [aria-label~=close] svg,
 .tc-tiddler-view-frame .tc-tiddler-controls:hover svg,
 .tc-tiddler-view-frame .tc-tiddler-controls .tc-popup svg {
     fill: #cccccc;
 }
}

[magev958]

This does not seem to work in Chrome 51?

[Riz]

Hi magev958,
I haven't specifically tried it on Chrome 51, but I did try it on Chrome 53. Here is a screenshot of tiddlywiki.com on ghostwriter theme.

So can you give me more details? OS? After you imported the JSON, nothing happened? Since it is naught but a bunch of stylesheets, I am curious as to what went wrong.

[magev958]

Sorry, I was not clear. It's the fix to show the close-button not working, for me. Win 7 & Chrome 51. I added the css to Your stylesheet but the close-button is still hidden until hover

[Riz]

On Thursday, 3 November 2016 21:07:21 UTC+5:30, magev958 wrote:

Sorry, I was not clear. It's the fix to show the close-button not working, for me. Win 7 & Chrome 51. I added the css to Your stylesheet but the close-button is still hidden until hover

Ah, my mistake.
Hmmm, I thought Chrome supported that. Can you try

 @media only screen and (min-width: 768px) {


 .tc-tiddler-view-frame .tc-tiddler-controls svg {
     fill: transparent;
 }

 .tc-tiddler-view-frame .tc-tiddler-controls svg.tc-image-close-button,

[magev958]

Yes, that worked! Nice theme, really like the look :)

[Riz]

On Friday, 4 November 2016 01:30:36 UTC+5:30, magev958 wrote:

Yes, that worked! Nice theme, really like the look :)

 Thank you magev958 :-)

[HC Haase]

I see.
I did look for that, but I was moving my mouse too fast.

thanks

[Sylvain Naudin]

Le jeudi 3 novembre 2016 09:32:09 UTC+1, Riz a écrit :

Thank you Sylvain :-)

Can you share whith us your method to adapt this theme ? From scratch with a clean CSS ? Do you have some advice if someone wants to do similar work ?

Thanks,
Sylvain

[Tobias Beer]

Riz, 

That's some gr8 looking stuff there, kudos.

Best wishes,

Tobias.

[Riz]

That's some gr8 looking stuff there, kudos.

Thank You Tobias

[Riz]

Can you share whith us your method to adapt this theme ? From scratch with a clean CSS ? Do you have some advice if someone wants to do similar work ?

I would be only glad to if I can help. But the truth is I don't usually do anything beyond the already established method to modify a theme - ie
1) Find a target, something you want to modify your tiddly wiki to
2) Inspect the element using firefox and find out the relevant styles affecting it
3) Copy it to the corresponding parts of TW

Start from the base. A lot of properties will be inherited down. Whenever there is a central color, like green for evernote, I usually transclude it from a field so that another person can change the theme from a single point. For eg; you can change the ghostwriter theme color from Control Panel > Appearances >Theme Color.

Probably the only thing I do differently from the classic methods is that I apply styles based on values of a field, rather than the documented tc-tagged-xxx method. I have furnished the details on how I do that in an older thread here in case anyone is interested.


If you are interested in seeing something more:
For my personal use I made an Evernote clone using TW5

http://imgur.com/a/W0Ae9

Another based on Classipedia theme (a userstyle for Wikipedia) : http://imgur.com/a/wnQch

And my most extensive work, the one I spend most time and energy - can be see here: https://ibnishak.github.io/hQp/


 

[Jan]

This is really beautifull,
Thanks a lot....

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/bcb88da1-ce29-45bb-88d4-833ea1e4977b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Riz]

Glad you liked it :-)

[Jan]

Hi Riz,
Thanks again for this great theme, i just installed it.
Am I doing something wrong or is it not possible to switch back via the Theme-Switch in the controls.
I really like the theme because it is so brilliant for mobliles but I wasn't able to switch back...

Another idea:
For Desktop screens it is practical to have the Sidebar next to and not above the Storyriver. Is it possible to change this?

Yours Jan

Am 06.11.2016 um 12:19 schrieb Riz:

Glad you liked it :-)

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/11d2e60f-a802-4e95-b938-2c92adc57021%40googlegroups.com.

[Riz]

Hi Jan,

For Desktop screens it is practical to have the Sidebar next to and not above the Storyriver. Is it possible to change this?

Yeah Sure.
1. Open Control Panel > Appearance > Theme Tweaks
2. Find the values Story right and Story Width. Change it to Story right = 71% and Story width=70%. Now you can have Sidebar next to story river in the desktop. Tweak the values to your liking.

PS: You might find that search box is a bit larger for such a setting. If you want to solve that, Open $:/themes/ghostwriter/stylesheet/main, find
".tc-sidebar-lists .tc-search .tc-popup-handle { width: 60%; }" and change its value to 40% or something.

Am I doing something wrong or is it not possible to switch back via the Theme-Switch in the controls.

Only those themes appear in Theme-Switch which you have packed and installed as a plugin. If you want to remove ghostwriter, here is the steps.
1. Follow the instructions above and set the values of Story right =71% and Story width= 70%. This will avoid a minor inconvieniece later.
2. Now open Advanced Search > Filter tab. Search using [tag[$:/irreverent-mudblood/ghostwriter]]
3. Delete all the search results using the delete button that appears right to the search box.


Let me know if these worked for you.

Sincerely,
Riz

[Jan]

Hi Riz,
Thanks for the Story/Storyright tip...I did not know this works with percents...

I do not want to remove Ghostwirter, I would like to have it for special purposes.
Ghostwriter is best for visitors on the web and especially for mobile viewing,
For working and organizing and for powerpoint-like presentations I need different themes.
So i would very much like ghostwirter to behave like an addon, that can be chosen temporarily.

Thanks again...
Yours Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e82b7beb-74bd-4f90-a8f7-c5e3cdf59eb7%40googlegroups.com.

[Riz]

On Tuesday, 8 November 2016 03:49:59 UTC+5:30, Jan wrote:

Hi Riz,

I do not want to remove Ghostwirter, I would like to have it for special purposes.
Ghostwriter is best for visitors on the web and especially for mobile viewing,

Update time.

Hi Jan,
So I finally packed it to a plugin so that it can be switched using theme-switcher. You can install it by dragging a dropping the the plugin from https://ibnishak.github.io/ghostwriter/

New in update:

1. User can select the transparency of Pagetoolbar from Control Panel > Appearance > Ghostwriter tab. Also from the same tab user can choose whether to show/hide topbar, specific topbar buttons, add more topbar buttons etc.
2. Sidebar now corressponds to Control Panel > Appearance > Theme tweaks > Sidebar breakpoint. ie, below this value (eg:960px) sidebar will switch to mobile behaviour, covering the full screen.
3. Several modifications has been made to the toc-ghost macro so that it is more responsive and better adapted to smaller screens. You can see it in action by going to the default contents tab. Do test it out in mobiles.

Thank you for all your kind words. Let me know how it worked for you guys.

Sincerely,
Riz

[Sylvain Naudin]

Le jeudi 10 novembre 2016 12:17:06 UTC+1, Riz a écrit :

On Tuesday, 8 November 2016 03:49:59 UTC+5:30, Jan wrote:

Hi Riz,

I do not want to remove Ghostwirter, I would like to have it for special purposes.
Ghostwriter is best for visitors on the web and especially for mobile viewing,

Update time.

Hi Jan,
So I finally packed it to a plugin so that it can be switched using theme-switcher.

Nice :)

Thank you, I agree with Jan, that is a good option to have this swith theme if necessary.

I've play with it, look good ! And thank you for your advices.

Maybe can you had pick color option (both or instead text editor) ?

I have notice a minor issue with language selection (padding or margin with image ?).


Cheers,
Sylvain

 

[Riz]

On Friday, 11 November 2016 21:03:31 UTC+5:30, Sylvain Naudin wrote:

Maybe can you had pick color option (both or instead text editor) ?

I have notice a minor issue with language selection (padding or margin with image ?).


Cheers,
Sylvain

 

Thank you. Both valid suggestions - both corrected and plugin updated on https://ibnishak.github.io/ghostwriter/

Sincerely
Riz

[Jan]

Hi Riz,
Great, thanks a lot for this...I'll install it ASAP.
Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d9253502-09b1-4b4b-97c8-7dc107abc904%40googlegroups.com.

[Riz]

Absolutely. Let me know if you are missing something

[Jason Maskell]

Very nice!

[Riz]

On Tuesday, 15 November 2016 08:31:53 UTC+5:30, Jason Maskell wrote:

Very nice!

Thank you!!

[Mark S.]

(this post continues conversation started in different thread)

Hi Riz,

When zooming (pinching) in TW5 in Firefox, the text extends beyond the edge of the screen rather than flowing.

In Andtidwiki, the zooming works better, and the text reflows as it is zoomed.

I think the problem is that the FF browser (and probably other browsers) don't understand the actual pixel width of the screen for some reason.

Having a font associated with the theme would be a workable fix. The theme would need to save both the font and the font-height for tiddler bodies. Probably the other (non-tiddler) font and font-height would be good to save as well.

Thanks!
Mark 

On Tuesday, November 15, 2016 at 6:11:54 PM UTC-8, Riz wrote:

I do not want to hijack this post. So I would keep the response to this single post. Do feel free to post to the ghostwriter thread with further inputs.

Hmmm, did you mean a text-reflow on pinch to zoom? Can you suggest a setting where you have it working? Coz the only android mobile I have fails to do that in chrome, firefox and andtidwiki on sites like wikipedia, sciencedaily and google search. A quick googling tells me that there are firefox addons to achieve that albeit imperfectly, and there are drafts of some CSS properties under consideration to achieve it.

A simple workaround I can do is a setting in the ghostwriter tab where you can specify a font-size you would prefer on mobile screens once, and it will switch to that font size automatically thereafter whenever you switch to mobile. Will that do for you?

On Wednesday, 16 November 2016 00:27:15 UTC+5:30, Mark S. wrote:

I have the same problem with Riz's theme as I do the standard theme, at least under the Mobile firefox. When I zoom in on text the text "grows" off the edge of the screen. So I would have to tinker with all the settings in the themes to make the text larger when on a mobile device, and then have to tinker with them again when back on the desktop.

What's needed is a quick switch that would allow a whole set of font-size and width settings to be changed at once without having to go back to the theme page and type in memorized values.

Under antidwiki, the zooming works like a regular android app. But antidwiki will only allow one particular directory for its files which is unfortunately on the main card where space is scarce.

Mark

[Riz]

Hi Mark,

So I have updated the theme with options to specify a body font-size and title font-size for mobile screens. Once you set it, the theme will switch to the font-size everytime you are on mobile. This is a minor update I scraped during lunch-break. I will update it with wder customisation options for mobile as and when I get time.

Text reflow on pinch to zoom is, unfortunately, beyond the limits of my CSS knowledge.


https://ibnishak.github.io/ghostwriter/

Let me know how it worked for you.

Sincerely,
Riz

[Mark S.]

Hi Riz,

Being able to detect that it's on mobile is pretty amazing by itself!

It's looking very promising, but it really needs some way to tweak line height. At font 28px, almost half of the screen space is blank space (between the lines).

Thanks!
Mark

[Riz]

I will get to that. Keep an eye on https://ibnishak.github.io/ghostwriter/ so that I do not have to spam this everytime there is an update.

Sincerely,
Riz

[Mark S.]

Hi Riz,

I have been keeping an eye on it ;-)

I just noticed a possible problem, or maybe I just need to know how to use it better. On the desktop, you can hover over the "hidden" controls to edit a tiddler. But on mobile, there's no such thing as hover. So the controls remain invisible. So you can't edit the item unless you exactly guess where the hidden icon is.

Thanks!
Mark

[Rizwan Ishak]

Hi Mark, 

The theme usually deactivates the appear only on hover feature once the screen resolution goes below the breakpoint. Does it not work on your system? Can you reply with details of the platform?

Thanks for your continued interest and support. 

From:tiddl...@googlegroups.com Sent:21 November 2016 1:17 AM To:tiddl...@googlegroups.com Reply to:tiddl...@googlegroups.com Subject:[tw] Re: Ghostwriter theme by Rory Gibson adapted for TW5

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e2f553c7-0191-402b-972c-50517cf6b0e4%40googlegroups.com.

[Mark S.]

It is 800 x 1280 pixels (~189 ppi pixel density).  Would that be high enough to trigger the breakpoint?

Thanks!
Mark

[Riz]

The breakpoint is whatever you are setting at Control Panel > Appearance > Theme Tweaks > Sidebar Breakpoint. Since this setting is included in the core TW5, I saw no point in duplicating it for the theme. The default setting is usually 960px - which refers to the width. ie, under 960px wide screens, the theme will switch over to mobile behaviour. You can of course set your own value for this. For eg; try setting the Sidebar Breakpoint to something like 1500px and you can have a full width sidebar even in your desktops.

[Tom Bardout]

Hi, 

Great Plugin :) I was starting to look at how i could improve the esthetics of the site i'm making and I saw the menus. I'm not intrested in grabing the whole theme, but i'd really like to have the simplistic style you have for the tab menus in my tiddlers. Anyway to acheive that? Looking through the example site, I can't get the tab menus to have the style they have in the sidebar...

[Riz]

Just the tabs? See if the attachment will suffice.

[Tom Bardout]

Hi,

No unfortunately it doesn,t work. I imagine you have to add a snippet of code in the tiddler where the tabbed menus are, to override the default theme your using, right? I've tried a few things but to no avail. 

[Tom Bardout]

I downloaded and imported sucessfully. Refreshed page but tabs still have the same vanilla look. 

I'm not sure my explaination was clear. Just so we're on the same page: i'm not trying to get the sidebar to display tabs diffrentley. I don't have a sidebar on my site. I'm trying to get the same esthetic for the tabbed menus present in all my tiddlers.

Is that what you understood?

[Riz]

Oh, well I guess I did not understand it at all then. Let me put try and put it in my words. You want to apply the styles of tabs in the ghostwriter sidebar to all the tabs in your TW?

[Tom Bardout]

Yes, exactly. Is that possible? I at least want to remove the outline so that we only see the title text and then make the text bigger and bolder

[Riz]

Sure. Drag and drop the attachment

[Tom Bardout]

Thanks, It worked perfectly. You just made my day :)

[Charles Ridout]

Riz:

I do not have the programming knowledge to make these changes myself. I hope you can help.

A few observations and one request:

1) In the Chrome browser the tiddler titles are not being centered as they are in Firefox.
2) In the Chrome browser the drop down contents exceed the size of the "box". This does not occur in Firefox.

Request:

I would like to change the color of the solid bar, to be similar to what is seen in the Moments theme, when viewing a tiddler.

Thx


On Tuesday, November 1, 2016 at 11:49:58 PM UTC-4, Riz wrote:

Ghostwriter is a popular, minimalist and mobile responsive theme for the blogging platform ghost. Recently I adapted it for TW5

Screenshots http://imgur.com/a/5XReS

Demo https://ibnishak.github.io/ghostwriter/

If you want to try it out, backup your wiki, download this json, drag and drop it to your wiki. https://github.com/ibnishak/ghostwriter/tree/theme-json

Let me know how it works out for you.

[Riz]

Hi,

I am currently a little pressed for time. So it will be some time before I can get hold of the what is wrong.  Can you provide some more details meanwhile? Here is an screenshot of the theme working in chrome. Is yours different? Which TW version are you using? I have not really managed to get around to testing them in 5.1.14,probably will take some time before I can that. Which OS are we talking about?

[susui...@gmail.com]

Hi RIZ,

I do love your work! Thank you so much for that great theme! I really appreciate all of your work! THANKS SO MUCH! Just some short questions are left... 


First of all I did notice, that this link is not working.

here:https://ibnishak.github.io/

I would love to ask  why I do see a 'strange tiddler text editor'  [cursor size/can't see marked text] .

1.

I did uploaded a picture ['strange tiddler text editor'].

There a a couple of things taht I can't do or see in the text editor.

2.

Is there any possibility to just have a date without a timestamp below the tiddlers tittle ?

3.

On the left side of the tiddler I do see the tiddler tags. Can I delete this option to show those tags on the right side?

Any hints from your side where so amazing!  I would realy appreciate that! 

And I do find your  CL'EVERNOTE' theme so so amazing, too! Do I find that online? 

Thanks so much again!!!
Best wishes! 

Susu 

[Riz]

Hi Susu,

I am glad to see that you are enjoying the theme.

Let us get to the issues you raised.

First of all I did notice, that this link is not working. here:https://ibnishak.github.io/

1. ibnishak.github.io is not working. Yeah, I moved my blog and much of the TW related stuff to a private repo in gitlab. IWhatever I presented the community has been kept as is, if anybody ever manages to find it. I had plans to set up a blog describing my tinkering with TW, but time is harsh master.

    I would love to ask  why I do see a 'strange tiddler text editor'  [cursor size/can't see marked text] .

This is indeed strange. May be I am misunderstanding here, but you are experiencing diffuclties with the edit template, and cursor. The theme does not modify edit template at all. Further more, I am at a loss on how to reproduce the error. Have you had any modifications made to edit-template?

    On the left side of the tiddler I do see the tiddler tags. Can I delete this option to show those tags on the right side?

Sure, Download the attached "Move tags to right.json", and drag and drop it to your TW. Although I suspect this might be buggy, especially some drop down somewhere is going to act up. I have not had a chance to test it in detail. If you come across an issue, let me know

Is there any possibility to just have a date without a timestamp below the tiddlers title ?

 

Sure, Download, the attached "$__language_Tiddler_DateFormat.json" and drag and drop it to your TW. In fact you can do it in any of your Tiddlywikis  - it is not a part of ghostwriter theme.  Open your Advanced Search, find the tiddler "$:/language/Tiddler/DateFormat" and modify it to your wishes. http://tiddlywiki.com/#DateFormat will guide you better on how to achieve what you want.

 And I do find your  CL'EVERNOTE' theme so so amazing, too! Do I find that online?

 

I repurposed that for another TW project. Releasing it as a theme at this point will be hard work. At the point of making it, I was waiting out for the resolution of "How to archive the wisdom of TW group" debate. Later, pardon my short attention span, I lost interest.


On a general point, it is nice to see general interest in the optics of TW.

[Su Su]

Hi Riz,

thank you so much for your great response!!! I really do appreciate all of your effort! I do see, that TW5 has a future. There are so much cool use cases I can imagine! 

To get to my issues. 

The Plugin codemirror raised a lot of trouble in the text editor.  

After deleting that plugin everything worked great again. I can't tell why or what is causing the text editor to behave in that strange manner. You can install the  plugin to reproduce that issue if you want to see it yourself. 

Due to all other stuff I will implement your suggestions and test it. I will come back, if I do have some other questions, for sure. And again, thank you so much for your great work! 

Best wishes,

Susu

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/7t2kbaSX8dg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d4b1fc95-84d6-43b2-94db-3097132648c0%40googlegroups.com.