Custom Forum Icons

[ven0m]

Heisenberg submitted a new resource:

You must be registered for see links

- Custom Forum Icons

vB Version: 5.x.x

One of my peeves with vB5 is how they removed so many of the bells & whistles, such as the button for Mark Channels Read.
This will restore it.
No doubt Glen will find a better solution That's okay, just so long as its back.

Before

You must be registered for see images attach

After

You must be registered for see images attach

Add to css_additional.css

/* Start Mark Channels Read Button */
.MCR:hover {
    box-shadow: 0 12px 16px 0 rgba(198,198,25,0.24), 0 4px 25px...

You must be registered for see links

 

[ven0m]

Here's your favorite part without template modifications

.markchannelsread {
    background: transparent url('images/MCR.png') no-repeat;
    display: inline-block;
    height: 32px;
    width: 108px;
    text-indent: -99999px;
}
.markchannelsread:hover {
    box-shadow: 0 12px 16px 0 rgba(198,198,25,0.24), 0 4px 25px 0 rgba(198,198,25,0.19);
    border-radius: 40%;
}

 

[ven0m]

Okay, it took me a while to work this out, but work it out I did and I think you are going to love it
If you used the code from above, replace it with this newer code.
(No need to edit the template or use the image.)

This is an all CSS version. No use of images.
It uses the theme default fonts and colors on the text and partially on the button itself.
This make the code more universal for all forums.
No hover

You must be registered for see images attach

and with hover

You must be registered for see images attach

/* Start Mark Channels Read Button - Imageless */

.markchannelsread {

    text-align: center;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 0px rgba(255,255,255,.5);

     margin: 10px auto;
     position: relative;
     padding-top: 5px;
     padding-right: 20px;
     padding-bottom: 5px;
     padding-left: 20px;

    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    border: 1px solid #000000;

    -webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);    
    box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);

    position: relative;

}

.markchannelsread:hover {
    box-shadow: 0 0 0 0 rgba(198,198,25,0.24), 0 0 32px 0 rgba(198,198,25,0.5);
}

/* End Mark Channels Read Button - Imageless */

 

[ven0m]

And...
with a little additional code in the hover function, one can produce a button on button effect!

You must be registered for see images attach

You must be registered for see images attach

Applying the same code below and changing colour values and CLASS ID's, I am able to spice up several flat buttons in my forum, such as the SEO.

You must be registered for see images attach

You must be registered for see images attach

Another nice thing about this is that I have eliminated several buttons graphics and replaced with pure CSS.
This saves on page loading times and bandwidth!

This is the old equivalent of the OnMouseOver event function to change images in menus.
See, this old dog can learn a few new tricks

/* Start Mark Channels Read Button - Imageless */

.markchannelsread {

    text-align: center;
    position: relative;
    z-index: 1;
    text-shadow: 1px 1px 0px rgba(255,255,255,.5);

     margin: 10px auto;
     position: relative;
     padding-top: 5px;
     padding-right: 20px;
     padding-bottom: 5px;
     padding-left: 20px;

    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
    border: 1px solid #000000;

    -webkit-box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);    
    box-shadow:  0px 1px 3px 0px rgba(0, 0, 0, .2);