Xin style hutek.info của bac Hung Vu

Thảo luận trong 'Style & Template Questions' bắt đầu bởi Lil.Tee, 26/4/13.

1votes
5/5, 1 vote

  1. Lil.Tee

    Lil.Tee Member

    Bài viết:
    405
    Likes :
    116
    Như title bác Hung Vu share cho a e với ạ :D
     
    Đang tải...
  2. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Biết xin quá ha =))

    Bác hungvu có ok kg? Mình mạn phép rip thử xem được không :D
     
    Lil.Tee thích bài này.
  3. Lil.Tee

    Lil.Tee Member

    Bài viết:
    405
    Likes :
    116
    :D :D
     
  4. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    có xem qua, bác ấy có dùng Responsive nhưng chỉ áp dụng cho cái side bar thì phải
     
  5. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Skin này rip cực chua =))
    Có thấy phần chọn background 6 màu nhưng lại để display: none, chưa hiểu là cái gì
     
    Lil.Tee thích bài này.
  6. Hung Vu

    Hung Vu Verified User

    Bài viết:
    288
    Likes :
    230
    Thôi các bác tha cho cháu nó, cháu nó còn bé lắm
     
    dinhchi thích bài này.
  7. Lil.Tee

    Lil.Tee Member

    Bài viết:
    405
    Likes :
    116
    Bác share đi bác :D
     
  8. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    :D để display:none là đúng rồi mà.
    Khi bác click vào thì nó thành display:block và hiện ra, tham khảo tut tại đây
    Bác thử tham khảo ý kiến mình nhé, còn cái đổi background thì chắc là thế này, ko biết đúng ko
    Tải file js này về, up lên, include nó vào.
    Thêm đoạn này vào EXTRA.css
    Mã:
    body.bg1, .bg1 .maintitle, .bg1 #header, .bg1 .footer, .bg1 #SignupButton .inner, .bg1 .footerLegal .pageContent, .bg1 .node .forumNodeInfo .nodeIcon, .bg1 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background1.jpg') no-repeat 50% 0 fixed !important; }
    body.bg2, .bg2 .maintitle, .bg2 #header, .bg2 .footer, .bg2 #SignupButton .inner,  .bg2 .footerLegal .pageContent, .bg2 .node .forumNodeInfo .nodeIcon, .bg2 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background2.jpg') no-repeat 50% 0 fixed !important; }
    body.bg3, .bg3 .maintitle, .bg3 #header, .bg3 .footer, .bg3 #SignupButton .inner,  .bg3 .footerLegal .pageContent, .bg3 .node .forumNodeInfo .nodeIcon, .bg3 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background3.jpg') no-repeat 50% 0 fixed !important; }
    body.bg4, .bg4 .maintitle, .bg4 #header, .bg4 .footer, .bg4 #SignupButton .inner,  .bg4 .footerLegal .pageContent, .bg4 .node .forumNodeInfo .nodeIcon, .bg4 .node .categoryForumNodeInfo .nodeIcon{ background: #282830 url('@imagePath/xenforo/xenfocus/background4.jpg') repeat 50% 0 fixed !important; }
    body.bg5, .bg5 .maintitle, .bg5 #header, .bg5 .footer, .bg5 #SignupButton .inner,  .bg5 .footerLegal .pageContent, .bg5 .node .forumNodeInfo .nodeIcon, .bg5 .node .categoryForumNodeInfo .nodeIcon{ background: #0e1e2d url('@imagePath/xenforo/xenfocus/background5.jpg') no-repeat 50% 0 fixed !important; }
    body.bg6, .bg6 .maintitle, .bg6 #header, .bg6 .footer, .bg6 #SignupButton .inner,  .bg6 .footerLegal .pageContent, .bg6 .node .forumNodeInfo .nodeIcon, .bg6 .node .categoryForumNodeInfo .nodeIcon{ background: #000 url('@imagePath/xenforo/xenfocus/background6.jpg') no-repeat 50% 0 fixed !important; }
    body.bg_custom, .bg_custom .maintitle, .bg_custom #header, .bg_custom .footer, .bg_custom #SignupButton .inner,  .bg_custom .footerLegal .pageContent, .bg_custom .node .forumNodeInfo .nodeIcon, .bg_custom .node .categoryForumNodeInfo .nodeIcon{ background-color: #000; background-attachment: fixed; background-repeat: repeat; }
    #bg1{ background-image: url('@imagePath/xenforo/xenfocus/background1_thumb.jpg') !important; }
    #bg2{ background-image: url('@imagePath/xenforo/xenfocus/background2_thumb.jpg') !important; }
    #bg3{ background-image: url('@imagePath/xenforo/xenfocus/background3_thumb.jpg') !important; }
    #bg4{ background-image: url('@imagePath/xenforo/xenfocus/background4_thumb.jpg') !important; }
    #bg5{ background-image: url('@imagePath/xenforo/xenfocus/background5_thumb.jpg') !important; }
    #bg6{ background-image: url('@imagePath/xenforo/xenfocus/background6_thumb.jpg') !important; }
    #custom_background span{
    display: block;
    float: left;
    width: 145px;
    height: 90px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    -moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    margin-right: 15px;
    cursor: pointer;
    background: #000 no-repeat 50% 50%;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    }
     
    #custom_background span:hover{
    -webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    -moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
    }
     
    #custom_url{
    clear: left;
    padding-top: 10px;
    text-align: center;
    }
     
    #custom_input{
    background: #222;
    background: rgba(0,0,0,0.5);
    border: 0;
    -webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    -moz-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
    padding: 0 10px;
    font-size: 20px;
    height: 40px;
    width: 780px;
    color: #fff;
    white-space: nowrap;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-right: 8px;
    }
     
    #custom_submit{
    line-height: 40px;
    font-size: 20px;
    display: inline-block;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    background: #686c73 url('@imagePath/xenforo/xenfocus/highlight.png') repeat-x 0 0;
    background: rgba(197,206,213,0.4) url('@imagePath/xenforo/xenfocus/highlight.png') repeat-x 0 0;
    text-shadow: #4c5057 0px -1px 0px;
    -webkit-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    -moz-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
     
    #custom_submit:hover{
    background-color: #898f96;
    background-color: rgba(197,206,213,0.6);
    }
     
    #toggle_background{
    display:none;
    margin: 0 -20px;
    }
     
    #custom_background {
    color: #fff;
    background: #34343c url('@imagePath/xenforo/xenfocus/slide_bg.jpg') repeat;
    position: relative;
    padding: 15px;
    padding-right: 0;
    -webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
    -moz-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
    box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
    }
     
    
    Đây là đoạn để gọi cái chọn bg ra. để đâu cũng đc, theo style thì đặt sau: <xen:hook name="page_container_content_top" /> trong PAGE_CONTAIER
    Mã:
    <div id='toggle_background'>
    <div id='custom_background'>
    <span id='bg1'></span>
    <span id='bg6'></span>
    <span id='bg5'></span>
    <span id='bg2'></span>
    <span id='bg3'></span>
    <span id='bg4'></span>
    <div id='custom_url'><input type='text' id='custom_input' placeholder="OR enter the URL to your background image and press Change" /><strong id='custom_submit'>Change</strong></div>
    </div>
    </div>
    Bác ý có ứng dụng tí thôi, cái gì cần ẩn thì cho display:none
    Mã:
    @media only screen and (max-width: 700px) {
     
    }
     
    thanhthanh and Lil.Tee like this.
  9. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    cái đổi background có thấy ở style nào rồi ấy, bê bên đó qua :D
     
  10. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    xenfocus uniform bạn ạ.
    Nói chung là cài cái đó rồi rip thì chả mấy
     
    Lê Tí and Hung Vu like this.
  11. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    chuẩn rùi, hình như là nó đấy :))
     
    Hung Vu thích bài này.
  12. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    P/S: tiện đây cho mình chút đánh giá về responsive của cái này để mình hoàn thiện với:http://muabantop.com/
    Categories 2 cột -> 1 cột
    Subforum 2 cột -> 1 cột
     
  13. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    vẫn chưa đúng về responsive nếu nhìn dưới foot vẫn còn thanh cuộn ;))
     
    dinhchi thích bài này.
  14. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    Theo ý kiến của mình thì bác @nttruong nhiệt tình quá đâm phá hoại đấy :D. được lòng 1 người mất lòng nhiều người.
    Mình ko khoái khoản rip style của người khác mấy, đơn giản là chúng ta ai cũng có 1 sở thích riêng và ai cũng muốn mình có 1 cái riêng, nếu như nta muốn share thì đã share rồi còn ko thì đừng rip làm gì.
    Trang nào cũng style như trang nào thì còn dùng làm gì nữa, nhàm lắm :D.
     
    nttruong and Hung Vu like this.
  15. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    à mình để đó đấy chứ, tại chưa được chuẩn lắm nên để đó nhỡ thiếu còn scroll sang mà xem chứ.
    Còn muốn mất thì
    Mã:
    @media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
    .pageWidth {
    min-width: 0;
    width: auto;
    margin: 0;
    overflow-x: hidden;
    }
     
  16. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    chủ yếu là mấy cái @media size và set css, cơ mà ngồi nghịch hồi hoa cả mắt X_X
     
  17. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    Cũng nhanh thôi mà, nắm rõ các class chủ yếu của xen là đc, đầu tiên là 2 cái sidebar và navigation, cứ thế mà quất theo screen width thôi
     
  18. Lê Tí

    Lê Tí Well-Known Member

    Bài viết:
    1,450
    Likes :
    620
    bác share cái login cho ae vọc tí :)
     
  19. dinhchi

    dinhchi Well-Known Member

    Bài viết:
    555
    Likes :
    293
    Mình dùng colorbox thôi
    còn đây là cái login box.
    Bác tải colobox về cài rồi gọi cái này ra
    Mã:
    <div style='display:none'>
    <div id='login1' style='padding:20px; background:#fff;'>
    <form id="pageLogin2" method="post" action="login/login">
    <dl class="ctrlUnit">
    <dd>
    <label>{xen:phrase your_name_or_email_address}:</label>
    </dd>
    <dd>
    <input id="ctrl_pageLogin_login2" class="loginform" type="text" value="" name="login" placeholder="Tên đăng nhập hoặc Email">
    </dd>
    </dl>
    <dl class="ctrlUnit">
    <dd>
    <label>{xen:phrase password}:</label>
    </dd>
    <dd>
    <input id="ctrl_pageLogin_password3" class="loginform" type="password" name="password" placeholder="Mật khẩu"></dd>
    <dd class="rememberPassword">
    <input id="ctrl_pageLogin_remember1" type="checkbox" value="1" checked="checked" name="remember">
    {xen:phrase stay_logged_in}
    </dd>
     
    <dt class="lostPasswordLogin"><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser" tabindex="106">{xen:phrase forgot_your_password}</a></dt>
    </dl>
    <dl class="ctrlUnit submitUnit">
    <dd>
    <input class="button primary" type="submit" data-loginphrase="Login" value="Đăng nhập">
    <a href="register" class="button primary">Đăng ký</a>
    </dd>
    </dl>
    <input type="hidden" value="1" name="cookie_check">
    <input type="hidden" value="" name="redirect">
    <input type="hidden" value="" name="_xfToken">
    </form>
    </div></div>
     
    Lê Tí thích bài này.
  20. phamhuudu

    phamhuudu Verified User

    Bài viết:
    1,749
    Likes :
    727
    Lập diễn đàn ra, rồi đi lấy style của nhau, nhái style y chang nhau! 1 mớ hỗn độn biết bao giờ diễn đàn ở VN mới có chất lượng đây?

    Bài viết thì sao chép của nhau, giao diện cũng sao chép của nhau, tên miền cũng tựa tựa nhau, thế cái gì là riêng?
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...