Mark Channels Read Button

[Felix2]

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

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 0 rgba(198,198,25,0.19);
    width: 108px;
    border-radius: 40%;
}
/* End Mark Channels Read Button */

I am aware a great deal more can be down with the CSS, such as glass effects without image and SPAN over text.
But I wanted to keep this simple for now.

(Here's your favorite part Glen

Edit templates, edit display_Forums
Line 18

<div class="list-footer"><a href="#" class="markchannelsread">{vb:rawphrase mark_channels_read}</a></div>

and replace with

<div class="list-footer"><a href="#" class="markchannelsread"><img class="MCR"src="/images/MCR.png" alt="{vb:rawphrase mark_channels_read}" title="{vb:rawphrase mark_channels_read}" /></a></div>

Save this image to your root/images folder.

[glennrocksvb]

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%;
}

[Felix2]

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 and with hover

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

[Felix2]

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




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.



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

    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);
background: rgb(195,194,143); /* Old browsers */
background: -moz-linear-gradient(top, rgba(195,194,143,1) 0%, rgba(77,76,41,1) 29%, rgba(64,63,34,1) 42%, rgba(74,74,40,1) 53%, rgba(146,145,78,1) 76%, rgba(122,121,66,1) 87%, rgba(91,90,49,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(195,194,143,1) 0%,rgba(77,76,41,1) 29%,rgba(64,63,34,1) 42%,rgba(74,74,40,1) 53%,rgba(146,145,78,1) 76%,rgba(122,121,66,1) 87%,rgba(91,90,49,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(195,194,143,1) 0%,rgba(77,76,41,1) 29%,rgba(64,63,34,1) 42%,rgba(74,74,40,1) 53%,rgba(146,145,78,1) 76%,rgba(122,121,66,1) 87%,rgba(91,90,49,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c28f', endColorstr='#5b5a31',GradientType=0 ); /* IE6-9 */
}

/* End Mark Channels Read Button - Imageless */

[Megabink]

For some reason after updating Firefox this code doesn't work anymore...it worked before.

[glennrocksvb]

Did you mean the custom style is never applied anymore? Could you post a screenshot?

[Felix2]

I have tested this out in several browsers, IE, OB1, ViValdi, Comodo, Firefox regular and up to Firefox Nightly build 50, and it works.

[Megabink]

I am using FF 49.0.1 updated yesterday and before the code did worked perfectly and today i noticed that the button was gone.
I removed the code and added it back but no good.
Here is a snapshot.

[glennrocksvb]

A link to your site (if public) would be more helpful. There's probably other CSS that's overriding the style or there might be syntax error in the CSS. That can only be determined when inspecting the actual page.

[Felix2]

Unless there is a bug specific to that version, I know of no reason it would break.
Version 50, as posted above, works fine. And I have version 48 which works fine.
Perhaps you have an addon that is affecting it?
I have also tested on a Droid running Firefox, and it works.
I will look into this further, but I don't suspect it is an issue with the code.

[Megabink]

It worked before but after upgrading FF it stopped...anyway here is my site link http://www.megathemer.net/forum

[glennrocksvb]

In which theme/style you applied the css for the Mark Channels Read button?

[Megabink]

In which theme/style you applied the css for the Mark Channels Read button?

Eridanus...this is the style i used for testing the code a few days ago,the code is still applied but no button.

[glennrocksvb]

Looks good in Firefox 47.0.1. Let me update Firefox and see.

[glennrocksvb]

Just upgraded to FF 49.0.1 and the button still looks good to me.