Announcement

Collapse
No announcement yet.

Mark Channels Read Button

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Mark Channels Read Button

    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 Click image for larger version

Name:	Clipboard01.jpg
Views:	687
Size:	2.0 KB
ID:	1236 and After Click image for larger version

Name:	Clipboard02.jpg
Views:	459
Size:	5.1 KB
ID:	1237

    Add to css_additional.css
    Code:
    /* 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
    Code:
    <div class="list-footer"><a href="#" class="markchannelsread">{vb:rawphrase mark_channels_read}</a></div>
    and replace with

    Code:
    <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.
    Click image for larger version

Name:	MCR.png
Views:	439
Size:	3.7 KB
ID:	1238

    #2
    Here's your favorite part without template modifications

    Code:
    .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%;
    }
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      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 Click image for larger version

Name:	Clipboard01.jpg
Views:	203
Size:	3.3 KB
ID:	1298and with hover Click image for larger version

Name:	Clipboard02.jpg
Views:	199
Size:	3.8 KB
ID:	1299


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

      Comment


        #4
        And...
        with a little additional code in the hover function, one can produce a button on button effect!
        Click image for larger version

Name:	Clipboard01.jpg
Views:	203
Size:	3.3 KB
ID:	1301
        Click image for larger version

Name:	Clipboard02.jpg
Views:	158
Size:	3.5 KB
ID:	1302


        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. Click image for larger version

Name:	Clipboard03.jpg
Views:	189
Size:	2.5 KB
ID:	1303
        Click image for larger version

Name:	Clipboard04.jpg
Views:	167
Size:	3.3 KB
ID:	1304


        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


        Code:
        
        /* 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 */
        Last edited by Felix2; 09-23-2016, 04:20 PM.

        Comment


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

          Comment


            #6
            Did you mean the custom style is never applied anymore? Could you post a screenshot?
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              I have tested this out in several browsers, IE, OB1, ViValdi, Comodo, Firefox regular and up to Firefox Nightly build 50, and it works.
              Click image for larger version

Name:	Clipboard02.jpg
Views:	177
Size:	73.0 KB
ID:	1395

              Comment


                #8
                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. Click image for larger version

Name:	Forum   Windows 7 8 Custom Themes   MegaThemer.png
Views:	459
Size:	232.2 KB
ID:	1399

                Comment


                  #9
                  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.
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #10
                    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.

                    Comment


                    • Megabink
                      Megabink commented
                      Editing a comment
                      I guess the code works fine but FF is the issue.

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

                    Comment


                      #12
                      In which theme/style you applied the css for the Mark Channels Read button?
                      Helpful? Donate. Thanks!
                      Buy me a coffeePayPal QR Code
                      Fast VPS Host for vBulletin:
                      A2 Hosting & IONOS

                      Comment


                        #13
                        Originally posted by glennrocksvb View Post
                        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.

                        Comment


                        • glennrocksvb
                          glennrocksvb commented
                          Editing a comment
                          Nice theme, btw.

                        • Megabink
                          Megabink commented
                          Editing a comment
                          Thanks i modified it a bit to my needs.

                        #14
                        Looks good in Firefox 47.0.1. Let me update Firefox and see.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #15
                          Just upgraded to FF 49.0.1 and the button still looks good to me.
                          Helpful? Donate. Thanks!
                          Buy me a coffeePayPal QR Code
                          Fast VPS Host for vBulletin:
                          A2 Hosting & IONOS

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"