Bài viết này sẽ hướng dẫn cách thay đổi màu sắc và thêm biểu tượng icon cho thanh menu Navbar mặc định của giao diện Dspace
* Thay đổi màu sắc color
Mặc định màu sắc của thanh navbar là đen , bây giờ sẽ thay đổi màu của nó theo tùy thích, thực hiện rất đơn giản chỉ cần mở file dspace-theme.css thêm đoạn mã code sau :
/* thay doi mau cho navbar */.navbar-inverse { background:#205081 !important; }
#205081 là mã màu css, bạn có thể thay đổi mã màu theo tùy thích (sử dụng color picker) sau đó save lại dspace-theme.css , reload lại trang web để xem kết quả
* Thay đổi biểu tượng (icon) trên thanh navbar
- Truy cập website http://bootstrapdocs.com/v3.0.0/docs/
- Chuyển qua tab components , bạn sẽ nhìn thấy mục Glyphicons, ở đây có rất nhiều icon các bạn có thể chọn tùy thích, tương ứng với nó là các đoạn code css, để sử dụng các icon này các bạn chỉ việc coppy đoạn code này và đặt nó trong thẻ <span class=””></span>:
Vd : <span class=”glyphicon glyphicon-user”></span>(Chú ý : xóa bỏ dấu “.” Trước các đoạn mã code css)
- Tiếp theo mở file navbar-default.jsp (đường dẫn jspui >> layout >> navbar-default.jsp), bây giờ chỉ cần thêm đoạn mã code icon vào trước tiêu đề là được.
Vd: thêm icon cho tiêu đề “Hướng dẫn” như sau :
Tìm đoạn mã <fmt:message key=”jsp.layout.navbar-default.help”/> thêm vào trước nó đoạn code icon <span class=”glyphicon glyphicon-book”></span>, như vậy đoạn code hoàn chỉnh sẽ là
<span class=”glyphicon glyphicon-book”></span><fmt:message key=”jsp.layout.navbar-default.help”/>
Để tạo khoảng cách giữa các icon với tiêu đề có thể làm như sau: mở file dspace-theme.css thêm đoạn code css .glyphicon{padding-right:5px;}
- Save lại file navbar-default.jsp, reload lại trang web để xem thành quả. Làm tương tự cho các tiêu đề menu khác.
Tags
Dspace
