Login/Register Welcome Bar

We are going to show you how to add a Login/Register Welcome Bar to your forum(s)

ACP > Display Tab > Templates > General > Index_Body - Once here at the very top hit "Enter" 1-2 (x's) then copy and paste the code below at the top of your Index_Body code. Then hit Submit and then "Publish" by clicking the "Green +" icon. Then your Finished.

Demo:
[You must be registered and logged in to see this image.]

Code:

<!-- BEGIN switch_user_logged_out -->
        <div class="welcome_message">
         <div class="message_icon">
         <div class="welcome_arrow">
         </div>
         <i class="icon-pushpin"></i>
         </div>
         <div class="message_container">
        <div class="welcome_buttons">
        <a href="login" class="small_button" name="modal" rel="#loginModal">
        <i class="icon-key"></i>  User Sign In
        </a>
        <a href="register" class="small_button">
        <i class="icon-external-link"></i>&nbsp; Register Account
        </a>
        </div>
        Your Welcome Message Here
         </div>
        </div>
        <style>
        .welcome_message {
        box-shadow: 0 0 10px #DDD;
        border-radius: 3px;
       }
        .message_icon {
        background: #fffbd6;
        border-radius: 3px 0 0 3px;
        border: 1px solid #eadda8;
        height: 40px;
        width: 40px;
        line-height: 40px;
        color: #c6b500;
        float: left;
        text-align: center;
        font-size: 18px;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
        }
        .welcome_arrow {
        float: right;
        width: 9px;
        height: 17px;
        background: url(http://i58.servimg.com/u/f58/18/22/61/63/welcom10.jpg) no-repeat center center;
        margin: 12px -9px 0 0;
        }
        .icon-pushpin:before {
        content: "\f08d";
        }
        /*  Font Awesome
            the iconic font designed for use with Twitter Bootstrap
            -------------------------------------------------------
            The full suite of pictographic icons, examples, and documentation
            can be found at: http://fortawesome.github.com/Font-Awesome/
            License
            -------------------------------------------------------
            The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
            http://creativecommons.org/licenses/by/3.0/ A mention of
            'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
            source code is considered acceptable attribution (most common on the web).
            If human readable source code is not available to the end user, a mention in
            an 'About' or 'Credits' screen is considered acceptable (most common in desktop
            or mobile software).
            Contact
            -------------------------------------------------------
            Email: <a href="mailto:dave@davegandy.com">dave@davegandy.com</a>
            Twitter: http://twitter.com/fortaweso_me
            Work: http://lemonwi.se co-founder
            */
        @font-face {
          font-family: "FontAwesome";
          src: url('http://www.audentio.com/demo/mybb16/images/audentio/goseries/fonts/fontawesome/files/fontawesome-webfont.eot');
          src: url('http://www.audentio.com/demo/mybb16/images/audentio/goseries/fonts/fontawesome/files/fontawesome-webfont.eot?#iefix') format('eot'), url('files/fontawesome-webfont.woff') format('woff'), url('http://www.audentio.com/demo/mybb16/images/audentio/goseries/fonts/fontawesome/files/fontawesome-webfont.ttf') format('truetype'), url('http://www.audentio.com/demo/mybb16/images/audentio/goseries/fonts/fontawesome/files/fontawesome-webfont.svg#FontAwesome') format('svg');
          font-weight: normal;
          font-style: normal;
        }
        /*  Font Awesome styles
            ------------------------------------------------------- */
        [class^="icon-"]:before, [class*=" icon-"]:before {
          font-family: FontAwesome;
          font-weight: normal;
          font-style: normal;
          display: inline-block;
          text-decoration: inherit;
        }
        a [class^="icon-"], a [class*=" icon-"] {
          display: inline-block;
          text-decoration: inherit;
        }
        .message_container {
        background: #fff7e8;
        border-radius: 0 3px 3px 0;
        border: 1px solid #eadda8;
        height: 40px;
        line-height: 40px;
        color: #726800;
        margin-left: 40px;
        padding-left: 20px;
        font-size: 12px;
        }
        .welcome_buttons {
        float: right;
        }
        .small_button:link, .small_button:visited {
        display: inline-block;
        background: rgb(255,255,255);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(246,246,246,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
        border: 1px solid #dedede;
        border-radius: 3px;
        color: #666!important;
        box-shadow: 0 1px 0 #eeeeee, inset 0 -1px 0 #FFF;
        text-decoration: none;
        padding: 0 10px 0 10px;
        height: 26px;
        line-height: 26px;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        margin:5px;
        }
        .icon-key:before {
        content: "\f084";
        }
        .icon-external-link:before {
        content: "\f08e";
        }
        .small_button:hover {
         background: rgb(255,255,255); /* Old browsers */
         background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
         background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
         background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
         background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
         background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
         border-color: #b7b7b7;
         color: #333;
        }
        
       .small_button:active {
         box-shadow: 1px 1px 0 #FFF, inset 0 0 10px rgba(0, 0, 0, 0.1);
         border-color: #dedede;
       color: #666;
        }
        </style>
        <!-- END switch_user_logged_out -->

Posted in the tutorial section as Tru posted it in the accepted tutorial Here's another release!!!