. Login Register
Fatal Forces Gaming Community & Streamers

No.1 for all forum needs Ask the experts

You are not connected. Please login or register

Login/Register Welcome Bar

View previous topic View next topic Go down Message [Page 1 of 1]

Post: #1on Wed Feb 12, 2014 4:59 pm


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.

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

<!-- BEGIN switch_user_logged_out -->
        <div class="welcome_message">
         <div class="message_icon">
         <div class="welcome_arrow">
         <i class="icon-pushpin"></i>
         <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 href="register" class="small_button">
        <i class="icon-external-link"></i>&nbsp; Register Account
        Your Welcome Message Here
        .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/
            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).
            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;
        .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;
        <!-- END switch_user_logged_out -->

"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing.? Non-profit, educational or personal use tips the balance in favor of fair use."

View user profile http://baf-gaming.forumotion.com

View previous topic View next topic Back to top Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

PunBB Share Links!

URL Direct