آموزش کادر بندی فوتر به سبک جدید

کدهای زیر را جایگزین کد های قالب footer کنید :

کد:

<vb:if condition="!empty($ad_location['ad_footer_start']) or !empty($ad_location['global_above_footer'])">
<div style="clear: {vb:stylevar left}">
  {vb:raw ad_location.ad_footer_start}
  {vb:raw ad_location.global_above_footer}
</div>
</vb:if>
<div id="footer" class="floatcontainer footer">
 
 
    <form action="{vb:link forumhome|nosession}" method="get" id="footer_select" class="footer_select">
 
 
        <vb:if condition="$show['quickchooser']">
            <select name="styleid" onchange="switch_id(this, 'style')">
                <optgroup label="{vb:rawphrase quick_style_chooser}"><option class="hidden"></option></optgroup>
                <vb:if condition="$quickchooserbits1">
                    <vb:if condition="$quickchooserbits2">
                    <optgroup label="&nbsp;{vb:rawphrase standard_styles}">
                    </vb:if>                
                    {vb:raw quickchooserbits1}
                    <vb:if condition="$quickchooserbits2">
                    </optgroup>
                    </vb:if>                    
                </vb:if>
                <vb:if condition="$quickchooserbits2">
                    <vb:if condition="$quickchooserbits1">
                    <optgroup label="&nbsp;{vb:rawphrase mobile_styles}">
                    </vb:if>
                    {vb:raw quickchooserbits2}
                    <vb:if condition="$quickchooserbits1">
                    </optgroup>
                    </vb:if>                    
                </vb:if>
            </select>    
        </vb:if>
        
        <vb:if condition="$show['languagechooser']">
            <select name="langid" onchange="switch_id(this, 'lang')">
                <optgroup label="{vb:rawphrase quick_language_chooser}">
                    {vb:raw languagechooserbits}
                </optgroup>
            </select>
        </vb:if>
    </form>
 
 
    <ul id="footer_links" class="footer_links">
        <vb:if condition="$show['contactus']"><li><a href="{vb:raw vboptions.contactuslink}" rel="nofollow" accesskey="9">{vb:rawphrase contact_us}</a></li></vb:if>
        <vb:if condition="$vboptions['hometitle']"><li><a href="{vb:raw vboptions.homeurl}">{vb:raw vboptions.hometitle}</a></li></vb:if>
        <vb:if condition="$show['admincplink']"><li><a href="{vb:raw admincpdir}/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase admin}</a></li></vb:if>
        <vb:if condition="$show['modcplink']"><li><a href="{vb:raw modcpdir}/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase mod}</a></li></vb:if>
        <vb:if condition="$vboptions['archiveenabled']"><li><a href="archive/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase archive}</a></li></vb:if>
        {vb:raw template_hook.footer_links}
        <vb:if condition="$vboptions['privacyurl']"><li><a href="{vb:raw vboptions.privacyurl}">{vb:rawphrase privacy_statement}</a></li></vb:if>
        <vb:if condition="$vboptions['tosurl']"><li><a href="{vb:raw vboptions.tosurl}">{vb:rawphrase terms_of_service}</a></li></vb:if>
        <li><a href="{vb:raw relpath}#top" onclick="document.location.hash='top'; return false;">{vb:rawphrase top}</a></li>
    </ul>
    
    
    <vb:if condition="$show['dst_correction']">
    <!-- auto DST correction code -->
        <form action="profile.php?do=dst" method="post" name="dstform">
            <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
            <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
            <input type="hidden" name="do" value="dst" />
        </form>
        <script type="text/javascript">
        <!--
            var tzOffset = {vb:raw bbuserinfo.timezoneoffset} + {vb:raw bbuserinfo.dstonoff};
            var utcOffset = new Date().getTimezoneOffset() / 60;
            if (Math.abs(tzOffset + utcOffset) == 1)
            {    // Dst offset is 1 so its changed
                document.forms.dstform.submit();
            }
        //-->
        </script>
        <!-- / auto DST correction code -->
    </vb:if>
    
    <script type="text/javascript">
    <!--
        // Main [URL="http://www.wikivb.ir/forum14.html"]vbulletin[/URL] Javascript Initialization
        vBulletin_init();
    //-->
    </script>
        {vb:raw template_hook.footer_javascript}
</div>
</div> <!-- closing div for body_wrapper -->
 
 
<div class="below_body">
<div class="footerbg"><div/>
<div class="moduleItemExtraFields">                                           <span class="moduleItemExtraFieldsValue"><img src="http://livedemo00.template-help.com/joomla_43971/images/icon2.png" alt="Image"></span></div>
 
 
<div class="about">درباره ما<div/>
<div class="moduleItemIntrotext">
                    <p>ویکی وی بی از سال 91 با عنوان مرجع تخصصی و رایگان [URL="http://www.wikivb.ir/forum14.html"]ویبولتین[/URL] در ایران شروع به کار کرده و مفتخر است که تا کنون توانسته به نحو احسن جدید ترین آموزش ها و امکانات را برای وبمستران میهن عزیزمان ایران به ویژه کاربران ویبولتین به ارمغان بیاورد .</p>
                </div><br/><br/>
<div class="dosstan">                                           <span class="moduleItemExtraFieldsValue"><img src="http://livedemo00.template-help.com/joomla_43971/images/icon1.png" alt="Image"></span></div>
<div class="doostantitle">دوستان ما<div/>
<div class="doostanbg">
                    <marquee onmouseover="this.stop();" direction="up" scrollamount="3" scrolldelay="0" onmouseout="this.start();" style="text-align: center;"> 
<a href="" target="black">دوستان ما</a><br> 
<a href="" target="black">دوستان ما</a><br>
<a href="" target="black">دوستان ما</a><br>
<a href="" target="black">دوستان ما</a><br>
</marquee>
                </div>
 
 
<div class="ertebat">                                           <span class="moduleItemExtraFieldsValue"><img src="http://livedemo00.template-help.com/joomla_43971/images/icon3.png" alt="Image"></span></div>
<div class="ertebattitle">ارتباط با ما<div/>
<div class="ertebatbg"><p>Email : [email]Admin@wikivb.ir[/email]<p/><br/><p>Mobile : 0912-0000000<p/>
                </div>
<a href="http://www.wikivbir/" target="blank"><div class="wikivb"></div></a>
{vb:raw ad_location.ad_footer_end} 
<vb:if condition="$vboptions['enablefacebookconnect']">
    {vb:raw facebook_footer}
</vb:if>
</div>

و کدهای زیر را به انتهای قالب additional.css اضافه کنید :

کد:

.footerbg {
background: url(http://up.wikivb.ir/images/7973k6nqf19omxrh2j9z.png) repeat-x;
height: 398px;
margin-right: -35px;
margin-left: -35px;
margin-top: -40px;
z-index: -1;
position: absolute;
width: 100%;
}
 
 
.moduleItemExtraFields {
margin-right: 205px;
margin-top: 70px;
}
 
 
.about {
display: block;
font: 16px Byekan;
text-transform: none;
color: #616161;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
margin-right: 220px;
margin-top: 15px;
}
 
 
.moduleItemIntrotext {
height: 145px;
width: 271px;
margin-right: -120px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-o-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-ms-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
margin-top: 2px;
padding: 10px;
position: absolute;
font: 15px BkoodakBold;
color: #616161;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
line-height: 30px;
text-align: center;
overflow: hidden;
}
 
 
.dosstan {
margin-right: 395px;
margin-top: -169px;
}
 
 
.doostantitle {
display: block;
font: 16px Byekan;
text-transform: none;
color: #616161;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
margin-right: 425px;
margin-top: 13px;
}
 
 
.doostanbg {
height: 145px;
width: 271px;
margin-right: -120px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-o-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-ms-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
margin-top: 131px;
padding: 10px;
position: absolute;
font: 15px BkoodakBold;
color: rgb(255,255,255);
line-height: 30px;
text-align: center;
overflow: hidden;
}
 
 
.ertebat {
margin-right: 410px;
margin-top: -130px;
}
 
 
.ertebattitle {
display: block;
font: 16px Byekan;
text-transform: none;
color: #616161;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
margin-right: 425px;
margin-top: 20px;
}
 
 
.ertebatbg {
height: 75px;
width: 271px;
margin-right: -123px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-o-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
-ms-box-shadow: 0 0 50px rgba(0,0,0,0.2) inset;
margin-top: 2px;
padding: 10px;
position: absolute;
font: 20px BkoodakBold;
color: #616161;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
line-height: 30px;
text-align: center;
overflow: hidden;
}
 
 
.wikivb {
position: absolute;
background: url(http://up.wikivb.ir/images/29lbzttvjbgjlutx92ii.png) no-repeat left;
height: 50px;
width: 50px;
left: 6px;
margin-top: 115px;
-moz-transition: all 0.4s ease-in;
-webkit-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
}
 
 
.wikivb:hover {
width: 250px;
}

شات:





موفق باشید!