Posts : 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.]
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> 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 -->
"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." |
