Moodle Vietnam: Chỉnh sửa header và footer trên giao diện moodle

Chào em,

- Để thêm footer thông thường em vào Site administration / Appearance / Themes / Theme em đang sử dụng. Ở ô Footnote em thêm chữ, hình ảnh và video... và Save changes - Xong!

- Còn footer như thaytro.net đang sử dụng thì phức tạp hơn 1 chút. Thầy phải mất mấy ngày mới code được (tự mò mẫn). Nhân tiện em hỏi thì thầy share luôn và vì cũng đang có ý định chỉnh lại Footer của thaytro.net.

- Để làm Footer như thaytro.net đang sử dụng, em cần có 2 phần HTML và CSS.

- Footer khi full màn hình:

responsive footer for moodle

- Footer khi zoom nhỏ màn hình: (có chế độ responsive)

3 colums footer for moodle

+ Phần 1: HTML em vào Site administration / Appearance / Additional HTML và thêm đoạn dưới đây vào ô Before BODY is closed

<footer>
<div class="splitter">Nếu bạn là người thông minh - Hãy sử dụng công cụ Tìm kiếm</div>
<ul>
    <li>
        <div class="icon" data-icon="T"></div>
        <div class="text">
            <h4>Tự giới thiệu</h4>
            <div>ThayTro.Net chuyên cung cấp cho người học các bài Practice Test sau mỗi Unit trong sách giáo khoa Tiếng Anh 10, 11 & 12, các đề kiểm tra 15 phút, 45 phút, đề thi học kì môn Tiếng Anh. Đặc biệt, chúng tôi còn cung cấp các đề Tuyển sinh vào 10 và đề thi thử tốt nghiệp THPT quốc gia. <a href="https://thaytro.net/mod/forum/discuss.php?d=521">Đọc Tiếp</a></div>
        </div>
    </li>
    <li>
        <div class="icon" data-icon="&"></div>
        <div class="text">
            <h4>Khóa học Thu phí</h4>
            <div>Bên cạnh đại đa số các khóa học miễn phí (70% đến 80%), ThayTro.Net sẽ thu phí 1 số khóa học – Paid courses (20% đến 30%). Các khóa học nào sẽ thu phí: Các đề kiểm tra thử gồm: 15 phút và 45 phút. Các đề thi thử học kì và đề thi tốt nghiệp quốc gia (TNQG). <a href="https://thaytro.net/mod/forum/discuss.php?d=524">Đọc Tiếp</a></div>
        </div>
    </li>
    <li>
        <div class="icon" data-icon="T"></div>
        <div class="text">
            <h4>Thanh toán</h4>
            <div>Khi Học truy cập vào 1 đường LINK chứa khóa học, hệ thống báo: Khóa học có Thu phí, Bạn không thể Tự ghi danh được. Hãy liên hệ với Admin theo sđt: 0987.252.353 hoặc Email: <a href="mailto:webthaytro.net@gmail.com">webthaytro.net@gmail.com</a> để mua Mã số vé (Mã truy cập) mới có thể vào khóa học đó được. <a href="https://thaytro.net/mod/forum/discuss.php?d=519
">Đọc Tiếp</a></div>
        </div>
    </li>
</ul>
</footer>

- Sau khi thử xong em nhớ thay các đoạn màu đỏ nha!

+ Phần 2: CSS Site administration / Appearance / Themes / Theme đang sử dụng - Custom CSS

/* Custom 3 col footer*/
@font-face {
    font-family: 'zocial', sans-serif;
}
[data-icon]:before {
    font-family: 'zocial';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition:  all .2s linear;
    transition: all .2s linear;
}
.clear {
    clear: both;
}

footer {
    background-color: #D3D3D3;
    position: relative;
    z-index: 1;
    padding-bottom: 35px;
}

footer .splitter {
    background-color: #3b5998;
    height: auto;
    width: auto;
    font-size: 16px;
    color: #fff;
    padding: 10px 30px;
}

footer > ul {
    list-style: none outside none;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 5px 0;
    position: relative;
    width: 95%;
}
footer > ul li {
    float: left;
    padding: 10px;
    width: 33.3%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
footer > ul li:first-child {
    padding-left: 0;
}
footer > ul li:nth-child(3) {
    padding-right: 0;
}
footer > ul li .icon {
    color: #999999;
    float: left;
    font-size: 80px;
    line-height: 80px;
}
footer > ul li .text {
    color: #848889;
    font-size: 13px;
    line-height: 20px;
    margin-left: 85px;
    position: relative;
    text-align: justify;
}
.text h4 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
.text a {
    border-bottom: 1px dotted transparent;
    color: #FF0000;
    font-weight: bold;
}
.text a:hover {
    border-color: #FFDD00;
}


@media screen and (max-width: 1000px){
    .links, .social, .copyright{
        float:none;
        text-align:center;
    }
    .social {
        position:relative;
        margin:10px 0;
    }
    .links li {
        display:inline-block;
        float:none;
    }
    .bar {
        position:relative;
    }
    .bar-wrap {
        margin-bottom:0;
    }
}
@media screen and (max-width: 835px)  {
    footer > ul li {
        float:none;
        width:auto;
    }
}
@media screen and (max-width: 768px)  {
    .links li {
        margin-right:5px;
    }
}

- Nhớ Purge all caches nha!

Còn banner (page header) thì có nhiều cách nhưng hiện tại thaytro.net đang sử dụng đoạn CSS sau:

/* Responsive banner all pages */
#page-header {
background-image: url();
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}

- Nhớ thay link màu đỏ bằng link hình ảnh banner của bạn.

- Nếu banner to và bị che một phần thì bạn sử dụng đoạn CSS sau:

.page-context-header .page-header-headings h1 {
    display: block;
    margin-top: 140px;
}

- Thay số 140px cho phù hợp với kích thước banner của bạn.

- Chúc bạn thành công!

Da, em cam on thay nhieu a!

Thầy cho em hỏi link màu đỏ thì làm thế nào để có được ạ?

1. Nếu em sử dụng hosting thì tốt nhất em tạo 1 folder (để mỗi khi upgrade sẽ dễ quản lí) rồi upload hình lên và lấy link (đường dẫn hình đó).

2. Upload hình lên các trang upload như: https://flickr.com, photobucket.com... rồi lấy direct link (phải lấy link trực tiếp nha). Thầy có hướng dẫn trên thaytro.net cách lấy direct link từ google drive, cần thì search nha!

3. Khi đăng 1 bài viết bất kì trong forum trên moodle, em chọn biểu tượng hình ảnh (Insert image) - Browse repositories - Upload a file - cũng có 1 đường dẫn của hình ảnh đó - sẽ tương đương direct link.

- Tuy em chọn cách nào phù hợp với em nha!

Ở phần này của em thêm không được thầy ạ.
Ảnh em tải lên bằng file ở trong khóa học để lấy link. Nhưng khi up lên theo thầy thì nó báo lỗi

@Ken Linh,

Từ hình ảnh bạn cung cấp cho thấy bạn đặt đoạn CSS của banner sai vị trí rồi! CSS mà bạn lại để ở html

- Còn banner (page header) thì có nhiều cách nhưng hiện tại thaytro.net đang sử dụng đoạn CSS sau: [đặt ở Custom CSS của theme bạn đang sử dụng nha]

/* Responsive banner all pages */
#page-header {
background-image: url();
background-repeat: no-repeat;
background-size: 100% auto;
background-position: left top;
}

- Nhớ thay link màu đỏ bằng link hình ảnh banner của bạn.

- Nếu banner to và bị che một phần thì bạn sử dụng đoạn CSS sau:

.page-context-header .page-header-headings h1 {
    display: block;
    margin-top: 140px;
}

- Thay số 140px cho phù hợp với kích thước banner của bạn.

- Chúc bạn thành công!

Em cảm ơn thầy.

Em làm đc rồi thầy ạ.

Em vào phần Ktra hình ảnh rồi copy

dán vào phần header cũng đc thầy ạ.

Em muốn lưu trữ dữ liệu.
Em muốn tải về các bài kiểm tra mà sinh viên đã làm để lưu trữ dữ liệu sau khi kiểm tra mà không biết phải làm thế nào. Em cũng ko tìm được hướng giải quyết thầy ạ.

Thầy Giúp em với ạ.
Em cảm ơn !!

Bạn thân mến,

Bạn không nên hỏi nhiều vấn đề khác nhau trong 1 bài viết nha, vì chức năng tìm kiếm sẽ không tìm kiếm được! Nếu bạn muốn hỏi vấn đề khác xin vui lòng mở chủ đề mới [bài viết mới]