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
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é
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é
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.
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
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 )
Đầ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
Add Files
Copyright © 2010-2015
Quy Định Khi Sử Dụng Tool
- Ảnh upload không quá 2MB
- Ảnh không liên quan đến chính trị, tôn giáo, sex, ...
- Khuyến cáo sử dụng server Imgur và Postimage cho chất lượng tốt nhất
- Ảnh upload bằng tool sẽ có đóng dấu bản quyền sử dụng tool
Mọi thắc mắc vui lòng liên hệ qua
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
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; }
}
Đã đí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
Nguồn https://mamcongnghe.com