Responsive cho code PHP [CHIPVN] Remote Image Uploader

dcstylexf

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

1Xr3HiF.png

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

7e5Ym8T.png

Màn hình tablet khi xoay ngang

4dnIny7.png

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

8fM0cLJ.png

Màn hình smartphone khi xoay ngang

7x4Vhqt.png

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ã:
<?php
header('Content-type: text/html;charset=utf-8');

require_once './global.php';

$config = load_file('./includes/config.php');
$options = $config['options'];
?>
<!DOCTYPE html>
<html lang="vi">
<head>
    <!-- Force latest IE rendering engine or ChromeFrame if installed -->
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <title>MamCongNghe Uploader Tool</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="author" content="datdaik000">
    <meta name="keywords" content="mamcongnghe, uploader, tool, image uploader, remote upload">
    <meta name="description" content="Upload image for member of MamCongNghe">
    <link rel="shortcut icon" href="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/OS_Windows_8.png" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,600,400italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/js/jQuery-File-Upload-9.5.7/css/jquery.fileupload.css" rel="stylesheet">
    <meta property="og:type" content="website" />
    <meta property="fb:app_id" content="829965693736305" />
    <meta property="og:url" content="https://mamcongnghe.com/upanh/" />
    <meta property="og:image" content="https://mamcongnghe.com/styles/MCN/xenforo/logo.og.png" />
    <meta property="og:image:secure_url" content="https://mamcongnghe.com/styles/MCN/xenforo/logo.og.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="300" />
    <meta property="og:image:height" content="300" />
    <meta property="og:site_name" content="MamCongNghe" />
    <meta property="og:title" content="Image Uploader Tool">
    <meta property="og:description" content="Upload image for member of MamCongNghe. Fully responsive for mobile. Many servers for you to choose!" />
</head>
<body>
<div class="nav">
<ul>
<li id="logo_small">
<a href="https://mamcongnghe.com">
<img src="https://mamcongnghe.com/styles/MCN/xenforo/logo.png">           
</a>
</li>
<li class="search">
<div id="searchbar" style="
">
<fieldset id="GoogleSearch">
<form action="https://mamcongnghe.com/pages/search" class="searchform" id="cse-search-box" target="_blank">

<i class="fa fa-search" style="
"></i>
<input type="hidden" name="cx" value="000816221326557858029:utu4czubm1s">
<input type="hidden" name="ie" value="utf-8">
<input type="search" placeholder="Search using Smart-Search" name="q" id="googlesearchquery" class="textCtrl">

</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</fieldset>
</div>
</li>
<li class="home"><a href="https://mamcongnghe.com/" title="Diễn đàn công nghệ - Home" target="_blank">Trang Chủ</a></li>
<li class="forum"><a href="https://mamcongnghe.com/forums/" title="Diễn đàn công nghệ - Forum" target="_blank">Diễn Đàn</a></li>
<li class="resource"><a href="https://mamcongnghe.com/download" title="Diễn đàn công nghệ - Tài Nguyên" target="_blank">Download Tài Nguyên</a></li>
<li class="upload"><a href="https://mamcongnghe.com/upanh" title="Diễn đàn công nghệ - Upload Image Tool" target="_blank">Uploader Tool</a></li>
</ul>
</div>

<div class="breadBoxTop ">
                        <div class="pageContent pageWidth"><div class="">
                       

<nav>


    <fieldset class="breadcrumb" style="">
       
        <div class="boardTitle"><strong>Diễn Đàn Công Nghệ Thông Tin</strong></div>
   
        <span class="crumbs">
       
                <span class="crust homeCrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <a href="https://mamcongnghe.com" class="crumb" rel="up" itemprop="url"><span itemprop="title">Trang chủ</span></a>
                    <span class="arrow"><span>/</span></span>
                </span>
       
       
       
                <span class="crust selectedTabCrumb" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <a href="https://mamcongnghe.com/" class="crumb" rel="up" itemprop="url"><span itemprop="title">Diễn đàn</span></a>
                    <span class="arrow"><span>/</span></span>
                </span>
       
       
       
        </span>
    </fieldset>
</nav>
                           
                        </div></div>
                        </div>

    <div class="wrapper">
        <div class="container">
            <div class="header">
                <h1 class="title">Upload Photos</h1>
                <i class="icon icon-cloud-upload"></i>
            </div><!--/.header-->
            <div class="content">
                <div class="options">
                    <div class="group">
                        <label>Upload from:</label>
                        <div class="control" id="upload-mode">
                            <a href="javascript:void(0);" class="active computer" data-mode="computer">Computer</a> |
                            <a href="javascript:void(0);" class="url" data-mode="url">URL</a>
                        </div>
                    </div>
                    <?php foreach ($options as $name => $option) : ?>

                        <div class="group<?php echo count($option['options']) <= 1 ? ' hide' : ''; ?>">
                            <label><?php echo $option['label'];?>:</label>
                            <div class="control">
                                <?php if (isset($option['type']) && $option['type'] == 'select') : ?>
                                    <span class="select">
                                        <select name="<?php echo $name;?>">
                                            <?php foreach ($option['options'] as $value => $text) : ?>
                                            <option<?php echo $option['default'] == $value ? ' selected="selected"': '';?> value="<?php echo $value;?>"><?php echo $text;?></option>
                                            <?php endforeach;?>
                                        </select>
                                        <i class="icon icon-caret-down"></i>
                                    </span>
                                <?php else :?>
                                    <?php foreach ($option['options'] as $value => $text) : ?>
                                    <span class="check">
                                        <i data-type="radio" data-name="<?php echo $name;?>" data-value="<?php echo $value;?>" class="icon <?php echo $option['default'] == $value ? 'icon-check-circle-o' : 'icon-circle-o'?>"></i> <?php echo $text;?>
                                    </span>
                                    <?php endforeach;?>
                                <?php endif;?>
                            </div>
                        </div>

                    <?php endforeach;?>
                </div>
                <div class="upload-process"></div>
                <div class="transload-process">
                    <div class="input">
                        <textarea placeholder="Enter links here, each link separated by newline"></textarea>
                    </div>
                    <div class="list"></div>
                </div>
                <div id="results">
                    <div class="links">
                        <div class="tabs">
                            <div class="tab active" data-format="direct">Direct Link</div>
                            <div class="tab" data-format="bbcode">BB Code</div>
                            <div class="tab" data-format="html">HTML </div>
                        </div>
                        <textarea></textarea>
                    </div>
                </div><!--/#results-->
            </div><!--/.content-->
            <div class="content footer">
                <div class="group action upload">
                    <span class="button fileinput-button">
                        Add Files
                        <i class="icon icon-plus-circle"></i>
                        <input id="fileupload" type="file" name="files[]" multiple>
                    </span>
                    <button class="button green hide" id="upload">Upload <i class="icon icon-cloud-upload"></i></button>
                    <button class="button black hide" id="cancel-upload">Cancel <i class="icon icon-times-circle"></i></button>
                </div>
                <div class="group action transload">
                    <button class="button hide green" id="transload">Transload <i class="icon icon-cloud-upload"></i></button>
                    <button class="button hide black" id="cancel-transload">Cancel <i class="icon icon-times-circle"></i></button>
                </div>
                <div class="copyright">
                    Copyright &copy; 2010-2015
                </div>
            </div>
        </div><!--/.inner-->
   
        <div class="container footer-container">
    <div class="left">
      <span class="title-f">Quy Định Khi Sử Dụng Tool</span>
      <ul class="term">
        <li>Ảnh upload không quá 2MB</li>
        <li>Ảnh không liên quan đến chính trị, tôn giáo, sex, ...</li>
        <li>Khuyến cáo sử dụng server Imgur và Postimage cho chất lượng tốt nhất</li>
        <li>Ảnh upload bằng tool sẽ có đóng dấu bản quyền sử dụng tool</li>
      </ul>
  </div>
  <div class="right">
    <span class="title-f">Mọi thắc mắc vui lòng liên hệ qua</span>
    <ul class="term">
      <a href="https://fb.com/cnttpluscom"><li class="fb_fanpage">Fanpage Facebook MamCongNghe</li></a>
      <a href="https://fb.com/groups/mamcongnghe"><li class="fb_group">Group Facebook MamCongNghe</li></a>
      <a href="https://mamcongnghe.com"><li class="website">Website MamCongNghe.Com</li></a>
    </ul>
  </div>
  </div><!--/.inner-footer-->

    </div><!--/.wrapper-->

    <footer>
<div class="footer">
<div class="pageWidth">
<div class="pageContent">
<div class="footer-left">
  <span class="title">
    Chúng Tôi - MamCongNghe
  </span>
  <span class="content">
    Diễn đàn Mầm Công Nghệ V1 - Phiên bản thử nghiệm chờ giấy phép của bộ TTTT.
<br>
Website không chịu trách nhiệm nội dung thành viên đăng tải.

  </span>
  </div>


  <div class="child first">
    <span class="title">
      USEFUL
    </span>
<ul class="content">
                <li><a href="https://mamcongnghe.com/">Trang chủ</a></li>
                <li><a href="https://mamcongnghe.com/rules/">Quy định và Nội quy</a></li>
                <li><a href="https://mamcongnghe.com/forums/">Diễn đàn</a></li>
                <li><a href="https://mamcongnghe.com/Xenforo-Add-on-Free/">Tài nguyên</a></li>
                <li><a href="https://mamcongnghe.com/forums/xenforo-full-support-by-admin.49/">Xenforo</a></li>
</ul>
    </div>
  <div class="child second">
    <span class="title">
      INFOR
    </span>
    <ul class="content">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
  </div>
  <div class="child third">
    <span class="title">
      LINKS
    </span>
    <ul class="content">
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
    </ul>
  </div>

  <div class="child fourth">
  <span class="ad_image_footer">
  <a href="https://mamcongnghe.com/misc/contact" target="_blank" class="OverlayTrigger" title="Banner 250x300">
  <img src="https://i.imgur.com/MV9m0J3.png" title="Banner 250x300" alt="Banner 250x300">
  </a>
  </span>
  </div>


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

<div class="footerLegal">
<div class="pageWidth">
<div class="pageContent">
<div id="copyright"><a href="https://mamcongnghe.com/">MamCongNghe.Com</a>™ © 2015 | Design by <a href="https://plus.google.com/103501272685296012714" rel="author" target="_blank">Datdaik000</a>
</div>
<ul id="legal">

<li class="choosers">

<a href="https://mamcongnghe.com/misc/language" class="OverlayTrigger" target="_blank" rel="nofollow"><i class="material-icons"></i> Ngôn Ngữ</a>

</li>
<li class="choosers">
<a href="https://mamcongnghe.com/misc/style" class="OverlayTrigger" target="_blank" rel="nofollow"><i class="material-icons"></i> Giao Diện</a>
</li>

<li class="choosers"><a href="https://mamcongnghe.com/help/terms" target="_blank" rel="nofollow"><i class="material-icons"></i> Quy định và Nội quy</a></li>
<li class="choosers">
<a href="https://mamcongnghe.com/misc/contact" class="OverlayTrigger" target="_blank" rel="nofollow"><i class="material-icons"></i> Liên hệ</a>
</li>
</ul>

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

<a class="show" href="#" id="back-to-top" title="Back to top"><i class="fa fa-chevron-up"></i></a>
    </footer>

    <script>
if ($('#back-to-top').length) {
    var scrollTrigger = 100, // px
        backToTop = function () {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > scrollTrigger) {
                $('#back-to-top').addClass('show');
            } else {
                $('#back-to-top').removeClass('show');
            }
        };
    backToTop();
    $(window).on('scroll', function () {
        backToTop();
    });
    $('#back-to-top').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });
}
    </script>
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script src="assets/js/jQuery-File-Upload-9.5.7/js/vendor/jquery.ui.widget.js"></script>
    <script src="assets/js/jQuery-File-Upload-9.5.7/js/jquery.iframe-transport.js"></script>
    <script src="assets/js/jQuery-File-Upload-9.5.7/js/jquery.fileupload.js"></script>
    <script src="assets/js/imageuploader.js"></script>
    <script>
    CONFIG.ALLOWS_FILE_TYPES = /(<?php echo implode('|', $config['upload']['allow_file_types']);?>)$/i;
    CONFIG.MAX_FILE_SIZE = <?php echo $config['upload']['max_file_size'];?>;
    </script>
</body>
</html>

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/xenforo/xenforo-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
876
Được Like
1,458
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ế
 

dcstylexf

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

dcstylexf

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

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom