Responsive cho code PHP [CHIPVN] Remote Image Uploader

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,979
Được Like
1,585
Đâ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


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


Màn hình tablet khi xoay ngang


Màn hình tablet khi xoay dọc


Màn hình smartphone khi xoay ngang


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

 

Đính kèm

  • file.zip
    8.6 KB · Lượt xem: 31

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
866
Được Like
1,410
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ượng Đế
Tham gia
07/09/2015
Bài viết
120
Được Like
103
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
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ế
 

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,979
Được Like
1,585
vâng bác e dùng thử rồi chơi luôn :))
 

datdaik000

Thượng Đế
Tham gia
24/03/2015
Bài viết
1,979
Được Like
1,585
Trẩu cái gì người ta nói đúng, kêu người ta trẩu...Đã Report Admin
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ì?
 

dungvd3

Thượng Đế
Tham gia
25/03/2016
Bài viết
12
Được Like
6
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ì?
hehe em xin lỗi bác em chưa đọc hết :V
 

Top Bottom