includes.wikidot.com
nav_first.pngFirst: thread:40
event-calendar.wikidot.com
Edited: 14 Dec 2011 22:51 by: James Kanjo
Comments: 42
Tags:
nav_prev.pngPrevious: thread:54
nocomment.wikidot.com
Edited: 19 Oct 2009 14:17 by: pieterh
Comments: 7
Tags:
Last: thread:44
chatroom.wikidot.com
Edited: 19 Oct 2009 14:10 by: pieterh
Comments: 10
Tags:
nav_last.png
Next: thread:42
doc.wikidot.com
Edited: 19 Oct 2009 14:17 by: pieterh
Comments: 17
Tags:
nav_next.png

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


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