[HTML] Welcome Guest Message (MyBB/GoSeries Style)

Simple Welcome Guest Message MyBB/Go Series Style. This tutorial is similar to "Welcome message (IPB Style)" tutorial but different css.

Credits to Audentio





1º - Template Editing
We will use the same tutorial that on IPB style.
In index_body, find

Code:

[panda=html]
<div class="pun-crumbs">
 <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>


*If you can't find it, just put the code at the very top of index_body*

Code:

[panda=html]<!-- 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>&nbsp; Login
</a>
<a href="register" class="small_button">
<i class="icon-external-link"></i>&nbsp; Register
</a>
</div>

Welcome to Forums guest! Take the time to sign up if you’re interested, it’s simple and painless.
 </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: dave@davegandy.com
    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 -->

That's it. Edit it if you want to.


2º - Demo

---

If you have any questions related to this topic create a topic with the following title: Welcome Guest Message (MyBB/Go Series Style)

Good!

Thank you

thanks nanako its working i love u bro