Responsive cho code PHP [CHIPVN] Remote Image Uploader

Thảo luận trong 'CSS' bắt đầu bởi datdaik000, 28/01/2016.

  1. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    Đây là code PHP cho phép người dùng upload ảnh lên các server khác nhau, chẳng hạn như: Imgur, Picasa, Postimage, ... Code này của Phan Thành Công bán tại đây, do người Việt làm nên mình khuyên anh em nên mua ủng hộ bác ấy. Cũng rẻ thôi, rẻ nhất chỉ có 12.5$ một bộ =D
    Mình cũng đang sử dụng code này thấy khá tốt. Tuy nhiên nhược điểm của nó là không responsive nên rất bất tiện khi các bạn sử dụng mobile cần upload ảnh. Vậy nên mình đã nghĩ ra ý tưởng này và mất 1 buổi tối để thực hiện, giúp các bạn dùng smartphone màn hình nhỏ cũng có thể up ảnh được. Demo: https://mamcongnghe.com/upanh ( chưa có subdomain do lười làm :v )

    Vài hình ảnh với đầy đủ các kích cỡ màn hình khác nhau =D

    [​IMG]
    Màn hình desktop thông thường ( Lớn nhất )

    [​IMG]
    Màn hình tablet khi xoay ngang

    [​IMG]
    Màn hình tablet khi xoay dọc

    [​IMG]
    Màn hình smartphone khi xoay ngang

    [​IMG]
    Màn hình smartphone khi xoay dọc ( nhỏ nhất )
    Cũng ok đấy chứ nhỉ ? =D Nào, xem demo chán rồi giờ làm thôi!

    Đầu tiên là phải có code. Cái này bạn nào có điều kiện thì mua theo link mình đưa bên trên, còn không thì chấp nhận dùng bản cũ thôi nhé :3

    Version 5.2.4
    Sau đó bạn cài đặt code lên host ( cái này nhiều người hướng dẫn rồi, mình không nói lại nữa ). Cài xong bạn sẽ thấy code chưa tối ưu responsive. Giờ ta bắt đầu phải làm việc!
    Việc đầu tiên là bạn cần mod lại index cho chuẩn. Cũng dễ thôi, bạn đăng nhập ftp và chỉnh sửa file index.php trong thư mục chứa code. Bạn có thể copy file mình đã chỉnh sửa sẵn bên dưới, sau đó sửa lại cho phù hợp nhé ;)
    Mã:
    
    
    
    
        
        
        MamCongNghe Uploader Tool
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
    
    
    
    

    Upload Photos

    $option) : ?>
    $text) : ?>
    Vậy là xong phần khung. Cơ mà chỉ là cái khung thôi, chưa có chỉnh sửa gì về lớp áo hết nên vẫn còn xấu. Giờ ta đi chỉnh. Bạn vào đường dẫn này trên ftp nhé
    Mã:
    /public_html/thư_mục_chứa_code/assets/css/style.css
    Lưu ý chỗ thư_mục_chứa_code. Nếu bạn up thẳng code lên host mà không qua thư mục nào thì có thể bỏ đi =D
    Bạn copy chỗ code này dán đè lên file đó ( nhớ xóa nội dung cũ đi ) là ok.
    Mã:
    * {
      margin: 0;
      padding: 0;
    }
    
    select:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
    
    select {
      -moz-outline: none;
    }
    
    html {
    
    }
    
    html, body {
      min-height: 100%;
      height: 100%;
    }
    
    body {
      font-size: 12px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: #CDCDCD;
      width: 100%;
      color: #333;
      line-height: 1.5em;
      background: #FFF;
          padding-top: 40px;
    }
    
    a {
      text-decoration: none!important;
      color: #17a0ff;
    }
    a:hover {
      color: #EB4D8A;
    }
    
    .wrapper {
      width: auto;
      height: auto;
      display: block;
    }
    .wrapper .container {
      max-width: 600px;
      display: block;
      background: #fff;
      -webkit-border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      margin-top: 5%!important;
      box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.6 );
    }
    .wrapper .container .header {
      color: #fff;
      font-size: 23px;
      background: #3D85C6;
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      font-weight: 500;
    }
    .wrapper .container .header .title {
      float: left;
      color: #FFF;
    }
    .wrapper .container .header .icon {
      float: right;
      font-size: 30px;
      line-height: 50px;
    }
    .wrapper .container .content {
      padding: 15px 30px;
      font-size: 1.15em;
    }
    .wrapper .container .content #loading {
      float: right;
      display: none;
    }
    .wrapper .container .content #loading img {
      width: 128px;
    }
    .wrapper .container .content .check {
      color: #555;
      cursor: pointer;
      font-size: 15px;
      font-weight: 600;
      margin-right: 5px;
      line-height: 1.6em;
    }
    .wrapper .container .content .check:hover {
      color: #000;
    }
    .wrapper .container .content .select {
      width: 100px;
      overflow: hidden;
      border: 1px solid #bbb;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      transition: background-color 0.2s, border 0.2s, color 0.2s;
      transition-delay: 0s;
      transition-timing-function: linear;
      -moz-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -moz-transition-delay: 0s;
      -moz-transition-timing-function: linear;
      -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -webkit-transition-delay: 0s;
      -webkit-transition-timing-function: linear;
      display: inline-block;
      position: relative;
      margin-top: 2px;
      height: 21px;
      line-height: 21px;
    }
    .wrapper .container .content .select:hover {
      border: 1px solid #999;
      box-shadow: 0 0px 1px #ccc;
    }
    .wrapper .container .content .select select {
      background: #fff;
      border: none;
      padding: 2px 5px;
      width: 120px;
      font-size: 13px;
      font-weight: 300;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .wrapper .container .content .select .icon {
      position: absolute;
      right: 6px;
      top: 5px;
      color: #333;
    }
    .wrapper .container .content .options {
      display: block;
      margin-bottom: 10px;
    }
    .wrapper .container .content .options .group {
      padding: 2px 0;
      height: 23px;
      line-height: 23px;
      display: block;
      clear: both;
    }
    .wrapper .container .content .options .group label {
      font-weight: 500;
      color: #555;
      float: left;
    }
    .wrapper .container .content .options .group .control {
      margin-left: 10px;
      float: left;
      color: #ccc;
      font-weight: 300;
      line-height: 20px;
    }
    .wrapper .container .content .options .group .control#upload-mode a {
      color: #666;
      transition: background-color 0.2s, border 0.2s, color 0.2s;
      transition-delay: 0s;
      transition-timing-function: linear;
      -moz-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -moz-transition-delay: 0s;
      -moz-transition-timing-function: linear;
      -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -webkit-transition-delay: 0s;
      -webkit-transition-timing-function: linear;
    }
    .wrapper .container .content .options .group .control#upload-mode a:hover, .wrapper .container .content .options .group .control#upload-mode a.active {
      color: #17a0ff;
    }
    .wrapper .container .content .options .group.hide {
      display: none;
    }
    .wrapper .container .content .button {
      display: inline-block;
      vertical-align: middle;
      background: #3D85C6;
      border: none;
      border-radius: 3px;
      height: 32px;
      line-height: 32px;
      padding: 0 8px;
      font-weight: 400;
      color: #fff;
      cursor: pointer;
      font-size: 13px;
      margin: 0 3px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .wrapper .container .content .button .icon {
      margin-left: 5px;
    }
    .wrapper .container .content .button:hover {
    
    }
    .wrapper .container .content .button.hide {
      display: none;
    }
    .wrapper .container .content .button.green {
      background: #11c220;
    }
    .wrapper .container .content .button.green:hover {
      background: #12af1e;
    }
    .wrapper .container .content .button.black {
      background: #504855;
    }
    .wrapper .container .content .button.black:hover {
      background: #3d3741;
    }
    .wrapper .container .content .upload-process .item, .wrapper .container .content .transload-process .item {
      border-bottom: 1px solid #DDDDDD;
      padding: 5px;
      overflow: hidden;
    }
    .wrapper .container .content .upload-process .item:hover, .wrapper .container .content .upload-process .item:hover, .wrapper .container .content .transload-process .item:hover, .wrapper .container .content .transload-process .item:hover {
      background: #F3F3F3;
    }
    .wrapper .container .content .upload-process .item span, .wrapper .container .content .transload-process .item span {
      display: inline-block;
      float: left;
      margin-right: 5px;
    }
    .wrapper .container .content .upload-process .item.waiting .status .icon, .wrapper .container .content .transload-process .item.waiting .status .icon {
      color: #aaa;
    }
    .wrapper .container .content .upload-process .item.uploaded .status .icon, .wrapper .container .content .transload-process .item.uploaded .status .icon {
      color: #309320;
    }
    .wrapper .container .content .upload-process .item.uploadfail .status .icon, .wrapper .container .content .transload-process .item.uploadfail .status .icon {
      color: #aa262d;
    }
    .wrapper .container .content .upload-process .item .name input, .wrapper .container .content .transload-process .item .name input {
      width: 200px;
      color: #2eace8;
    }
    .wrapper .container .content .upload-process .item .result input, .wrapper .container .content .transload-process .item .result input {
      width: 235px;
    }
    .wrapper .container .content .upload-process .item .result input[disabled], .wrapper .container .content .transload-process .item .result input[disabled] {
      color: #bbb;
    }
    .wrapper .container .content .upload-process .item .loading, .wrapper .container .content .transload-process .item .loading {
      display: none;
    }
    .wrapper .container .content .upload-process .item .transparent, .wrapper .container .content .transload-process .item .transparent {
      background: transparent;
      border: none;
      font-style: 12px;
      padding: 3px 5px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: #555;
    }
    .wrapper .container .content .upload-process .item .transparent:focus, .wrapper .container .content .transload-process .item .transparent:focus {
      font-weight: 500;
    }
    .wrapper .container .content .upload-process .item .remove, .wrapper .container .content .transload-process .item .remove {
      float: right;
      cursor: pointer;
      color: #ccc;
    }
    .wrapper .container .content .upload-process .item .remove:hover, .wrapper .container .content .transload-process .item .remove:hover {
      color: #ff0000;
    }
    .wrapper .container .content .upload-process .item .refresh, .wrapper .container .content .transload-process .item .refresh {
      display: none;
      float: right;
      cursor: pointer;
      color: #8a10f9;
    }
    .wrapper .container .content .upload-process .item .refresh:hover, .wrapper .container .content .transload-process .item .refresh:hover {
      color: #780dda;
    }
    .wrapper .container .content .transload-process {
      display: none;
    }
    .wrapper .container .content .transload-process textarea {
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding: 3px 5px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      resize: vertical;
      border: 1px solid #ddd;
    }
    .wrapper .container .content .upload-process, .wrapper .container .content .transload-process .list {
      max-height: 100px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .wrapper .container .content #results .links {
      display: none;
      margin-top: 10px;
    }
    .wrapper .container .content #results .links .tabs {
      overflow: hidden;
    }
    .wrapper .container .content #results .links .tabs .tab {
      display: inline-block;
      background: #eaeaea;
      padding: 3px 6px;
      cursor: pointer;
      color: #888;
      transition: background-color 0.2s, border 0.2s, color 0.2s;
      transition-delay: 0s;
      transition-timing-function: linear;
      -moz-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -moz-transition-delay: 0s;
      -moz-transition-timing-function: linear;
      -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
      -webkit-transition-delay: 0s;
      -webkit-transition-timing-function: linear;
    }
    .wrapper .container .content #results .links .tabs .tab:hover, .wrapper .container .content #results .links .tabs .tab.active {
      color: #555;
      text-shadow: 0 1px 0 #eee;
      background: #ccc;
    }
    .wrapper .container .content #results .links textarea {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      padding: 3px 5px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      resize: vertical;
      border: 1px solid #ddd;
    }
    .wrapper .container .content.footer {
      background: #EBEBEB;
      position: relative;
      height: 32px;
    }
    .wrapper .container .content.footer .action.transload {
      display: none;
    }
    .wrapper .container .content.footer .copyright {
      position: absolute;
      right: 20px;
      bottom: 20px;
      font-size: 11px;
      color: #888;
      text-shadow: 0 1px 0 #fff;
    }
    
    /* CUSTOM CSS MOD */
    
    .container.footer-container {
        margin-top: 20px!important;
        padding: 20px;
        max-height: 800px;
    }
    
    .container.footer-container .left {
        float: left;
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px 0;
    }
    
    .container.footer-container .right {
        float: right;
        max-width: 45%;
        padding: 10px 0;
    }
    
    li {
        list-style: none;
    }
    
    .footer-container .left .title-f,.footer-container .right .title-f {
        background: #3D85C6;
        color: #FFF;
        padding: 5px 10px;
        white-space: nowrap;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
        text-align: center;
        display: block;
    }
    
    .footer-container .left .term,.footer-container .right .term {
        margin-top: 10px;
        padding-left: 10px;
    }
    
    .footer-container .left .term li:before {
        content: '\f00c';
        font-family: fontawesome;
        padding-right: 2px;
    }
    
    .footer-container .right .term li {
        margin-bottom: 10px!important;
    }
    
    .footer-container .right .term li.fb_fanpage,.footer-container .right .term li.fb_group {
        background: #3a5795;
        color: #FFF;
        padding: 5px 10px;
        border-radius: 5px;
    }
    
    .footer-container .right .term li.fb_fanpage:before {
        content: '\f082';
        font-family: fontawesome;
        padding-right: 5px;
    }
    
    .footer-container .right .term li.fb_group:before {
        content: '\f09a';
        font-family: fontawesome;
        padding-right: 5px;
    }
    
    .footer-container .right .term li.website {
        background: #1976d2;
        color: #FFF;
        box-shadow: 1.5px 2.598px 5px 0px rgba( 0, 0, 0, 0.2 );
        border-radius: 5px;
        padding: 5px 10px;
    }
    
    .footer-container .right .term li.website:before {
        content: '\f007';
        font-family: fontawesome;
        padding-right: 5px;
    }
    
    /* CSS MOD NAV */
        #logo_small { float: left; }
    
        #logo_small a
        {
            display: block;
            line-height: 20px;
            transform-style: preserve-3d;
            background: transparent!important;
        }
        .activeSticky #logo_small a
        {
            height: 20px;
            line-height: 20px;
        }
        #logo_small a:hover
        {
            color: rgb(0, 0, 0);
        }
        #logo_small img
        {
            width: 145px;
            display: inline-block;
            vertical-align: top;
            position: relative;
            top: 50%;
            -webkit-transform:  translateY(-50%); -moz-transform:  translateY(-50%); -o-transform:  translateY(-50%); -ms-transform:  translateY(-50%);-webkit-transform:  translateY(-50%); -moz-transform:  translateY(-50%); -o-transform:  translateY(-50%); -ms-transform:  translateY(-50%);transform: translateY(-50%);
        }
    .nav {
        width: 100%;
        background: #1976d2;
        padding: 10px 0;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.6 );
        position: fixed;
        top: 0;
        height: 40px;
        z-index: 9999999999999;
    }
    .nav ul {
        padding-left: 20px;
    }
    .nav ul li { display: inline-block;border-radius: 3px; }
    .nav ul li a {
        display: inline-block;
        padding: 5px 10px;
        color: #FFF;
        height: 30px;
        line-height: 30px;
        font-size: 11pt;
        border-radius: 3px;
        font-weight: 600;
        font-family: roboto;
    }
    .nav ul li a:hover {
        background: #FFF;
        color: #3D85C6;
    }
    .nav ul li:hover a {
        color: #3D85C6;
    }
    .nav ul li a {
        color: #FFF;
    }
    .nav ul li.search {
        background: transparent!important;
    }
    #searchbar i {
        font-size: 15px;
        color: #7D7D7D;
        position: absolute;
        top: 5px;
        right: 5px;
    }
    
    #searchbar .searchform {
        line-height: 20px;
        position: relative;
        display: block;
    }
    #searchbar #googlesearchquery {
        width: 215px;
        height: 25px;
        background: #FFFFFF;
        color: #595959;
        border-radius: 10px;
        line-height: 25px;
        padding: 0 10px;
        padding-right: 25px;
        text-align: right;
        border: 2px solid #FFF;
        transition: 0.3s ease-in-out;
    }
    
    #searchbar #googlesearchquery:focus {
        border-radius: 10px;
        border: 2px solid #595959;
        outline: none;
    }
    
    #searchbar {
        border: 0!important;
        outline: none;
    }
    
    #searchbar fieldset {
        border: none;
    }
    
    /* FOOTER BOTTOM */
    /*BACK TO TOP*/
    #back-to-top {
        background: #fff;
        display: block;
        font-size: 30px;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -khtml-border-radius: 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -khtml-border-radius: 100%;
        border-radius: 100%;
        color: #293034;
        text-align: center;
        line-height: 47px;
        height: 47px;
        width: 47px;
        -webkit-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        -moz-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        -khtml-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        -webkit-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        -moz-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        -khtml-box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        box-shadow: 2px 3.464px 6px 0px rgba( 0, 0, 0, 0.2 );
        transition: 0.3s ease-in-out;
        opacity: 0;
        color: #000;
        font-weight: 500;
        font-size: 18px;
        position: fixed;
        right: 15px;
        bottom: 50px;
    
    }
    #back-to-top:hover {
    
    }
    #back-to-top.show {
        opacity: 1;
    }
    .block-top a {
      text-decoration: none!important;
      font-size: 25px;
      font-family: roboto;
    }
    
    /* BEGIN FOOTER */
    
    footer {
        background: #1B1B1B;
        color: rgba(255,255,255,.8);
    }
    
    .footer {
        border-top: 1px solid rgb(25, 118, 210)!important;
        margin-top: 30px;
    }
    .footerLegal .pageContent {text-align: left;}
    .footerLegal .pageContent .debugInfo {text-align: right;}
    
    #footer {
        clear: both;
        min-height: 100px;
        padding: 20px 0 25px;
    }
    .footer {
        background: #FFFFFF;
        clear: both;
    }
    
    .footer .pageContent
    {
        font-size: 11px;
    color: #a5cae4;
    overflow: hidden;
    zoom: 1;
    }
    
    .footer-left {
        float: left;
        width: 300px;
        padding: 15px 0;
        margin-left: 20px;
    }
    
    .title {
        font-size: 18px;
        font-family: roboto;
        font-weight: 600;
        color: #1976D2;
        width: 100%;
    }
    
    .content {
        display: block;
        margin-top: 10px;
        color: #B3B3B3;
    }
    
    .child {
        margin-bottom: 20px;
        padding: 0 20px;
        padding-top: 15px;
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
    }
    .child.fourth {
        overflow: visible;
        width: 204px;
    }
    .child.fourth .ad_image_footer {  }
    .child.fourth .ad_image_footer img { height: 170px; }
    
        .footer a,
        .footer a:visited
        {color: #B3B3B3;
    padding: 5px;
    display: block;transition: 0.3s ease-in-out;}
            .footer a:hover,
            .footer a:active
            {
                color: rgb(61, 133, 198);
                text-decoration: none;
            }
        .footer .choosers
        {
            padding-left: 5px;
    float: left;
    overflow: hidden;
    zoom: 1;
        }
            .footer .choosers dt
            {
                display: none;
            }
            .footer .choosers dd
            {
                float: left;
    
            }
                .footerLinks a.globalFeed
                {
                    width: 14px;
                    height: 14px;
                    display: block;
                    text-indent: -9999px;
                    white-space: nowrap;
                    background: url('styles/default/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365/bet365 có những phương thức nạp tiền nào_link vào bet365_điểm số trực tiếp bet365-ui-sprite.png') no-repeat -112px -16px;
                    padding: 0;
                    margin: 5px;
                }
    .footerLegal {background: #545454;padding: 10px 0;}
    .footerLegal .pageContent
    {
        font-size: 12px;
        overflow: hidden;zoom:1;
        padding: 10px 0 10px;
        text-align: center;
    }
    .footerLegal .pageContent a:link {color: #FFFFFF!important;}
    
    .footerLegal ul#legal li.choosers a {
        color: #B3B3B3!important;
        padding: 3px 10px;
        text-transform: uppercase;
        font-family: Kanit, sans-serif;
    }
    .footerLegal ul#legal li.choosers a:hover {
        color: #1976D2!important;
        text-decoration:none;
    }
    footer #legal .material-icons {
        font-size: 12px;
    }
        #copyright
        {
            color: rgb(255, 255, 255);
            float: right;
        }
        #legal
        {
            float: left;
        }
            #legal li
            {
                float: left;
    
                margin-left: 10px;
            }
    
    @media (max-width:900px) {
        .Responsive #copyright { float: none; }
    }
    
    @media (max-width:550px)
    {
        .Responsive #legal li {
           margin-bottom: 10px;
        }
    }
    @media (max-width:800px){
        .child.third {display:none}
    }
    @media (max-width:640px) {
        .child.second {display:none}
    }
    @media (max-width:480px) {
        .child.first {
            float: none;
            margin: 15px auto;
        }
        .footer-left {
            float: none;
            margin: 0 auto;
        }
        .footer-left .title {
        text-align: center;
        margin: 0 auto;
        display: block;
         }
    }
    /* END FOOTER */
    
    /* CSS FOR BREADCRUMB */
    .breadBoxTop nav {
        float: left;
    }
    
    .breadBoxTop
    {
    padding-top: 35px;
    padding-bottom: 0;
    padding-left: 0;
        margin-bottom: 10px;
    overflow: hidden;
    zoom: 1;
    clear: both;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(225, 229, 231);
    }
    
    .breadBoxTop .topCtrl
    {
        margin: 10px 0;
    float: right;
    line-height: 24px;
    
    }
    
    .breadcrumb
    {
        font-size: 14px;
    overflow: hidden;
    zoom: 1;
    max-width: 100%;
    box-sizing: border-box;
    height: 40px;
    border: none;
    padding-left: 30px;
    }
    
    .breadcrumb.showAll
    {
        height: auto;
    }
    
    .breadcrumb .boardTitle
    {
        display: none;
    
    }
    
    .breadcrumb .crust
    {
        display: block;
    float: left;
    position: relative;
    zoom: 1;
    max-width: 50%;
    
    }
    
    .breadcrumb .crust a.crumb
    {
        cursor: pointer;
        color: rgb(72, 71, 71);
    text-decoration: none;
    padding: 0 10px;
    margin-bottom: -1px;
    border-bottom: 1px solid #f0f0f2;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    _border-bottom: none;
    line-height: 42px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
    }
    
        .breadcrumb .crust a.crumb > span
        {
            display: block;
            position:relative;
            text-overflow: ellipsis;
            word-wrap: normal;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100%;
            color:#495556;
            font-size: 16px;
        }
        .breadcrumb .crust:first-child a.crumb,
        .breadcrumb .crust.firstVisibleCrumb a.crumb
        {
            padding-left: 0;
    
        }
    
        .breadcrumb .crust:last-child a.crumb
        {
    
            position:relative;
        }
        .breadcrumb .crust:last-child a.crumb > span {
        color: #0ba29d;
    }
        .breadcrumb .crust a.crumb span {
            position:relative;
        }
    
    .breadcrumb .crust .arrow
    {
        color: rgb(187, 187, 187);
        position: absolute!important;
        right: -5px;
        top: 0px;
        z-index: 50;
    }
    
    .breadcrumb .crust .arrow span
    {
        border-color: transparent;
    -moz-border-right-colors: ;
    display: block;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    
    }
    
    .breadcrumb .crust:hover a.crumb
    {
        color: rgb(41, 122, 160);
    
    }
    
    .breadcrumb .crust:hover .arrow span
    {
        border-left-color: ;
    }
    
        .breadcrumb .crust .arrow
        {
            /* hide from IE6 */
            _display: none;
        }
    
    .breadcrumb .jumpMenuTrigger
    {
        font-size: 24px;
    color: rgb(72, 71, 71);
    background-color: transparent;
    padding-right: 10px;
    padding-left: 10px;
    display: inline-block;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    
    }
    
    .breadcrumb
    {
        height: 42px;
    }
    .breadcrumb .crust a.crumb,
    .breadcrumb .crust .arrow,
    .breadcrumb .crust.placeholder .arrow,
    .breadcrumb .jumpMenuTrigger
    {
        line-height: 42px;
    }
    
    .breadcrumb .crust .arrow, .breadcrumb .crust .arrow span
    {
        border-top-width: 21px;
        border-bottom-width: 21px;
    }
    .breadcrumb .crust .arrow span
    {
        top: -21px;
    }
    
        .breadcrumb .crust a.crumb
        {
            float: left;
        }
        .breadcrumb .crust .arrow
        {
            display: block;
            float: left;
            border: none;
            height: auto;
            width: auto;
        }
        .breadcrumb .crust:last-child .arrow {
            display: none;
        }
        .breadcrumb .crust.placeholder .arrow span
        {
            display: none;
        }
    
    @media (max-width:480px)
    {
        .Responsive .breadBoxTop.withTopCtrl
        {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
    
        .Responsive .breadBoxTop.withTopCtrl nav
        {
            display: table-header-group;
        }
    
        .Responsive .breadBoxTop.withTopCtrl .topCtrl
        {
            display: table;
            margin-top: 5px;
            text-align: center;
            float: none;
            width: 100%;
        }
        .Responsive .breadBoxTop.withTopCtrl .topCtrl a.callToAction {display: block;}
    }
    
    /* CSS MOD FOR SCROLLBAR */
    ::-webkit-scrollbar {
          width: 7px;
          height: 7px;
          display: block;
    }
    ::-webkit-scrollbar-thumb {
          background-color: rgb(25, 118, 210);
    }
    /*END CSS MOD FOR SCROLLBAR /
    
    /* RESPONSIVE */
    @media (max-width:600px) {
    .wrapper .container { margin-top:5%!important; }
    .container.footer { margin-top: 20px!important; }
    }
    @media (max-width:860px) {
    .nav ul li.upload {display:none!important;}
    }
    @media (max-width:740px) {
    .nav ul li.resource {display:none!important;}
    }
    @media (max-width:570px) {
    .nav ul li.forum {display:none!important;}
    }
    @media (max-width:500px) {
    #logo_small { display:none!important; }
    }
    File css này mình đã tinh chỉnh sao cho responsive hoàn toàn với mọi kích thước rồi. Còn lại màn hình cỡ nhỏ quá như S40 thì chưa kịp test, bạn nào test hộ mình nhé =D Cơ mà hình như S40 vào cũng chả up được ảnh đâu :v

    Đã đính kèm file index.php và style.css cho các thánh lười :v Download về nhớ sửa file index.php rồi hãy upload lên host. Chúc may mắn!
    Mã:
    Pass Unzip: mamcongnghe.com

     

    Các file đính kèm:

    • file.zip
      Kích thước:
      8.6 KB
      Đọc:
      31
    Quan tâm nhiều
    GIF CSS
    GIF CSS bởi DHH, 07/04/2020 lúc 16:34:01
    Bài viết mới
    GIF CSS
    GIF CSS bởi DHH, 07/04/2020 lúc 16:34:01
    TD2308, MacKen, Blue and 1 other person like this.
  2. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    Không liên quan, nhưng Mầm Công Nghệ bên em sử dụng SSL loại nào thế :D
     
    agrione thích bài này.
  3. agrione

    agrione Thượng Đế

    Tham gia:
    07/09/2015
    Bài viết:
    120
    Đã được thích:
    94
    Điểm thành tích:
    28
    Giới tính:
    Nam
    Cùng chủ đề, nhưng câu hỏi khác là bác mua ở đâu, bao nhiêu $ lại có màu xanh thế
     
  4. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    À e mua ssl ở comodo loại rẻ nhất các bác ạ :)
     
  5. tri78

    tri78 Thượng Đế

    Tham gia:
    13/05/2015
    Bài viết:
    306
    Đã được thích:
    257
    Điểm thành tích:
    63
    Giới tính:
    Nam
    Comodo nó cho dùng thử 3 tháng, anh em nào test cũng được đó.
     
  6. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    vâng bác e dùng thử rồi chơi luôn :))
     
  7. dungvd3

    dungvd3 Thượng Đế

    Tham gia:
    25/03/2016
    Bài viết:
    12
    Đã được thích:
    6
    Điểm thành tích:
    3
    Demo:http://upanh.16mb.com/
    Code up ảnh Free đầy trên mạng . Download về chỉnh sửa Code tí là đc.đâu cần mua
     
  8. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    đệt, trẩu nữa ! Đã report admin.
     
  9. dungvd3

    dungvd3 Thượng Đế

    Tham gia:
    25/03/2016
    Bài viết:
    12
    Đã được thích:
    6
    Điểm thành tích:
    3
    Trẩu cái gì người ta nói đúng, kêu người ta trẩu...Đã Report Admin
     
  10. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    lạy bác. Em đưa cái link lù lù trên kia rồi, bác còn show cái demo lên đây, rồi nói code share đầy trên mạng -_- Thế e hỏi bác e nói không share ở đâu à? Và bác quăng site lên đây làm gì?
     
  11. dungvd3

    dungvd3 Thượng Đế

    Tham gia:
    25/03/2016
    Bài viết:
    12
    Đã được thích:
    6
    Điểm thành tích:
    3
    hehe em xin lỗi bác em chưa đọc hết :V
     
    datdaik000 and THB like this.
  12. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    Không có gì bạn à :) Nói chuyện hiểu nhau thôi :D
    Mình tưởng bạn spam nên ... có gì hơi nóng cho Xin lỗi :D
     
    THB thích bài này.
  13. Kind

    Kind Thượng Đế

    Tham gia:
    22/02/2016
    Bài viết:
    19
    Đã được thích:
    15
    Điểm thành tích:
    3
    Giới tính:
    Nam
    k đc cậu à .lỗii
     
  14. datdaik000

    datdaik000 Thượng Đế

    Tham gia:
    24/03/2015
    Bài viết:
    1,891
    Đã được thích:
    1,447
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    Student
    Nơi ở:
    Nam Định
    ?
     
  15. TD2308

    TD2308 Thượng Đế

    Tham gia:
    17/03/2016
    Bài viết:
    151
    Đã được thích:
    112
    Điểm thành tích:
    43
    Giới tính:
    Nam

Chia sẻ trang này