top



Is this possible to create a portal widget for phpBB2 forum with rollover buttons ?
if you look at my Portal page on my forum www.ufa-league.net
I would like to replace those belts on the right side with same looking list of buttons (replace belts with the buttons of course) but is this possible to make them rollover ?

rollover buttons like what? its possible with CSS but for what? Happy

you want some example ? black rectangles ,and if you point on it with the arrow becomes red, that if you click on it, this not only takes you to a proper league but also looks nice Smile is this possible to create a simple widget like this or this is more complicated ?

Its possible yah Happy
but example? ;D

Code:
#i_icon_mini_portal {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_01.png);
width: 109px;
height: 38px;
}
#i_icon_mini_portal:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_01.png);
width: 109px;
height: 38px;
}

#i_icon_mini_index {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_02.png);
width: 55px;
height: 38px;
}
#i_icon_mini_index:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_02.png);
width: 55px;
height: 38px;
}

#i_icon_mini_calendar {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_03.png);
width: 85px;
height: 38px;
}
#i_icon_mini_calendar:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_03.png);
width: 85px;
height: 38px;
}

#i_icon_mini_faq {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_04.png);
width: 47px;
height: 38px;
}
#i_icon_mini_faq:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_04.png);
width: 47px;
height: 38px;
}

#i_icon_mini_search {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_05.png);
width: 56px;
height: 38px;
}
#i_icon_mini_search:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_05.png);
width: 56px;
height: 38px;
}

#i_icon_mini_members {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_06.png);
width: 77px;
height: 38px;
}
#i_icon_mini_members:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_06.png);
width: 77px;
height: 38px;
}

#i_icon_mini_groups {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_07.png);
width: 57px;
height: 38px;
}
#i_icon_mini_groups:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_07.png);
width: 57px;
height: 38px;
}

#i_icon_mini_profile {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_08.png);
width: 74px;
height: 38px;
}
#i_icon_mini_profile:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_08.png);
width: 74px;
height:38 px;
}

#i_icon_mini_message {
background-image: url(http://test89.net78.net/UnderBG/menu/11underbg-menu_09.png);
width: 44px;
height: 38px;
}
#i_icon_mini_message:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/21underbg-menu_09.png);
width: 44px;
height: 38px;
}

#i_icon_mini_new_message {
background-image: url(http://test89.net78.net/UnderBG/menu/12underbg-menu_09.png);
width: 44px;
height: 38px;
}
#i_icon_mini_new_message:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/22underbg-menu_09.png);
width: 44px;
height: 38px;
}

#i_icon_mini_logout {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu_10.png);
width: 104px;
height: 38px;
}
#i_icon_mini_logout:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu_10.png);
width: 104px;
height: 38px;
}

#i_icon_mini_login {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu-no-user_05.png);
width: 97px;
height: 38px;
}
#i_icon_mini_login:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu-no-user_05.png);
width: 97px;
height: 38px;
}

#i_icon_mini_register {
background-image: url(http://test89.net78.net/UnderBG/menu/underbg-menu-no-user_04.png);
width: 79px;
height: 38px;
}
#i_icon_mini_register:hover {
background-image: url(http://test89.net78.net/UnderBG/menu/2underbg-menu-no-user_04.png);
width: 79px;
height: 38px;
}
grab that code and change url-s
and more one: need to remove all navigate buttons in [ Display > Pictures and Colors > Pics management > General / Explore ]
Enjoy :]

Working and looking awesome, now i can have good looking nav bar Smile but my little problem is still not solved i just woke up, so later on i will show an example what exactly im talking of (only i can do is create a PS image because i didnt see that on other forum or whatever) basicly i need something like "vertical" navbar as a widget, but after i pasted this code in a widget nothing is going on only lot of codes, (in CSS stylesheet changed my navbar beautifully) which is very cool.
I feel like Gangstar putting pressure on me Stress but i can't find an example ...

Sorry guys for being out for so long, but i was pretty busy. Coming back to the topic, so how to create a widget with lets say 6 buttons like this:

Spoiler:
rolover with this one:
Spoiler:
if you look at my page:
www.ufa-league.net/portal
i would like to place it on the right side instead of those belts, belts are href links and i would like to make them hover, if you point on them you know that this is active link. If it's possible this gonna be to hard for me to understand i think.

Create a div, add that button as a background, add the width & height of it then use the :hover for the same div and change the background to the rollover one Smile

Gangstar15 wrote:Create a div, add that button as a background, add the width & height of it then use the :hover for the same div and change the background to the rollover one Smile
Could i see an example of that code please ?