Hướng dẫn giúp mình phần cuối trang với!

Thảo luận trong 'Style & Template Questions' bắt đầu bởi khanhhung.niit, 9/10/13.

1votes
5/5, 1 vote

  1. khanhhung.niit

    khanhhung.niit Member

    Bài viết:
    108
    Likes :
    22
    Như tiêu đề mình đang muốn tạo chức năng như hình dưới (giống VXF). Mình mới làm quen với XFR nên không biết gì nhiều! Mong các bạn giúp đỡ.

    Mình xin cán ơn! Capture
     
    khanhhung.niit, 9/10/13
    #1
    Bài viết cũ hơn
    Bài viết mới hơn
    Đang tải...
    Recommended:X
  2. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    256
    Tự sữa lấy nhé
    thêm vào footer
    Mã:
    <footer>
   


<div class="footer">
    <div class="pageWidth">
        <div class="pageContent">
            <div id="footer" class="footercolumns">
                  <div id="footer-top">
                   
                    <div class="footer-top-left">
                    <div class="block-top"><img alt="VXF Logo" width="176" height="53" src="styles/vxf/logo_footer.png"></div>

                    <div class="block-bottom">

                    <p>Cộng đồng XenForo Việt Nam được thành lập từ 5/2012 với mục đích giao lưu, học hỏi, chia sẻ và thảo luận mọi vấn đề liên quan đến mã nguồn XenForo. </p>
<p>Chúng tôi sẽ không chịu trách nhiệm với các thông tin do thành viên đưa lên trừ thông tin nội bộ.</p>
<p>Website đang hoạt động thử nghiệm, chờ giấy phép MXH của Bộ TT &amp; TT.</p>
                    </div>

                    <div class="connect-face">
                    <p>Follow us</p>

                    <ul>
                        <li><a href="http://facebook.com/vietxf"><img alt="Facebook" src="styles/vxf/face.png" width="33" height="33" title="FaceBook"></a></li>
                        <li><a href="http://youtube.com/user/vietxf"><img alt="Social" src="styles/vxf/youtube.png" width="33" height="33" title="Youtube"></a></li>
                        <li><a href="http://twitter.com/vietxf"><img alt="Twitter" src="styles/vxf/twitter.png" width="33" height="33" title="Twitter"></a></li>
                        <li><a href="https://plus.google.com/u/0/communities/101569694641865270742"><img alt="Google" width="33" height="33" src="styles/vxf/google.png" title="Google"></a></li>
                        <li><a href="http://pinterest.com/vietxf/"><img alt="Social" src="styles/vxf/pinterest.png" width="33" height="33" title="Pinterest"></a></li>
                        <li><a href="forums/-/index.rss"><img alt="Rss Feed" src="styles/vxf/rss.png" title="Rss Feed" width="33" height="33"></a></li>
                    </ul>
                    </div>
                    </div>
                        <div class="fotter-contact">
                    <h3>Our Links</h3>

                    <ul>
                        <li><a href="http://vwp.vn/" target="_blank">Wordpress Việt Nam</a></li>
                        <li><a href="http://dvddohoa.com/" target="_blank">DVD Đồ họa</a></li>
                        <li><a href="http://joomlavn.org" target="_blank">Joomla Việt Nam</a></li>
                        <li><a href="http://vop.vn/" target="_blank">Opencart Việt Nam</a></li>
                        <li><a href="http://hkda.vn/" target="_blank">HKDA Việt Nam</a></li>
                        <li><a href="http://diendanthammy.com" target="_blank">Diễn đàn thẩm mỹ</a></li>
                        <li><a href="http://gamenoob.net" target="_blank">Gamenoob.net</a></li>
                    </ul>
                    </div>
                </div>
               
                <div class="four columns column">
                    <h3>Thông tin</h3>
                    <ul>
                        <li><a href="http://vxf.vn/forums/announcements.2/">Thông báo chung</a></li>
                        <li><a href="http://vxf.vn/forums/feedback.3/">Thắc mắc, góp ý</a></li>
                        <li><a href="http://vxf.vn/threads/5/">Nội quy diễn đàn</a></li>
                        <li><a href="http://vxf.vn/resources/">Tài nguyên</a></li>
                        <li><a href="http://vxf.vn/docs">Documentation</a></li>
                        <li><a href="http://hkda.vn/dich-vu/website/dien-dan-xenforo/">Dịch vụ XenForo</a></li>
                        <li><a href="misc/contact">Liên hệ BQT</a></li>
                    </ul>
                </div>
                <div class="three columns column">
                    <h3>Thảo luận</h3>
                    <ul>
                      <li><a href="http://vxf.vn/forums/hacking-security.25/">Hacking, Security</a></li>
                      <li><a href="http://vxf.vn/forums/seo-for-xenforo.27/">Search Engine Optimization</a></li>
                      <li><a href="http://vxf.vn/forums/hosting-server-domain.18/">Hosting, Domain, Server</a></li>
                      <li><a href="http://vxf.vn/forums/development-tutorials.20/">Development Tutorials</a></li>
                      <li><a href="http://vxf.vn/forums/add-on-quesions.14/">Addon Questions</a></li>
                      <li><a href="http://vxf.vn/forums/style-template-questions.37/">Style Questions</a></li>
                      <li><a href="http://vxf.vn/forums/installation-upgrade-questions.36/">Installation / Upgrade</a></li>
                    </ul>
                </div>
            </div>
           

           
       
        </div>
    </div>
</div>

<div class="footerLegal">
    <div class="pageWidth">
        <div class="pageContent">
            <div id="copyright">Diễn đàn sử dụng XenForo™ ©2011 XenForo Ltd.
</div>
           

            <ul id="legal">
           
               
               
                    <li><a href="misc/language?redirect=%2Fthreads%2Fhuong-dan-giup-minh-phan-cuoi-trang-voi.14150%2F" class="OverlayTrigger Tooltip" rel="nofollow">Tiếng Việt</a></li>
               
           

           
                <li><a href="help/terms">Quy định và Nội quy</a></li>
               
           
           
            <li><a id="toTop" href="/threads/huong-dan-giup-minh-phan-cuoi-trang-voi.14150/#navigation">Lên đầu trang</a></li>

            </ul>
       
           
           
            <span class="helper"></span>
        </div>
    </div>   
</div>


</footer>
    tiếp thêm vào footer.css

    Mã:
    #footer {
    clear: both;
    min-height: 100px;
    padding: 20px 0 25px;
}

.footer {
    background: #1d1e22 url(styles/vxf/footer_bg.png) repeat-x top center;
    clear: both;
    margin-top: 10px;
}

.footercolumns {
    display: inline;
    margin-left: 0;
    margin-right: 0;
}

.footer-top-left {
    float: left;
    width: 485px;
    margin-top: 18px;
    padding-left: 10px;
}

.footer-top-left .block-top {
}

.footer-top-left .block-bottom {
    float: left;
    margin-right: 15px;
    border-bottom: 1px dotted #c8c8c8;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.footer-top-left .block-bottom span {
    color: #fff;
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.footer-top-left .block-bottom p {
    color: #888;
    font-size: 12px;
    margin-bottom: 0px;
padding: 4px 0;
}

.footer-top-left .connect-face p {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    float: left;
    margin-top: 9px;
}

.connect-face ul li {
    float: left;
    padding-left: 10px;
    display: inline;
}

.fotter-contact {
    float: left;
    width: 110px;
    min-height: 174px;
    border-left: 1px dotted #888;
    margin-top: 20px;
    padding-left: 21px;
    padding-right: 16px;
}

#footer h3 {
    color: #fff;
    font-family: 'MyriadProRegular';
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 11px;
}

.fotter-contact p {
    color: #646464;
    font-size: 12px;
    padding-bottom: 5px;
    margin-bottom: 0px;
}

.fotter-contact a {
    font-size: 11px;
    color: #0daaac;
    text-decoration: none;
    padding-bottom: 8px;
    display: inline-block;
}

#footer .four.columns.column {
    float: left;
    width: 120px;
    min-height: 174px;
    border-left: 1px dotted #888;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 15px;
}

#footer .column ul li {
}

#footer .column a {
    color: #888;
    font-size: 12px;
    text-decoration: none;
}

#footer .column a:hover {
        color: #bbb;
}

#footer .three.columns.column {
    float: left;
    width: 165px;
    min-height: 174px;
    border-left: 1px dotted #888;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 15px;
}
.footer .pageContent
{
    font-size: 11px;
color: #a5cae4;
overflow: hidden;
zoom: 1;

}
   
    .footer a,
    .footer a:visited
    {
        color: #a5cae4;
padding: 5px;
display: block;

    }
   
        .footer a:hover,
        .footer a:active
        {
            color: #d7edfc;

        }

    .footer .choosers
    {
        padding-left: 5px;
float: left;
overflow: hidden;
zoom: 1;

    }
   
        .footer .choosers dt
        {
            display: none;
        }
       
        .footer .choosers dd
        {
            float: left;
           
        }
       
    .footerLinks
    {
        padding-right: 5px;
float: right;
overflow: hidden;
zoom: 1;

    }
   
        .footerLinks li
        {
            float: left;
           
        }
       
            .footerLinks a.globalFeed
            {
                width: 14px;
                height: 14px;
                display: block;
                text-indent: -9999px;
                white-space: nowrap;
                background: url('http://cdn.vxf.vn/styles/vxf/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
                padding: 0;
                margin: 5px;
            }
.footerLegal {
background: #1d1e22;
}
.footerLegal .pageContent
{
    font-size: 12px;
    overflow: hidden; zoom: 1;
    padding: 10px 0 10px;
    text-align: center;
}
.footerLegal .pageContent a:link {
color: #d7edfc;
}
   
    #copyright
    {
        color: rgb(100,100,100);
        float: left;
    }
   
    #legal
    {
        float: right;
    }
   
        #legal li
        {
            float: left;
           
            margin-left: 10px;
        }
     
    Minh Bảo, 9/10/13
    #2
    khanhhung.niit, DucKent and Love Are Love like this.
  3. Love Are Love

    Love Are Love Member

    Bài viết:
    141
    Likes :
    20
    pro cho xin cái yahoo với
     
    Love Are Love, 9/10/13
    #3
  4. DucKent

    DucKent Member

    Bài viết:
    228
    Likes :
    27
    đã có lần thêm nhưng lỗi . để tối test lại
     
    DucKent, 9/10/13
    #4
  5. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    256
    yahoo trên thông tin thành viên đó ^^
     
    Minh Bảo, 9/10/13
    #5
  6. DucKent

    DucKent Member

    Bài viết:
    228
    Likes :
    27
    Mình add nó bị xuống dòng . Demo Vn4zoom.com ạ
     
    DucKent, 10/10/13
    #6
  7. Minh Bảo

    Minh Bảo Verified User

    Bài viết:
    858
    Likes :
    256
    vào footer.css tìm thẻ
    Mã:
    #footer .three.columns.column
    và bỏ: width: 165px; trong thẻ ấy đi
     
    Minh Bảo, 10/10/13
    #7
    DucKent thích bài này.
  8. krone13

    krone13 New Member

    Bài viết:
    12
    Likes :
    1
    Vẫn không được bạn à. Mình xài phiên bản 1.2.1. Sao nó bị lỗi tè le luôn
    Toàn xuống dòng hết
     
    krone13, 10/10/13
    #8
  9. khanhhung.niit

    khanhhung.niit Member

    Bài viết:
    108
    Likes :
    22
    Các bạn có thể xoá luôn toàn bộ code ở trong footer và thay bằng đoạn code ở trên là sẽ fix được lỗi xuống dòng nhé!
     
    khanhhung.niit, 11/10/13
    #9
  10. DucKent

    DucKent Member

    Bài viết:
    228
    Likes :
    27
    12121
    Bác zip đoạn này nguyên gốc giúp em ạ
     
    DucKent, 11/10/13
    #10
  11. khanhhung.niit

    khanhhung.niit Member

    Bài viết:
    108
    Likes :
    22
    Nguyên gôc sao bạn?
     
    khanhhung.niit, 11/10/13
    #11
  12. DucKent

    DucKent Member

    Bài viết:
    228
    Likes :
    27
    cảu mình các cái nút như thế code nó k giống bạn à
     
    DucKent, 11/10/13
    #12
comments powered by Disqus

Chia sẻ trang này

Đang tải...