Dodamies uz User Login Form un visu tur esošo aizstājam ar šo kodu:
Code
<style>
#uidLogButton {display:none;}
#baseLogForm {display: block !important;}
#uidLogButtonAjx {display:none;}
#baseLogFormAjx {display: block !important;}
</style>
<?if($ERROR$)?><td colspan="2" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<script type="text/javascript">
sendFrm549658=function(){
var o=$('#frmLg549658')[0],pos=_uGetOffset(o),o2=$('#blk549658')[0];
document.body.insertBefore(o2,document.body.firstChild);
$(o2).css({top:(pos['top'])+'px',left:(pos['left'])+'px',width:o.offsetWidth+'px',height:o.offsetHeight+'px',display:''}).html('<div align="left" style="padding:5px;"><div class="myWinLoad"></div></div>');
_uPostForm('frmLg549658',{type:'POST',url:'/index/sub/',error:function() {
$('#blk549658').html('<div align="left" style="padding:10px;"><div class="myWinLoadSF" title="Nav iespejams izpildīt pieprasījumu. Mēģiniet velāk."></div></div>');
_uWnd.alert('<div class="myWinError">Nav iespējams izpildīt pieprasījumu. Meģiniet vēlāk.</div>','',{w:250,h:90,tm:3000,pad:'15px'});
setTimeout("$('#blk549658').css('display','none');",'1500');}});
}
</script>
<div class="log-in-area" id="log-in-area">
<div class="log-in-box">
<p>Tavalapa.lv <b onclick="$('#log-in-area').fadeToggle('fast');"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-edit-delete-icon.png" width="24" height="24"></b></p>
<div id="log-in-inputs" class="log-in-inputs">
<input id="username" name="user" value="" maxlength="50" type="text" placeholder="Tavs e-pasts" required>
<input id="password" name="password" maxlength="15" type="password" placeholder="Tava parole" required>
</div>
<div id="log-in-actions" class="log-in-actions">
<input type="submit" id="submit" value="Ienākt">
</div>
<span><a href="javascript://" rel="nofollow" onclick="new _uWnd('Prm','Aizmirsi paroli?',300,130,{autosize:1,closeonesc:1},{url:'/index/5'});return false;">Aizmirsi paroli?</a></span>
</div>
</div>
<?if($PAGE_ID$="login")?></div><?endif?></div>
Tālāk dodamies uz Top Part Of The Website un pašā koda apakšā iekopējam šo:
Code
<style>/*Login Container*/
.log-in-area {
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,.75) url(/images/img/bg-nav.png);
position:fixed;
top:0;
left:0;
z-index:9999
}
.log-in-box {
width:300px;
height:200px;
color:#FFF;
text-shadow:0 1px 0 #000;
margin:300px auto 0
}
.log-in-box p {
text-align:left;
display:block;
font:24px Cuprum, sans-serif
}
.log-in-box p b {
font:24px icon;
float:right;
cursor:pointer
}
.log-in-box span {
text-align:left;
display:block;
font:500 14px Cuprum, sans-serif;
margin:15px 0
}
.log-in-box span a {
text-decoration:underline
}
.log-in-inputs input {
background:#f1f1f1;
width:290px;
border:1px solid #ccc;
border-radius:3px;
box-shadow:0 1px 1px #ccc inset;
margin:5px 0;
padding:6px 5px
}
.log-in-inputs input:focus {
background:#fff;
outline:none;
box-shadow:0 0 0 1px #e8c291 inset;
border-color:#e8c291
}
.log-in-actions {
display:block;
margin:5px 0
}
.log-in-actions input {
cursor:pointer;
float:right;
background:#e59e2d;
border:1px solid #cd820a;
border-radius:2px;
box-shadow:0 1px 0 0 rgba(255,255,255,0.3) inset;
color:#EEE;
font:500 14px Cuprum,sans-serif;
text-shadow:0 1px 0 #cd820a;
padding:4px 20px
}
/*---*/
</style>
$LOGIN_FORM$
Tālāk tur pat, Top Part Of The Website lapā aizstājam savu veco ienākšanas kodu ar šo:
Code
<a href="javascript://" onclick="$('#log-in-area').stop(true,true).fadeToggle();return false;">Ienākt</a>
Kopumā viss izskatīsies šādi:
SCR #1 -
Ja ir kādas neskaidrības, droši jautājam. :)