[Dspace Tuts – Thay đổi banner mặc định]
Mặc định banner của Dspace không được bắt mắt cho lắm 🙂 , bài viết này sẽ hướng dẫn thay đổi một chút cho vị trí này.
Bạn có thể tham khảo thử 2 cách sau:
Cách 1: dùng hình ảnh (thiết kế hình ảnh sau đó chèn hình ảnh này vào vị trí banner này).
- Thiết kế 1 banner sau đó chép vào thư mục image (đường dẫn C:\dspace\webapps\jspui\image)
- Mở file home.jsp (theo đường dẫn C:\dspace\webapps\jspui\home.jsp), dưới thẻ <dspace:layout> thêm đoạn code sau:
<div class=”banner-header-top hidden-xs”>
<img src=”<%= request.getContextPath() %>/image/banner_top.png” alt=”DSpace logo” />
</div>
- Mở tiếp file dspace-theme.css thêm đoạn code css để định dạng cho vị trí này:
.banner-header-top{
padding-top:5px;
padding-bottom:5px;
}
Cách 2: dùng hình ảnh kết hợp với module tin tức bên trên trong trang quản trị.
- Thiết kế 1 hình ảnh sau đó chép vào thư mục image (đường dẫn C:\dspace\webapps\jspui\image)
- Mở file home.jsp (theo đường dẫn C:\dspace\webapps\jspui\home.jsp), dưới thẻ <dspace:layout> thêm đoạn code sau:
<div class=”row banner-header-top”>
<div class=”col-md-2 hidden-xs”>
<img src=”<%= request.getContextPath() %>/image/images_elibrary.jpg” alt=”DSpace logo” class=”thumbnail”/>
</div>
<div class=”col-md-10 topNews”>
<%= topNews %>
</div>
</div>
- Mở tiếp file dspace-theme.css thêm đoạn code css để định dạng cho vị trí này:
.banner-header-top{
padding-top:5px;
padding-bottom:5px;
}
.topNews{
background: #0077a4;
color: #eff0f2;
height: 175px;
}
- Tiếp theo đăng nhập vào trang quản trị, vào phần chỉnh sửa tin tức , chọn chỉnh sửa tin tức bên trên và cập nhật thông tin.
Giải thích:
* Ở 2 cách trên đều có đoạn code css hidden-xs mục đích để ẩn vị trí này trên điện thoại có kích thước màn hình nhỏ, không gây nên cảm giác khó chịu cho người dùng. tham khảo thêm chức năng responsive utilities của Bootstrap.
* Mỗi cách đều có ưu điểm khác nhau, bạn có thể tham khảo cách nào cũng được, tuy nhiên cách 2 thi dữ liệu có thể thay đổi nhanh trong module tin tức ở trang quản trị. Và có thể tùy biến theo nhiều cách khác thông qua css không nhất thiết phải theo 2 cách trên.
