Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Welcome message (IPB STYLE)



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

1
Offline

  Shadow

avatar
Administrator
Administrator


Tutorial: Welcome message (IPB STYLE)

Fancy box which will asks people to login or register to the forums.


--> Tutorials, tips and tricks <--
Welcome message (IPB STYLE)



- Template editing
In [ic]index_body[/ic] find
*If you can't find just put code at the top of the index_body*
Code:
[panda=html]<div class="pun-crumbs">
 <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>

After that put
Code:
[panda=html]<!-- BEGIN switch_user_logged_out -->
<div class="guestMessage"><div class="guestHeader"><font><font>Welcome to PunBB Community</font></font></div><font>Register now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and more. This message will be removed after you have signed in.</font><font>This message will be removed after you have signed in. </font></font><br><a href="#" onclick="show_popup('sign_in_popup_popup');" class="guestButton" id="sign_in"><font>Sign In </font></a><a href="javascript:dangki()" class="guestButton"  id="register"><font>Create Account</font></a></div>
<script>$(function(){$(".guestButton").click(function(){$(".quang_cao1").hide();$("#ucp").css({'display':'block'});});$(".phutu1").click(function(){$(".quang_cao1").show();$(".dang_nhap#ucp").css({'display':'none'});});});</script>
<style>.guestMessage {
    background: url("http://i.imgur.com/plQdik8.png") repeat-x scroll 0px 0px rgb(255, 242, 219);
    border: 1px solid rgb(234, 199, 148);
    color: rgb(184, 95, 29);
    line-height: 180%;
    margin-bottom: 10px;
    padding: 10px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.55);
    border-radius: 4px 4px 4px 4px;
}
.guestMessage {
    color: rgb(184, 95, 29);
    line-height: 180%;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.55);
    font: 11px tahoma,helvetica,arial,sans-serif;
}

.guestHeader {
    background: -moz-linear-gradient(center top , rgb(240, 175, 81) 0%, rgb(245, 197, 114) 100%) repeat scroll 0% 0% transparent;
    box-shadow: 0px 1px 4px rgb(176, 114, 10) inset, 0px 1px 0px rgba(255, 255, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: rgb(154, 98, 0);
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    margin: -4px -4px 10px;
}

.guestMessage a.guestButton:hover {
    opacity: 0.8;
}
.guestMessage a.guestButton {
    background: -moz-linear-gradient(center top , rgb(240, 175, 81) 0%, rgb(245, 197, 114) 100%) repeat scroll 0% 0% transparent;
    box-shadow: 0px 1px 4px rgb(176, 114, 10) inset, 0px 1px 0px rgba(255, 255, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: rgb(154, 98, 0);
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.4);
    padding: 0px 14px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    outline: 0px none;
    margin: 10px 8px 0px 0px;
    font-weight: bold;
    text-decoration: none;
}</style>
<!-- END switch_user_logged_out -->

And thats it now you have just to rename the text field with your forum name or anything else you want.


- Preview
http://i.imgur.com/kbkf5Il.png




© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Welcome message (IPB STYLE)

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  Guest

avatar
Guest
Nice i like it fit with every skin almost.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

3
Offline

  Ethen

avatar
Punbb Rookie
Punbb Rookie
Nice, good work, thanks

Powered by PunBB
Currently 0 users have thanked Ethen for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
code has been tiny improved.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  Guest

avatar
Guest
Thanks for sharing wish their was a way to change the wording.

Powered by PunBB
Currently 0 users have thanked Guest for this post:

6
Offline

  Shadow

avatar
Administrator
Administrator
Optimized for chrome.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
when I click the "Sign in" and "Create acount" buttons it does nothing.. any help please?

Powered by PunBB
Currently 0 users have thanked decru for this post:

8
Offline

  Guest

avatar
Guest
Code:
<a href="/login"  class="guestButton" id="sign_in"><font>Sign In </font></a><a href="/register" class="guestButton"  id="register"><font>Create Account</font></a></div>

Powered by PunBB
Currently 0 users have thanked Guest for this post:

9
Offline

  decru

avatar
Punbb Rookie
Punbb Rookie
Rapid wrote:
Code:
<a href="/login"  class="guestButton" id="sign_in"><font>Sign In </font></a><a href="/register" class="guestButton"  id="register"><font>Create Account</font></a></div>

where to put this code mate?

Powered by PunBB
Currently 0 users have thanked decru for this post:

10
Offline

  Shadow

avatar
Administrator
Administrator
Just edit it from the line in the tutorial.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

11
Offline

  J0k3R^

avatar
Pemanently Banned
Pemanently Banned
cool, thanks

Powered by PunBB
Currently 0 users have thanked J0k3R^ for this post:

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


Topic URL's

URL
BBcode
HTML

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