Hiccups modifying fonts and color palette (...)

[Patrick Cormier]

Hello everyone,

I used TW about 12 years ago and I just came back to it today... Long absence, I want to use it to issue newsletters.

I made a view only link to the TW hosted on google drive: http://bit.ly/digitransfo-newletter-1712 (you would have to download and open lhe file locally)

I'm having no problem using the chrome extension for saving changes - great. Saving is much easier than 12 years ago... :)

I did my best changing the color palette so it matches the look & feel I'm after. I'm stuck however with these unresolved issues:

• How can I change the table header text foreground color? I only found how to change the table header text background, not foreground...? See table in tiddler "Featured Content" 
• I can't figure out why my white text in the sidebar menu under tabs "Newsletter Contents" and "About" is smudgy and not as clean as the other white text?! I've been trying to figure this out for two hours, to no avail
• Is there a way to specify different google fonts for body text and headings..?
• Is there a way to change the horizontal 50-50% screen real estate split between the sidebar menu and the story? I find the sidebar should take less than 50%...
• Has anyone tried to add an image banner above the sidebar menu? Or above the whole page? And/or add a page footer?
• Does anyone have a cheat sheet or reference guide that explains how to do more advanced stuff with tables than what is in the basic guide, for example, cell padding and modifying the foreground (text) and background (fill) cell colour on a cell by cell basis? I could do this 12 years ago but completely forgot how...

Sorry, lots of questions for a first post, but I rarely post and can usually find out stuff on my own, but the questions above, no luck...

Merci :)

Patrick

http://patrick-cormier.info/

[TonyM]

Patrick,

Without necessarily t answering all your questions, 

• you can use all HTML table and other markup if you know that which allows you to use style or class against most elements
  
• Has the style applying to your smudgy test have a boarder?
• I think someone else has addressed google fonts, and font awesome so search for tiddlywiki + fonts
• Change the Settings (controlPanel > Appearance > Theme Tweeks Options > Side Bar Layout (I use Fluid Story , Fixed Side bar)
• $:/core/ui/SideBarLists system tiddler has a lot to to with display of the sidebar
  
• You can add tabs in the Side bar by tagging a tiddler $:/tags/SideBar
• Or perhaps you want a tiddler tagged with one of the following to place things around the page (try this for an image banner

    $:/tags/TopLeftBar

    $:/tags/TopRightBar

    $:/tags/AboveStory

    $:/tags/BelowStory

    $:/SiteSubtitle

• In tw tables you can use @@.classname Your Cell content@@
• Or aforementioned full html tables

Have a go and ask again :)

Regards

Tony

[Patrick Cormier]

Thanks Tony,

About the fonts, The problem is I am not a CSS coder or developer... So I can read and follow instructions when they are not open to interpretation, for example, I found how to upload a font to fontsquirrel to download a webkit and then create a tiddler to make the font available. But when I read the following which is said to change the fonts of tiddler body text and headings:

.tc-tiddler-frame .tc-tiddler-body {

font-family: serif;

}

.tc-tiddler-frame .tc-tiddler-body > h1 {

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

.tc-tiddler-frame .tc-tiddler-body > h2 {

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

.tc-tiddler-frame .tc-tiddler-body > h3 {

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

I don't know what to change - for  H1 above I read  "Helvetica Neue", Helvetica, Arial, "Lucida Grande"  and I'm confused - why specify 4 fonts, 2 in quotes, 2 without? 

And for tiddler-body it looks like an incomplete font specification, just "sans serif"?

Is there any hope of getting through this even if I do not know CSS...? 

Also, about "Has the style applying to your smudgy test have a boarder", I haven't applied any stype, the text is like that and I do not know why.

I am not sure what this means: "you can use @@.classname Your Cell content@@" / is this how to pad cells or specifiy different cell colors..?

Thank you so much for the tips you suggested I am experimenting with them now!

Cheers

Patrick

[Eric Shulman]

On Saturday, December 2, 2017 at 5:30:24 PM UTC-8, Patrick Cormier wrote:

I don't know what to change - for  H1 above I read  "Helvetica Neue", Helvetica, Arial, "Lucida Grande"  and I'm confused - why specify 4 fonts, 2 in quotes, 2 without? 

Different systems have different, but similar font definitions.  To address this, CSS allows you to specify a comma-separated list of font names.  Names that contain spaces (e.g., "Helvetica Neue") must be enclosed in quotes, while names without spaces don't need the quotes.  The list of font names is processed left-to-right, until a font name is matched.  Thus, the list defines a "fallback" sequence... i.e., if "Helvetica Neue" is not found, try "Helvetica", then "Arial", and finally "Lucinda Grande".  If no matching font is found on your system (unlikely, but still possible), the browser will fall back to it's own default font choice (often, but not always, a "Times Roman" serif-ed font).

And for tiddler-body it looks like an incomplete font specification, just "sans serif"?

 

"serif" and "sans-serif" are generic names that always correspond to *some* installed font, so it is often sufficient to just specify the one font name, rather than a whole list of font names

 

I am not sure what this means: "you can use @@.classname Your Cell content@@" / is this how to pad cells or specifiy different cell colors..?

TiddlyWiki syntax allows you to wrap any content (not just table cell content) using @@.classname ...@@ syntax.   The ".classname" refers to a CSS class defined in a stylesheet tiddler (a tiddler tagged with "$:/tags/Stylesheet", containing CSS declarations).  Note that, in the above TiddlyWiki syntax, there is a *space* following the classname... this is important, as it signals the end of the classname and the start of your content.  Everything following that space, up to the closing "@@" is content, that will be styled using the declared classname.

Alternatively, you can also use CSS definitions directly "inline", rather than defining a classname in a separate Stylesheet tiddler.  For example, using the standard CSS text style "color", you can write:

@@font-family:Times New Roman;font-weight:bold;color:green;background-color:yellow; THIS IS A BOLD, GREEN, AND SERIF-ED FONT@@

Note also that items of inline CSS are separated by a semi-colon (;) and, unlike the .classname example above, the CSS does not *require* a trailing space, as long as the content that follows it does not match any valid CSS syntax.  Even so, it's a good idea to *always* include the trailing space to ensure that the end of the CSS syntax is clearly defined, regardless of the text content that follows it.

hope this helps,

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[Patrick Cormier]

Hi Eric!!

Thank you very much, quite generous with your time. Is it allowed to request paid help (on an hourly basis) in this google group? It's going to take too much time for me to iron out the last details and I would rather work with and pay someone that knows what they are doing (TW + CSS) to get me the file to be as I want it to be. For example, when I tried your example, it only colored the background of the text in the cell, the the whole cell, etc.

Should I just go ahead and request paid help..? I can't imagine this is going to be more than a few hours (total) if someone knows what they are doing.

Patrick

[Patrick Cormier]

For anyone still reading this thread please head over to: https://groups.google.com/forum/#!topic/tiddlywiki/nJGE1piQD_w