CSS / Format question

[Aidan Grey]

Hey all,

I'm tweaking some of the CSS directly, so that I can work around the bits of vanilla I don't like (not a lot, TBH). I'm having an issue with this one bit though:

.tc-sidebar-header {

padding: 30px;

border-radius: 10px 0 0 10px;

border: 4px solid #228225;

width: 700px;

}

Everything works just fine, EXCEPT the background width. I'm using a dark background, and want the sidebar to have a light background. I want that sidebar to remain all the way to the right, so that the background is never visible behind the sidebar contents, and it looks like a more or less permanent, collapsible panel (see HowIWantIt)

If I leave the width out, when I look at shadow tiddlers via More, the background isn't wide enough to appear behind all of the tiddler titles.

If I keep it in, there's issues. It's either too wide (900px will scroll all the way right and still have the beige background, but look at all that extra empty space after those long shadow tid titles), or at some point, it's the right width for the text, but doesn't look "docked" - the page background peeks out at the end of the scroll to the right (see WhatItDoes) .

Float:right doesn't work - breaks layout, as expected, but tested anyway

Does anyone know what I should do to make this look how I want?

Thanks,
Aidan

[Mat]

Before being able to answer, you should inform if you are using the setting "Fluid story, fixed sidebar" or "Fixed story, fluid sidebar"?

<:-)

[Aidan Grey]

Ah! Good point.

Fluid story, fixed sidebar ( at 400px)

On Mon, Jul 22, 2019, 11:22 AM Mat, <matia...@gmail.com> wrote:

Before being able to answer, you should inform if you are using the setting "Fluid story, fixed sidebar" or "Fixed story, fluid sidebar"?

<:-)

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f5770247-2b5d-47de-a219-ff42c1e6b4e3%40googlegroups.com.

[Mat]

Could maybe the whole tc-sidebar-scrollable be colored? This includes the area above the title also?

If you insist on a background colored area above it, then you can still color the whole tc-sidebar-scrollable but add at border at top with the background color, say "border:33px solid black" and then raise up the tc-sidebar-header with "margin-top:-33px".

<:-)

[Aidan Grey]

The problem is that it does the attached image. Bleh.

Also, some of my backgrounds I'm working on aren't colors but images, so...

I know there's a plugin out there called shader or something like that. Maybe I just need to investigate its code and/or use it....

[Birthe C]

Maybe some ideas from this: http://zaphod2016.tiddlyspot.com/#%24%3A%2Fplugins%2FZaphod%2FSideBarShade

I is rather fun to play with opacity from the sidebar.

Birthe

[Aidan Grey]

That's the one!

I think I'll just install it, cause it turns out not as simple to do as i was thinking, and Zaphod went and did it already...

--

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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6f89fe1f-7535-4392-a06a-6d28e039985e%40googlegroups.com.

[Mohammad]

Added to TW-Scripts.

[Aidan Grey]

I had a breakthrough. It's not completely set yet (more below), but this works:

.tc-sidebar-scrollable {
	width: 350px;
	margin: 50px 0px 0px 0px;
	border-radius: 10px 0px;
	background-color: #C8EBC3;
}

The scrollbar on the more tab never reveals the background, and the edges look correct.

Only 1 thing - when the sidebar is collapsed, you can still see the background. If I can figure out what class applies when the sidebar is closed, then I could just remove the background color until it's unhidden again.

[Birthe C]

http://zaphod2016.tiddlyspot.com/#%24%3A%2Fcore%2Fui%2FTopBar%2Fmenu

Used to change the styles.

Birthe

[Aidan Grey]

Thank you - that was the key I was missing for some unknown reason. I was able to implement my own version, without all the extra. I'm giving away Zaphod's secrets here.

The key for what I wanted was the width and margin (<sidebar width> minus <margin you define>).  The margin is the gap between the edge of the story river and the visible background on the sidebar.

tiddler sbShow with:

<style>

.tc-sidebar-scrollable {

width:350px;

margin:50px 0 0 0;

border-radius: 10px 0 0 0;

background-color: green;

}

</style>

tiddler sbHide with:

<style>

.tc-sidebar-scrollable {

background-color: transparent;

}

</style>

and then add the transclude lines to $:/core/ui/TopBar/menu between the button open and close tags. 

<$reveal state="$:/state/sidebar" type="nomatch" text="no">

<$button set="$:/state/sidebar" setTo="no" tooltip={{$:/language/Buttons/HideSideBar/Hint}} aria-label={{$:/language/Buttons/HideSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-right}}

<$transclude tiddler="sbShow"/>

</$button>

</$reveal>

<$reveal state="$:/state/sidebar" type="match" text="no">

<$button set="$:/state/sidebar" setTo="yes" tooltip={{$:/language/Buttons/ShowSideBar/Hint}} aria-label={{$:/language/Buttons/ShowSideBar/Caption}} class="tc-btn-invisible">{{$:/core/images/chevron-left}}

<$transclude tiddler="sbHide"/>

</$button>

</$reveal>

[K500 L501]

thanks, Aidan

--

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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a5d6a302-fc03-4214-a401-614b28f56e44%40googlegroups.com.