Re: [tw] TiddlyThemes Blueberry2

[Alex Hough]

Hello Zapata,

You need to edit the StyleSheet shadow tiddler to overwrite the existing formatting instructions.

Using FireBug [1] , I can see that the sidebar is currently positioned by the following CCS [2] code

#sidebar {

font-size:0.9em;

position:absolute;

right:3px;

}

'right:3px' after 'position:absolute' means 'place the sidebar 3 pixels from the right hand side of the screen'

SO
you could change the 'right' to 'left' ;

#sidebar {

font-size:0.9em;

position:absolute;

left:3px;

}

This then uncovers a problem: the sidebar is on the left, but it overlaps the rest of the content. The solution is to shift the 'display area'. Looking in StylesheetLayout or using Firebug we can see the following;

#displayArea {

background:none repeat scroll 0 0 #FFFFFF;

border-left:2px solid #8895BB;

margin:1em 15.7em 0 1em;
}

The bit we need to change here is the margin. The four values give the margin in 'em' - another way of setting size. (1em is the size of one character, and, unlike 1px, changes when you use the zoom feature in your browser.)

The order of the margin values are top, right, bottom, left ; i remember it by thinking clockwise starting at 12o'clock.

So to shift the display area over you have to experiment with the left value, and since you have some space where the sidebar once lived, you might also want to tweek the right value;

Try this;

#displayArea {

background:none repeat scroll 0 0 #FFFFFF;

border-left:2px solid #8895BB;

margin:1em 1em 0 16em;
}

Normally you would only include the part of the CSS you need to overwrite. But here I have cut and pasted from Firebug; should you investigate it you will be able to clearly observe my process.

This would do the trick:

#displayArea {
margin:1em 1em 0 16em;
}

Hope this helps

ALex

[1] http://getfirebug.com/
[2] http://www.w3schools.com/css/

On 5 March 2010 10:56, Zapata <zap...@freakmail.de> wrote:

Hi together,

I just found the TiddlyWiki 2.5.3 and the Themes a couple of days ago
and want to use it with the theme "blueberry2" (http://
tiddlythemes.com/empties/Blueberry2.html). So long, so good and it
works fine. Thanks.

My question now: how can I change the style to get the sidebar on the
left and not on the right of the page?

Sorry, I am not so deep in this to get it by my own. Could anyone help
me please?

Thanks and best regards,
Zapata

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To post to this group, send email to tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

--
http://www.multiurl.com/g/64

[Mike]

alex,
just wanted to comment that this is a very wonderful tutorial :D

Do you use the "right click" inspect element in Firebug, or do you
find another way is better?

thx,
Mike (from my phone)

> > tiddlywiki+...@googlegroups.com<tiddlywiki%2Bunsubscribe@googlegrou ps.com>

[Alex Hough]

I click on the blue box with the pointer , just to the right of the Firebug icon (see attached)

Then you just click on the element, and it show CSS on the right

ALex

To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

--
http://www.multiurl.com/g/64