Custom Forum Icons

  • Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Radio

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    Heisenberg submitted a new resource:

    - 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 :rolleyes: 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

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

     
    Last edited:

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    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%;
    }
     

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    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


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

    ven0m

    Administrator
    Staff member
    Administrator
    Moderator
    Platinum
    xenForo 2.x.x
    xenForo 1.x.x
    Contributor
    vBulletin All Access Pass
    The Chest
    Verified
    Ultra Platinum VIP
    Platinum VIP
    Gold VIP
    Silver VIP
    Premium
    Member
    Jul 17, 2005
    20,466
    7,708
    321
    localhost
    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

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