Hướng dẫn chỉnh sửa giao diện Dspace – P2
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, xem qua thông tin cơ bản trước khi thực hiện tại đây
Xem các hướng dẫn khác tại: https://www.blogitcode.com/search/label/Dspace
Báo cáo bài tập nhóm môn Văn hóa kinh doanh và tinh thần khởi nghiệp Trình bà...
Hướng dẫn chỉnh sửa giao diện Dspace – P2
1. H ng d n ch nh s a giao di n Dspace – P2ướ ẫ ỉ ử ệ
[Dspace Tuts – Ch nh s a thanh Navbar]ỉ ử
Bài vi t này s h ng d n cách thay i màu s c và thêmbi u t ng icon cho thanh menu Navbar, xem quaế ẽ ướ ẫ đổ ắ ể ượ
thông tin c b n tr c khi th c hi nơ ả ướ ự ệ t i âyạ đ
Thay i màu s c colorđổ ắ
2. M c nh màu s c c a thanh navbar là en , bâygi mình s thay i màu c a nó theo tùy thích. u tiênmặ đị ắ ủ đ ờ ẽ đổ ủ Đầ ở
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ênthanh 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, âycó r t nhi u icon cácb 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ácicon này cácb 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âygi ch c n thêm o n mãcode icon vào tr c tiêu là c.ờ ỉ ầ đ ạ ướ đề đượ
Vd: thêmicon cho tiêu “H ng d n” nh sau :đề ướ ẫ ư
Tìm o n mã<fmt:message key=”jsp.layout.navbar-default.help”/> thêmvà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àư ậ đ ạ ỉ ẽ
3. <span class=”glyphicon glyphicon-book”></span><fmt:message key=”jsp.layout.navbar-default.help”/>
t o kho ng cách gi a cácicon 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áctiêu menu khác.ạ để ả ươ ự đề
![H ng d n ch nh s a giao di n Dspace – P2ướ ẫ ỉ ử ệ
[Dspace Tuts – Ch nh s a thanh Navbar]ỉ ử
Bài vi t này s h ng d n cách thay i màu s c và thêmbi u t ng icon cho thanh menu Navbar, xem quaế ẽ ướ ẫ đổ ắ ể ượ
thông tin c b n tr c khi th c hi nơ ả ướ ự ệ t i âyạ đ
Thay i màu s c colorđổ ắ](https://image.slidesharecdn.com/dspace3-181029015337/85/H-ng-d-n-ch-nh-s-a-giao-di-n-Dspace-P2-1-320.jpg)
