Steven Heynderickx wrote on 16 Sep 2009 21:42
Again, maybe this is the wrong place to put the following but I see no possibility to put it on the concerning page.
I think the buttons of the scrollbar need some help
for one the shape should be round and not squeezed so maybe add a 'width="20"'
secondly maybe a cool thing to do is to join scrollbar CSS and Rounded Boxes CSS to a coulorfull button as viewable at http://testingzone.wikidot.com/button:green
So to the scrollbar css add the following
.box-container {
height: auto;
width: 32px;
float: left;
padding:0px;
}
.box, .box .image {
background: #5f5;
border: 0px solid #ccc;
padding: 0px;
-moz-border-radius: 16px 16px;
-webkit-border-radius: 16px;
width: 20px;
}
.hover span {
display: none;
}
.hover:hover span {
position: absolute;
display: inline;
margin: 15px -20px;
height: auto;
width: auto;
border: 0px solid #555;
padding: 1em;
font-size: 12px;
}
.hover:hover span span {
position: relative;
margin: auto;
height: auto;
width: auto;
padding: 0;
color: #555;
}
.hover:hover .box .image {background-color:#f55;}
To the code of the scrollbar replace every image for a button like this
[[image http://includes.wikidot.com/local--files/page:1/nav_first.png _
height="20" link="/%%full_page_name%%"]]
with this
[[div class="hover"]]
[[div class="box-container"]]
[[div class="box"]]
[[image http://includes.wikidot.com/local--files/page:1/nav_first.png height="20" width="20" link="/%%full_page_name%%"]]
[[/div]]
[[/div]]
...
[[/div]]
And use a div for the hover class
If you now choose a nice color for your button like #f00 than change in the CSS the background-color of the box-class to #f00, you can even add a color to the hover-function: change background-color of the .hover:hover .box .image-class
These are good ideas. I made the buttons squashed on purpose, that looked nicer (to me) than round buttons. If you change the width you will get unpleasant pixelization. It's easy to recreate round buttons but I'm going to stick with the oval shape.
The hover color is a nice touch. Difficulty: it means changing all the CSS themes. We already depend on some extensions to do the popups so it's not impossible, but I prefer to not create too much arbitrary new CSS structure since it creates incompatibility between themes and sites.
Portfolio