Opera Speed Dial Theme, FF3.6
LAMj —Fri, 08/13/2010 - 01:25

I like the look of Opera's Speed Dial so I wanted to emulate it Firefox. It's all done in CSS3 with no additional image files. It took me awhile to trick-out that rounded-border to the img tag. Try it out and comment if you like it.
*If you have Stylish installed and want to use that instead of importing the zip file, you and install the theme here: http://userstyles.org/styles/35433?r=1281726605
*Note*
-Make sure you check the "Fixed" option in the FD preference if you like it how Opera fixed their speed dial too.
-Don't make any changes in the Fast Dial Appearance setting because it tend to reset all the "unintended" css3 value to default. Edit the CSS file instead.
-I didn't change the box-shadow value when hovering like Opera does because FF3.6 doesn't handle CSS3 transition effect quite well and will increase your CPU cycle madly.
Enjoy.
Search logos
Search site
Navigation
User login
Online users
Active - 15 mins:
Recent comments
-
by: hammadamir9052 sec ago
-
by: hammadamir902 min 19 sec ago
-
by: wakawaka3 min 54 sec ago
-
by: hammadamir904 min 28 sec ago
-
by: hammadamir9018 min 52 sec ago
-
by: hammadamir9022 min 45 sec ago
-
by: hammadamir9024 min 55 sec ago
-
by: peter65425 min 58 sec ago
Comments
Re: Opera Speed Dial Theme, FF3.6
Submitted by chiaroscuro on Fri, 08/13/2010 - 13:19Would you be so kind as to post in this thread the css information here, just for interest.
This could then be made into a Stylish Style perhaps.
There are Styles listed on this site regarding the rounding of the cell corners if that is what you are referring to.
Please see in the Styles section
http://userlogos.org/extensions/fastdial/styles
Re: Opera Speed Dial Theme, FF3.6
Submitted by LAMj on Fri, 08/13/2010 - 15:55You can use the install Stylish script here (http://userstyles.org/styles/35433?r=1281726605).
As for the rounded corner, I used the outline and -moz-outline-radius property to have it render ontop of the
element. But if you use the border and -moz-border-radius on an element, it'll be render around it.
Here's the visuals:
Border around
element:
.image {
border:5px solid lime!important;
-moz-border-radius:9px !important;
}
Versus outline on top of
element,
.image {
outline:5px solid lime!important;
-moz-outline-radius:9px !important;
outline-offset:-9px !important;
}
To make the effect, just use the same outline color as the parent background, in this case I use white. And using the outline-offset to cover the
edge properly:
.image {
outline:3px solid white !important;
-moz-outline-radius:7px !important;
outline-offset:-1px !important;
}
Re: Opera Speed Dial Theme, FF3.6
Submitted by chiaroscuro on Fri, 08/13/2010 - 17:21Wow !
The Style..
Exceptionally well put together.
Seems rock s0lid.
Good work !
Thanks too for your detailed description and pictures.
I can see now why it took you some time to work out.
This all works very well..
Please feel free to upload your Style here as well on this site
Please post here:
http://userlogos.org/forum/7284
Many thanks