Guest HTML Page

View previous topic View next topic Go down

Mike
Mike
Administrator
Forum Posts : 446
Member Since : 2011-10-28
http://www.codinghelp.org

PostMike 14/2/2012, 3:33 pm

This is not a Theme... It is a FREE HTML Page.

Page Name : Log-In / Register
Forum Version : PHPBB2 or PunBB
Main Colors : Black and Gray
Template Usage : Yes... 1 template
Javascript Usage : Yes (already configured though)
Difficulty to Install : 2/5
Time taken to create : 2 hours
Custom Images : You'll need to make 6 images for a slider.
This is a Percent width page (The page will span 90% of your overall forum width. For example... If your forum is 700px wide, the page will be 630px.



Page Description : This page is designed to automatically guide guests to it if they are not logged into the forum. It will only show when a guest tries to view a thread. It will not interfere with logged in users.
Page Author : drogba921




Guest HTML Page Livepr10
Click the topic link....





Installation Instructions:


Step One:
Add this code to your HTML Page:

Code:
<html>
<head>
<title>Log-In / Register</title>
<script src="http://drogbasthemes2.forumotion.com/10055.js"></script>
<script src="http://drogbasthemes2.forumotion.com/12429.js"></script>
<script type="text/javascript">/* ==========================================================
 * MobilySlider
 * date: 20.1.2010
 * author: Marcin Dziewulski
 * last update: 02.02.2011
 * web: http://www.mobily.pl or http://playground.mobily.pl
 * email: hello@mobily.pl
 * Free to use under the MIT license.
 * ========================================================== */
(function($){$.fn.mobilyslider=function(options){var defaults={content:".sliderContent",children:"div",transition:"horizontal",animationSpeed:300,autoplay:false,autoplaySpeed:3000,pauseOnHover:false,bullets:true,arrows:true,arrowsHide:true,prev:"prev",next:"next",animationStart:function(){},animationComplete:function(){}};var sets=$.extend({},defaults,options);return this.each(function(){var $t=$(this),item=$t.children(sets.content).children(sets.children),l=item.length-1,w=item.width(),h=item.height(),step=0,play,bullets,arrows,z,active,bullet;var slider={init:function(){slider.data();if(sets.bullets){slider.bullets.create()}if(sets.arrows){slider.arrows.create()}if(sets.autoplay){slider.autoplay()}slider.triggers()},data:function(){item.each(function(i){$(this).css("z-index",-(i-l))});if(sets.transition=="fade"){item.hide().eq(0).show()}},zindex:{prev:function(){step==l?item.eq(0).css("z-index",l+3):item.css("z-index",l+1);item.eq(step).css("z-index",l+4).next(item).css("z-index",l+2)},next:function(){item.css("z-index",l+1).eq(step).css("z-index",l+3).prev(item).css("z-index",l+2)},bullets:function(){item.css("z-index",l+1).eq(active).css("z-index",l+2);item.eq(step).css("z-index",l+3)},trigger:function(){if(z==1){slider.zindex.next()}else{if(z==-1){slider.zindex.prev()}else{if(z==0){slider.zindex.bullets()}}}}},slide:{left:function(sign){sets.animationStart.call(this);item.eq(step).animate({left:sign+"="+w},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({left:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},top:function(sign){sets.animationStart.call(this);item.eq(step).animate({top:sign+"="+h},sets.animationSpeed,function(){slider.zindex.trigger()}).animate({top:0},sets.animationSpeed+200,function(){sets.animationComplete.call(this)})},fade:function(){sets.animationStart.call(this);item.fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function(){sets.animationComplete.call(this)})}},animation:{previous:function(){step==0?step=l:step--;z=-1;switch(sets.transition){case"horizontal":slider.slide.left("-");break;case"vertical":slider.slide.top("+");break;case"fade":slider.slide.fade();break}},next:function(){step==l?step=0:step++;z=1;switch(sets.transition){case"horizontal":slider.slide.left("+");break;case"vertical":slider.slide.top("-");break;case"fade":slider.slide.fade();break}}},autoplay:function(){play=setInterval(function(){slider.animation.next();if(sets.bullets){setTimeout(function(){slider.bullets.update()},sets.animationSpeed+300)}},sets.autoplaySpeed)},pause:function(){clearInterval(play)},bullets:{create:function(){$t.append($("<div />").addClass("sliderBullets"));bullets=$t.find(".sliderBullets");for(i=0;i<=l;i++){bullets.append($("<a />").attr({href:"#",rel:i}).text(i))}},trigger:function(){bullet=bullets.find("a");bullet.eq(0).addClass("active");bullet.click(function(){var b=$(this),rel=b.attr("rel");active=bullet.filter(".active").attr("rel");step=rel;sign=rel>active?"+":"-";z=0;if(!b.hasClass("active")){switch(sets.transition){case"horizontal":slider.slide.left(sign);break;case"vertical":slider.slide.top(sign);break;case"fade":slider.slide.fade();break}}bullet.removeClass("active");b.addClass("active");return false})},update:function(){bullet.removeClass("active").eq(step).addClass("active")}},arrows:{create:function(){$t.append($("<div />").addClass("sliderArrows"));arrows=$t.find(".sliderArrows");arrows.append($("<a />").attr("href","#").addClass(sets.prev).text("Previous"));arrows.append($("<a />").attr("href","#").addClass(sets.next).text("Next"))},trigger:function(){arrows.find("."+sets.prev).click(function(){slider.animation.previous();if(sets.bullets){slider.bullets.update()}return false});arrows.find("."+sets.next).click(function(){slider.animation.next();if(sets.bullets){slider.bullets.update()}return false});if(sets.arrowsHide){arrows.hide();$t.hover(function(){arrows.show()},function(){arrows.hide()})}}},triggers:function(){if(sets.arrows){slider.arrows.trigger()}if(sets.bullets){slider.bullets.trigger()}if(sets.pauseOnHover){$t.hover(function(){slider.pause()},function(){slider.autoplay()})}}};slider.init()})}}(jQuery));</script>
<script type="text/javascript">$(function(){
   
   $('.slider').mobilyslider({
      content: '.sliderContent',
      children: 'div',
      transition: 'fade',
      animationSpeed: 500,
      autoplay: true,
      autoplaySpeed: 3000,
      pauseOnHover: true,
      bullets: true,
      arrows: true,
      arrowsHide: false,
      prev: 'prev',
      next: 'next',
      animationStart: function(){},
      animationComplete: function(){}
   });
   
});</script>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style type="text/css">
/* ==========================================================
 * Guest Login
 * date: 1.25.2012
 * author: drogba921
 * web: http://www.codinghelp.org
 * email: drogba921@codinghelp.org
 * don't remove this message
 * ========================================================== */

#container {
width: 90%;
padding: 20px;
min-height: 600px;
margin-top: 20px;
margin: auto;
}
h1 {
font-size: 50px;
font-family: 'Anton', sans-serif;
text-align: center;
height: 50px;
}
h5 {
font-size: 30px;
font-family: arial, georgia, serif;
text-align: left;
margin-top: 30px;
margin-bottom: 10px;
}
h6 {
font-family: 'georgia', arial, serif;
font-size: 14px;
letter-spacing: 5px;
margin-top: 10px;
text-align: center !important;
}
.bodydes{
font-size: 16px;
font-family: 'Georgia', Arial, Serif;
text-align: justify;
margin-top: 50px;
line-height: 150%;
}
.slider {
margin-left: 0px;
width:800px;
height:350px;
position:relative;
padding-bottom:26px;
background:url('http://i48.servimg.com/u/f48/16/98/46/39/bottom11.png') no-repeat bottom center;
margin: auto;
}

.sliderContent {

width:800px;
height:350px;
clear:both;
position:relative;
overflow:hidden;
}

.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url('http://i48.servimg.com/u/f48/16/98/46/39/prev_n11.png');
width:42px;
height:42px;
position:absolute;
top:50%;
margin-top:-34px;
}

.prev {
background-position:0 0;
left:15px;
}

.prev:hover {
background-position:0 -44px;
}

.next {
right:15px;
background-position:-44px 0;
}

.next:hover {
background-position:-44px -44px;
}

.sliderContent .item {
position:absolute;
width:800px;
height:350px;
background:#fff;
}

.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}

.sliderBullets a {
display:block;
float: left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url('http://i48.servimg.com/u/f48/16/98/46/39/bullet11.png') no-repeat;
}

.sliderBullets .active {
background-position:0 -11px;
}

.sliderContent a {
outline:none;
}

a img {
border:none;
}
button.css3button {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #ffffff;
   padding: 10px 13px;
   background: -moz-linear-gradient(
      top,
      #3c8bd6 0%,
      #286094);
   background: -webkit-gradient(
      linear, left top, left bottom,
      from(#3c8bd6),
      to(#286094));
   border-radius: 4px;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border: 1px solid #286094;
   -moz-box-shadow:
      0px 1px 2px rgba(000,000,000,0.3),
      inset 0px 0px 0px rgba(255,255,255,0);
   -webkit-box-shadow:
      0px 1px 2px rgba(000,000,000,0.3),
      inset 0px 0px 0px rgba(255,255,255,0);
   text-shadow:
      0px -1px 0px rgba(000,000,000,0.3),
      0px 1px 0px rgba(255,255,255,0);

}
</style>
</head>

<body>
<div id="container">
<h1><span class="FORUMNAME"></span></h1>
<h6><span class="FORUMDESC"></span></h6>
<h5>It appears you're not logged in...</h5>
<em style="height: 20px; font-family: 'Georgia', arial, serif; float: right;">Already Registered? <a href="/login">Log-In to access forum</a> | Already Logged in? <a href="/forum">Return Home.</a></em>
<div class="bodydes">
<p>As an unregistered or logged out user, you will be unable to view the threads that <span class="FORUMNAME"></span> has to offer, and you will also be unable to reply to any threads. By Logging-In or Registering, you'll get full access to everything within the site including viewing, and replying to any thread. There's currently <span class="FORUMCOUNTOPIC"></span> topics and <span class="FORUMCOUNTPOST"></span> posts that you're missing out on. </p>

<h5>What's Inside?</h5>
<div class="slider">
         <div class="sliderContent">
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image110.gif" alt="" />
            </div>
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image210.gif" alt="" />
            </div>
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image310.gif" alt="" />
            </div>
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image410.gif" alt="" />
            </div>
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image510.gif" alt="" />
            </div>
            <div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image610.gif" alt="" />
            </div>

      </div></div>

<p style="margin-top: 20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel feugiat eros. Etiam vestibulum mollis lacus quis cursus. Cras adipiscing diam consequat justo auctor in faucibus diam porttitor. Maecenas ligula velit, molestie eget vulputate in, placerat quis dolor. Quisque porta diam vel ipsum auctor eget placerat metus facilisis. Nam ac laoreet mi. Sed porta eros vel ante pretium tristique. Aliquam mollis tellus at velit consequat elementum. Donec faucibus, sapien eu molestie porttitor, dolor metus consequat turpis, ac aliquet lorem leo vitae tortor. Nulla at mi at diam faucibus malesuada. Nullam pretium orci risus, porttitor varius turpis. In tristique odio sed est fringilla condimentum. Duis id ipsum nunc, ac ullamcorper mauris. Aenean massa justo, venenatis vel pellentesque in, suscipit sed massa. Ut rutrum viverra mauris. Vivamus pulvinar dolor suscipit nunc scelerisque sagittis consequat urna dapibus.</p>
<br/><br/>
<table width="100%"><tr><td style="text-align: center;"><a href="/register"><button type="button" name="" value="" class="css3button">Register for a Free Account</button></a>    <a href="/login"><button type="button" name="" value="" class="css3button">Log-In</button></a></td></tr></table>
<br/><br/>
<div style="font-size: 10px; font-family: 'Arial', Serif;">Created by Drogba921 of <a href="http://www.help.forumotion.com">forumotion.com</a></div>
</div>
</div>

</body>
</html>

You'll only need to edit the last paragraph.


Make sure to change each image in:
Code:
<div class="item">
               <img src="http://i47.servimg.com/u/f47/16/67/46/99/image610.gif" alt="" />
            </div>

with your own.


Step Two:

Templates:

Go into viewtopic_body and at the top add:

Code:
<!-- BEGIN switch_user_logged_out --><script type="text/javascript">
window.location = "/h1-guest-redirect"
</script><!-- END switch_user_logged_out -->

You will need to change the /h1-guest-redirect to the page name that you created the page with.




IMPORTANT: Do not change the following in the HTML Page:

Code:
<h1><span class="FORUMNAME"></span></h1>
<h6><span class="FORUMDESC"></span></h6>

It automatically uses your Forum Title and Site Description from the Admin Panel for these parts. Enjoy!
magicm00n
magicm00n
Member
Member
Forum Posts : 5
Member Since : 2012-03-16

Postmagicm00n 16/3/2012, 7:26 am

can this be done for phpbb3?
BlackNite
BlackNite
Premium Member
Premium Member
Forum Posts : 55
Member Since : 2011-11-28
http://gfxtutorials.netboarder.com/

PostBlackNite 23/3/2012, 4:24 pm

No it can't because this guest html page need an templates editing in which are available only for phpBB2 and punBB
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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