sidebar background opacity

[HC Haase]

Is there a way to give the sidebar a slight opaque background colour?

when I put a background image (just to spice things up now and then) the sidebar becomes hard to read and the DarkPhoto theme is not looking good in my opinion.

in the Muuri plugin there is a opaque sidebar but there is too many things going when I just want the sidebar.

[BurningTreeC]

Hi @HC Haase

you can just put this in a tiddler tagged $:/tags/Stylesheet :

.tc-sidebar-scrollable {

    background-color: rgba(244, 244, 244, 0.6);

}

where the last value is the opacity - 1 is fully opaque, 0 fully transparent

 

[BurningTreeC]

below that, add this so that the background doesn't show when the sidebar's hidden

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

.tc-sidebar-scrollable {

    display: none;

}

</$reveal>

[HC Haase]

thank you
 it worked... but

now it also make the side panel background of the jd mobile layout (which is terrific on phone screens) transparent.. and that makes it impossible to read anything. So I did some guess work (since I don't really write code) and added a @media to fix it.


So this is code

@media (min-width: 960px) {

.tc-sidebar-scrollable {
 background-color: rgba(244, 244, 244, 0.4);

}

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

.tc-sidebar-scrollable {
 display: none;
}

</$reveal>
}

Any recommendation on how to integrate this tiddler properly in to the wiki so it is not "lost" when I forget about it?

[BurningTreeC]

thank you
 it worked... but

now it also make the side panel background of the jd mobile layout (which is terrific on phone screens) transparent.. and that makes it impossible to read anything. So I did some guess work (since I don't really write code) and added a @media to fix it.

that's how you do it! 

So this is code

@media (min-width: 960px) {

.tc-sidebar-scrollable {
 background-color: rgba(244, 244, 244, 0.4);
}

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

.tc-sidebar-scrollable {
 display: none;
}

</$reveal>
}

Any recommendation on how to integrate this tiddler properly in to the wiki so it is not "lost" when I forget about it?

I'm used to make a $:/styles tiddler for such utility styles - or $:/_styles so it shows up on top of the system tiddlers list

[HC Haase]

This is strange..

saved/reload
It worked,

but after I modify something in the wiki and
save/reload the sidebar "color" dont hide.