hosting gia re

  1. Chọn mua sim phong thuy hợp mệnh | Kho sim so phong thuy giá rẻ | Mua sim so dep viettel giá rẻ

    Trải nghiệm Phần mềm diệt virus miễn phí tốt nhất hiện nay

    XenForo 1.5.15a Released HOT XenForo 2.0.0 Released New

Thêm một Footer đẹp cho diễn đàn Xenforo

Thảo luận trong 'Template Modifications' bắt đầu bởi Ái Nhi, 03/11/2015.

Lượt xem: 3,307

  1. Ái Nhi

    Ái Nhi Thượng Đế

    Tham gia:
    16/03/2015
    Bài viết:
    338
    Đã được thích:
    367
    Điểm thành tích:
    63
    Giới tính:
    Nữ
    Tiếp đây là hướng dẫn các bạn cách tạo Footer đẹp và cũng đơn giản như phần Hãy đăng nhập hoặc đăng ký để xem được links
    [​IMG]
    Các bạn cần tải file hình các icon Social vào thư mục Styles--Style của bạn:
    Trước tiên, các bạn vào template Footer, sửa toàn bộ code thành:
    PHP:
    <xen:edithint template="footer.css" />
    <
    xen:hook name="footer">
    <
    div class="footer">
        <
    div class="pageWidth">
            <
    div class="pageContent">
            <
    ul>
            <
    li class="footerBlock footerBlock1">
                <
    div>
                    <
    h3>ABOUT US</h3>
                <
    class="text">Neque porro quisquam est qui dolorem ipsum quia dolor sit ametconsecteturLorem Ipsum is simply dummy text of the printing and typesetting industry.
    </
    p>
                <
    class="social clearfix">
                    <
    a href="#"><img src="@imagePath/extra/social-01.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-02.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-03.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-04.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-05.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-06.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-07.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-08.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-09.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-10.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-11.png" alt="image" /></a>
                    <
    a href="#"><img src="@imagePath/extra/social-12.png" alt="image" /></a>
                </
    p>
                </
    div>
            </
    li>
            <
    li class="footerBlock footerBlock2">
                <
    div>
                    <
    h3>RELATED LINK</h3>
                <
    ul>
                    <
    li><a href="#">Related Link 1</a></li>
                    <
    li><a href="#">Related Link 2</a></li>
                    <
    li><a href="#">Related Link 3</a></li>
                    <
    li><a href="#">Related Link 4</a></li>
                    <
    li><a href="#">Related Link 5</a></li>
                </
    ul>
                </
    div>
            </
    li>
            <
    li class="footerBlock footerBlock2 footerBlock3">
                <
    div>
                    <
    h3>RELATED LINK</h3>
                <
    ul>
                    <
    li><a href="#">Related Link 1</a></li>
                    <
    li><a href="#">Related Link 2</a></li>
                    <
    li><a href="#">Related Link 3</a></li>
                    <
    li><a href="#">Related Link 4</a></li>
                    <
    li><a href="#">Related Link 5</a></li>
                </
    ul>
                </
    div>
            </
    li>
            <
    li class="footerBlock footerBlock4">
                <
    div>
                    <
    h3>CONTACT US</h3>
    <
    ul>
                    <
    li><class="fa fa-home"></i15 Str., 4844IpsumStateUK</li>
                    <
    li><class="fa fa-phone"></i> +30-2106019311</li>
                    <
    li><class="fa fa-envelope-o"></isupport@brivium.com</li>
                    <
    li><class="fa fa-globe"></iwww.brivium.com</li>
                </
    ul>
                </
    div>
            </
    li>
            </
    ul>
            <
    xen:comment>
                <
    xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                <
    dl class="choosers">
                    <
    xen:if is="{$canChangeStyle}">
                        <
    dt>{xen:phrase style}</dt>
                        <
    dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
                    </
    xen:if>
                    <
    xen:if is="{$canChangeLanguage}">
                        <
    dt>{xen:phrase language}</dt>
                        <
    dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
                    </
    xen:if>
                </
    dl>
                </
    xen:if>
             
                <
    ul class="footerLinks">
                <
    xen:hook name="footer_links">
                    <
    xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                        <
    a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a>
                    <
    xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                        <
    a href="{$xenOptions.contactUrl.custom}{xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a>
                    </
    xen:if>
                    <
    li><a href="{xen:link help}">{xen:phrase help}</a></li>
                    <
    xen:if is="{$homeLink}"><li><a href="{$homeLink}class="homeLink">{xen:phrase home}</a></li></xen:if>
                    <
    li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
                    <
    li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                        
    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
                </
    xen:hook>
                </
    ul>
                </
    xen:comment>
             
                <
    span class="helper"></span>
            </
    div>
        </
    div>
    </
    div>

    <
    div class="footerLegal">
        <
    div class="pageWidth">
            <
    div class="pageContent">
         
                <
    div id="copyright">{xen:helper copyright} {xen:phrase extra_copyrightDeveloped by <a href="http://share4web.net/" target="_blank">Share4Web Team</a></div>
                <
    xen:hook name="footer_after_copyright" />
         
                <
    ul id="legal">
                <
    xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
                    <
    xen:if is="{$canChangeStyle}">
                    <
    li>
                        <
    a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a>
                    </
    li>
                    </
    xen:if>
                    <
    xen:if is="{$canChangeLanguage}">
                    <
    li>
                        <
    a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a>
                    </
    li>
                    </
    xen:if>
                </
    xen:if>
                <
    xen:hook name="footer_links_legal">
                    <
    xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
                    <
    xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
                </
    xen:hook>
                <
    li>
                    <
    ul class="footerLinks">
                <
    xen:hook name="footer_links">
                    <
    xen:if is="{$xenOptions.contactUrl.type} === 'default'">
                        <
    li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
                    <
    xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
                        <
    li><a href="{$xenOptions.contactUrl.custom}{xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
                    </
    xen:if>
                    <
    li><a href="{xen:link help}">{xen:phrase help}</a></li>
                    <
    xen:if is="{$homeLink}"><li><a href="{$homeLink}class="homeLink">{xen:phrase home}</a></li></xen:if>
                    <
    li><a href="{$requestPaths.requestUri}#navigation" class="topLink"><class="fa fa-angle-up fa-lg"></i><xen:comment>{xen:phrase go_to_top}</xen:comment></a></li>
                    <
    li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
                        
    title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
                </
    xen:hook>
                </
    ul>
                </
    li>
                </
    ul>
             
                <
    xen:if is="{$debugMode}">
                    <
    xen:if hascontent="true">
                        <
    dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
                        <
    xen:contentcheck>
                            <
    xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}rel="nofollow">{xen:phrase x_seconds'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                            <
    xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                            <
    xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
                        </
    xen:contentcheck>
                        </
    dl>
                    </
    xen:if>
                </
    xen:if>
             
                <
    span class="helper"></span>
            </
    div>
        </
    div
    </
    div>
    </
    xen:hook>
    Kế đó, các bạn sửa toàn bộ nội dung trong template Footer.css bằng đoạn code:
    PHP:
    .footer .pageContent
    {
        @
    property "footer";
        
    font-size12px;
        
    overflowhidden;
        
    zoom1;
        @
    property "/footer";
    }
        
    footer,
        .
    footer a,
        .
    footer a:visited
        
    {
            @
    property "footerLink";
            
    color: @textCtrlBackground;
            @
    property "/footerLink";
        }
     
        .
    footerLegal a
        
    {
            
    color: @contentBackground;
        }
         
            .
    footerLegal a:hover,
            .
    footerLegal a:active,
            .
    footer a:hover,
            .
    footer a:active
            
    {
                @
    property "footerLinkHover";

                @
    property "/footerLinkHover";
            }

        .
    footer .choosers
        
    {
            @
    property "footerLeftBlock";
            
    padding-left5px;
            
    floatleft;
            
    overflowhidden;
            
    zoom1;
            @
    property "/footerLeftBlock";
        }
     
            .
    footer .choosers dt
            
    {
                
    displaynone;
            }
         
            .
    footer .choosers dd
            
    {
                
    floatleft;
                <
    xen:if is="{$pageIsRtl}">*displayinline; *floatnone; *zoom1;</xen:if>
            }
         
        .
    footerLinks
        
    {
            @
    property "footerRightBlock";
            
    padding-right5px;
            
    floatright;
            
    overflowhidden;
            
    zoom1;
            @
    property "/footerRightBlock";
        }
     
            .
    footerLinks li
            
    {
                
    floatleft;
                <
    xen:if is="{$pageIsRtl}">*displayinline; *floatnone; *zoom1;</xen:if>
            }
         
                .
    footerLinks a.globalFeed
                
    {
                    
    width14px;
                    
    height14px;
                    
    displayblock;
                    
    text-indent: -9999px;
                    
    white-spacenowrap;
                    
    backgroundurl('@imagePath/xenforo/xenforo-ui-sprite.png'no-repeat -112px -16px;
                    
    padding0;
                    
    /*margin: 5px;*/
                
    }

    .
    footerLegal .pageContent
    {
        
    font-size12px;
        
    overflowhiddenzoom1;
        
    padding10px 5px;
        
    text-aligncenter;
    }
     
        
    #copyright
        
    {
            
    floatleft;
        }
     
        
    #legal
        
    {
            
    floatright;
        }
     
            
    #legal li
            
    {
                
    floatleft;
                <
    xen:if is="{$pageIsRtl}">*displayinline; *floatnone; *zoom1;</xen:if>
            }

    <
    xen:if is="@enableResponsive">
    @
    media (max-width:@maxResponsiveMediumWidth)
    {
        .
    Responsive .footerLinks a.globalFeed,
        .
    Responsive .footerLinks a.topLink,
        .
    Responsive .footerLinks a.homeLink
        
    {
            
    displaynone;
        }

        .
    Responsive .footerLegal .debugInfo
        
    {
            
    clearboth;
        }
    }

    @
    media (max-width:@maxResponsiveNarrowWidth)
    {
        .
    Responsive #copyright span
        
    {
            
    displaynone;
        }
    }
    </
    xen:if>
    Bước cuối cùng, các bạn thêm vào template Extra.css đoạn code:
    PHP:
    /* Extra Footer */
    footer
    {
        
    background-color: @primaryMedium;
    }

    .
    footer
    {
        
    line-height18px;
        
    border-top2px solid @pageBackground;
    }

    .
    footer .pageContent

        
    padding20px 10px;
    }

    .
    footer h3
    {
        
    padding10px 0;
        
    margin-bottom5px;
        
    font-size15px;
        
    font-weight600;
        
    color: @contentBackground;
    }

    .
    footerBlock
    {
        
    font-size13px;
        
    floatleft;
    }

    .
    footerBlock div
    {
        
    padding:0 10px
        
    box-sizingborder-box;
    }

    .
    footerBlock:first-child div
    {
        
    padding-left0;
    }

    .
    footerBlock:last-child div
    {
        
    padding-right0;
    }

    .
    footerBlock1
    {
        
    width34%;
    }

    .
    footerBlock1 .social
    {
        
    padding-top20px;
    }

    .
    footerBlock1 .social a
    {
        
    margin-right3%;
        
    displayinline-block;
    }

    .
    footerBlock2,
    .
    footerBlock4
    {
        
    width22%;
    }

    .
    footerBlock4 ul li
    {
        
    margin-bottom6px;
    }

    .
    footerBlock4 ul li .fa
    {
        
    margin-right5px;
    }

    /********** FooterLegal ***********/

    .footerLegal
    {
        
    background-colorrgba(0,0,0,0.4);
    }

    .
    footerLegal .pageContent
    {
        
    padding:10px;
    }

    .
    footerLegal .fa
    {
        
    font-size18px;
    }

    .
    footerLegal #legal li  a
    {
        
    margin-left10px;
    }

    .
    footerLinks a.globalFeed
    {
        
    margin0;
    }

    .
    footerLegal #BRCopyright .muted .concealed
    {
        
    color: @faintTextColor !important;
    }

    <
    xen:if is="@enableResponsive">
    @
    media (max-width:@nonResponsiveMinWidth)
    {
        .
    Responsive .pairsInline.debugInfo
        
    {
            
    displaynone;
        }
    }
    @
    media (max-width:@maxResponsiveWideWidth)
    {
        .
    Responsive #copyright
        
    {
            
    floatnone;
        }
     
        .
    Responsive #legal
        
    {
            
    floatnone;
            
    displayinline-block;
        }
     
        .
    Responsive #legal>li
        
    {
        }
     
        .
    Responsive .footerBlock1
        
    {
            
    width100%;
            
    floatnone;
            
    displayinline-block;
            
    text-alignjustify;
        }
     
        .
    Responsive .footerBlock2,
        .
    Responsive .footerBlock4
        
    {
            
    width33%;
        }
     
    }
    @
    media (max-width:@maxResponsiveMediumWidth)
    {
        .
    Responsive #BRCopyright
        
    {
            
    floatnone !important;
        }
     
    }
    @
    media (max-width:@maxResponsiveNarrowWidth)
    {
        .
    Responsive .footerBlock2,
        .
    Responsive .footerBlock4
        
    {
            
    floatnone;
            
    width90%;
            
    marginauto
            
    text-aligncenter;
            
    margin-top10px;
        }
     
        .
    Responsive .footerBlock1 h3
        
    {
            
    text-aligncenter;
        }

        .
    Responsive #legal li
        
    {
            
    displayinline-block;
            
    floatnone;
            
    vertical-alignmiddle;
        }
     
        .
    Responsive .footerBlock1 .social a
        
    {
            
    margin-right2%;
        }
     
    }
    </
    xen:if>
    Lưu lại và tận hưởng thành quả.
    Lưu ý, các bạn có thể chỉnh sửa lại màu sắc và nội dung Footer sao cho phù hợp với diễn đàn của các bạn.
    Cám ơn mọi người đã theo dõi. Chúc thành công !
     
    Quan tâm nhiều
    Bài viết mới
    Lấy ảnh thumb mà không lấy emoj
    Lấy ảnh thumb mà không lấy emoj bởi chodientu, 18/11/2017 lúc 21:04:37
    Giúp tăng chiều dai khung bài viết
    Giúp tăng chiều dai khung bài viết bởi ngaithon, 15/11/2017 lúc 00:57:05
    tqhuy, tranthanh, PVS and 2 others like this.
  2. tuannt

    tuannt Thượng Đế

    Tham gia:
    07/04/2015
    Bài viết:
    247
    Đã được thích:
    138
    Điểm thành tích:
    43
    Giới tính:
    Nam
    cái này code responsive chưa bạn, vì một số code footer trên pc thì ok, còn mobile thì ko chuẩn
     
  3. Ái Nhi

    Ái Nhi Thượng Đế

    Tham gia:
    16/03/2015
    Bài viết:
    338
    Đã được thích:
    367
    Điểm thành tích:
    63
    Giới tính:
    Nữ
    Thím đã cài đặt thử chưa ?
     
  4. KenLilBoiz

    KenLilBoiz CEO DAWEBZ Chuyên Gia Dịch Vụ Trực Tuyến

    Tham gia:
    05/08/2015
    Bài viết:
    351
    Đã được thích:
    345
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Nghề nghiệp:
    Search Engine Marketing
    Nơi ở:
    hà nội
    thím nhìn thế này mà thím còn hỏi đến bó chiêu
    HTML:
    <xen:if is="@enableResponsive">
     
  5. tuannt

    tuannt Thượng Đế

    Tham gia:
    07/04/2015
    Bài viết:
    247
    Đã được thích:
    138
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Mã:
    Các bạn cần tải file hình các icon Social vào thư mục Styles--Style của bạn:
    hi đã add thử rồi, nhưng cho mình hỏi đường dẫn icon up vào thư mục nào vậy bác, bên mình chỗ contact us chưa xuất hiện các icon
     
  6. Ái Nhi

    Ái Nhi Thượng Đế

    Tham gia:
    16/03/2015
    Bài viết:
    338
    Đã được thích:
    367
    Điểm thành tích:
    63
    Giới tính:
    Nữ
    Up theo đường dẫn : Styles-->Styles đang dùng
     
  7. Ái Nhi

    Ái Nhi Thượng Đế

    Tham gia:
    16/03/2015
    Bài viết:
    338
    Đã được thích:
    367
    Điểm thành tích:
    63
    Giới tính:
    Nữ
    @tuannguyenseo
    Bác để lại câu châm ngôn thật tuyệt vời.
    Đồng cảnh ngộ T_T
     
  8. kamchatka

    kamchatka Thượng Đế

    Tham gia:
    14/04/2015
    Bài viết:
    258
    Đã được thích:
    162
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Bán hàng rong
    Nơi ở:
    Nha Trang
    icon mxh thì up theo path thôi còn bên contact us thì là fort awesome mà
     
  9. Kem

    Kem Thượng Đế

    Tham gia:
    31/12/2015
    Bài viết:
    22
    Đã được thích:
    20
    Điểm thành tích:
    3
    Giới tính:
    Nam
    Nơi ở:
    vungtau
    @PVS cho em hỏi muốn thêm Font Awesome vô cái Contact us thì thay css sao ạ?
    ____________________
    Update: đã làm dc, sr đã tag PVS vô :D
     
    Chỉnh sửa cuối: 10/01/2016
  10. tqhuy

    tqhuy Thượng Đế

    Tham gia:
    30/05/2017
    Bài viết:
    39
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Cái này đẹp quá bác. Đang cần. Thank bác @Ái Nhi
     
  11. tqhuy

    tqhuy Thượng Đế

    Tham gia:
    30/05/2017
    Bài viết:
    39
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Up theo đường dẫn : Styles-->Styles đang dùng là thế nào bác @Ái Nhi ơi. Mình vào đến đấy nhưng ko biết up ảnh thế nào
    upload_2017-8-23_14-57-20.png
     
  12. Ái Nhi

    Ái Nhi Thượng Đế

    Tham gia:
    16/03/2015
    Bài viết:
    338
    Đã được thích:
    367
    Điểm thành tích:
    63
    Giới tính:
    Nữ
    Ý mình là up folder có tên extra vào thư mục chứa Style của bạn đang dùng đó. Ví dụ như bạn dùng syle Default thì đường dẫn là : /Styles--Default/extra
     
  13. tqhuy

    tqhuy Thượng Đế

    Tham gia:
    30/05/2017
    Bài viết:
    39
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nam

Chia sẻ trang này