nav_first.pngFirst: thread:40
Edited: 14 Dec 2011 22:51 by: GoVegan
Comments: 42
nav_prev.pngPrevious: thread:54
Edited: 19 Oct 2009 14:17 by: pieterh
Comments: 7
Last: thread:44
Edited: 19 Oct 2009 14:10 by: pieterh
Comments: 10
Next: thread:42
Edited: 19 Oct 2009 14:17 by: pieterh
Comments: 17

Steven HeynderickxSteven 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

So to the scrollbar css add the following

.box-container {
    height: auto;
    width: 32px;
    float: left;

.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 _
height="20" link="/%%full_page_name%%"]]

with this

[[div class="hover"]]
[[div class="box-container"]]
[[div class="box"]]
[[image height="20" width="20" link="/%%full_page_name%%"]]

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

Start a new sub-thread

Comments: 1

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License