Description
A better sidebar, hover over the arrow in the bottom right corner of the page to show it.
更好的侧边栏,光标悬停/点击页面的右下角箭头时会自动展开。
Code
[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
pointer-events: none;
}
div#side-bar::before {
content: '';
background-color: #eee;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
background-size:cover;
position: fixed;
right: 5%;
bottom: 5%;
height: 5vh;
width: 5vh;
display:block;
border-radius: 1rem 0 0;
transition: .2s ease;
box-shadow: #eee 5px 5px 13px;
border: .1rem solid #ccc;
}
div#side-bar {
height: 0%;
max-height: 50%;
border: unset;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
bottom: 5%;
right: 5%;
transition: .2s ease;
}
div#side-bar:hover {
height: max-content;
width: max-content;
scrollbar-width: none;
margin: 0;
padding: 1rem;
overflow: scroll;
position: fixed;
bottom: 5%;
right: 5%;
background-color: #f8f8f8cc;
border: 1px solid #ccc;
border-radius: 1rem 0;
box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
border-radius: 1rem 0;
background-color: #3339;
box-shadow: #555 5px 5px 13px;
}
[[/module]]In action
link to the implemented solution on a Wikidot site or put a working example here
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by G2Lighter
Custom Identity Groups/自定义身份组 - 09 Nov 2024 18:49
Rate this solution
If you think this solution is useful — rate it up!
随机到你了
I'm Be Creeping Day And Night!
This is the slightly altered code to make the sidebar be on the top left instead of bottom right:
[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
pointer-events: none;
}
div#side-bar::before {
content: '';
background-color: #eee;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
background-size:cover;
position: fixed;
left: 5%;
top: 5%;
height: 5vh;
width: 5vh;
display:block;
border-radius: 1rem 0 0;
transition: .2s ease;
box-shadow: #eee 5px 5px 13px;
border: .1rem solid #ccc;
}
div#side-bar {
height: 0%;
border: unset;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 5%;
left: 5%;
transition: .2s ease;
}
div#side-bar:hover {
height: max-content;
width: max-content;
scrollbar-width: none;
margin: 0;
padding: 1rem;
overflow: scroll;
position: fixed;
top: 5%;
left: 5%;
background-color: #f8f8f8cc;
border: 1px solid #ccc;
border-radius: 1rem 0;
box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
border-radius: 1rem 0;
background-color: #3339;
box-shadow: #555 5px 5px 13px;
}
[[/module]]You can see an example of this at http://s-a-p.wikidot.com/. It should also be noted that to implement said sidebar, you need to make a custom theme and put this into the CSS code, which was not stated with the original post.
5
"But as for me and my house, we shall serve the Lord."
I apologize but I have changed the sidebar on the site to be bottom left, as being top left caused issues with the wiki title. So the link I provided as an example of the upper code working is no longer valid.
5
"But as for me and my house, we shall serve the Lord."
this might help ↓
[[module CSS]]
div#side-bar span.printuser a:nth-child(1) {
pointer-events: none;
}
div#side-bar::before {
content: '';
background-color: #eee;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='55%25' font-size='15' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E⇱%3C/text%3E%3C/svg%3E");
background-size:cover;
position: fixed;
left: 1vh;
top: 3vh;
height: 4vh;
width: 4vh;
display:block;
border-radius: 1rem 0 0;
transition: .2s ease;
box-shadow: #eee 5px 5px 13px;
border: .1rem solid #ccc;
}
div#side-bar {
height: 0%;
border: unset;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
left: 1vh;
top: 3vh;
transition: .2s ease;
z-index: 11;
}
div#side-bar:hover {
height: max-content;
width: max-content;
scrollbar-width: none;
margin: 0;
padding: 1rem;
overflow: scroll;
position: fixed;
left: 1vh;
top: 3vh;
background-color: #f8f8f8cc;
border: 1px solid #ccc;
border-radius: 1rem 0;
box-shadow: #555 5px 5px 13px;
}
div#side-bar:hover::before {
border-radius: 1rem 0;
background-color: #3339;
box-shadow: #555 5px 5px 13px;
}
div#header {
padding-left: 6vh;
z-index: -1;
}
[[/module]]My thanks. Though what I've really been trying to do is add a "sidebar toggle". If you have an information on the subject, that would be greatly appreciated.
5
"But as for me and my house, we shall serve the Lord."
[[module listPages]] and [[module Watchers]] may break the sidebar because of their length
[[module CSS]]
.forwatchers {
display: grid;
grid-template-columns: 20% 0 20% 0 20% 0 20% 0 20% 0;
}
.forwatchers .printuser a {
font-size:0;
}
[[/module]]
[[div class="forwatchers"]]
[[module Watchers]]
[[/div]]