Hi M,
By chance or design, the header on TW appears big to many new users
[is there an example of design where there is a slight error to
encourage exploration?]. Changing the header is presents an
easy-to-solve problem which can mark the start a (personal non-linear)
learning process.
Changing the header introduces the concept of Cascading Style Sheets
(CSS), the language by which the appearance of Webpages is controlled.
A good starting point is the W3 Schools CSS tutorial, where you can
learn about the basics, syntax, ID and Class.
TiddlyWiki is slightly different than other web pages. The W3 tutorial
suggests "Three Ways to Insert CSS", but Tiddlywiki's design a unique
way to add CSS. In TiddlyWiki everything is stored in tiddler: The
"SiteTitle" tiddler contains the main text in the header
("TiddlyWiki" be default), "SiteSubtitle" contains the smaller text
("a reusable non-linear personal web notebook"). The "StyleSheet" is
intended for users to insert their own CSS. It can be accessed by the
menu on the right hand side of the page. Click on the "More" tab, then
"Shadowed" - "Tiddlers shadowed with default contents"
Upon opening "StyleSheet" you will notice that there is no text - to
this tiddler you can insert CSS which will change the appearance of TW
to your specifications. To alter the header -- or any other element of
TW for that matter you need to find out either its Class or ID (see
Basics on the W3 Schools CSS tutorial). The easy way to start out is
look in another of TW's StyleSheets: StyleSheetLayout. In this tiddler
you will see the following default CSS:
.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em;
left:0px; top:0px;}
StyleSheet overwrites CSS in StyleSheetLayout, do not change anything
in StyleSheetLayout. Instead cut-and-paste the chunk of CSS into
StyleSheet and then edit it.
The important part for changing the size of the header is not
".header{position:relative;}" , ".header a:hover
{background:transparent;}" so delete them from your cut-and-pasted
chunk in StyleSheet
The important bit is the padding (see Box Model on the W3 Schools CSS
tutorial). The first padding number is larger than the others, it is
the one that is setting the padding at the top. Reducing it to "1em"
something that you could try:
.headerShadow {position:relative; padding:1em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:1em 0 1em 1em; left:0px; top:0px;}
Once you click "done" to finish editing, you should see the changes
immediately take effect.
Links
http://www.w3schools.com/css/
ALex
ps. I wrote the above and posted it to TW.org -
http://tiddlywiki.org/wiki/How_to_Change_the_Header. Tweaks most
welcome.
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To post to this group, send email to tiddlyw...@googlegroups.com.
To unsubscribe from this group, send email to
tiddlywiki+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/tiddlywiki?hl=en.
