Hướng dẫn thay đổi màu nền, border, menu... trong nukeviet

Để  thay đổi màu nền,hinh nền ,menu… của giao diện thì bạn có rất nhiều cách…bạn có thể dùng  photoshop để chỉnh sủa màu của các hình ảnh trong thu mục images(url/…/themes/default/images). Bạn có thể dùng adobe dreamviewer để chỉnh sủa code hay vào chỉnh sữa code trong CSS. Sau đây mình sẽ hướng dẫn cho các bạn cách mà mình thường dùng để thay đổi màu nền,border, menu…cách ma mình thấy đơn giản  nhất đó là vào sửa code trong thư mục CSS. Những cái liên quan đến giao diện phần lớn dính dáng đến css. Để chỉnh sửa  code bạn mở file template.css (url/…/ themse/default(hay tên giao diện bạn chọn)/CSS/template.css). Mở file này với notepad…
Để thay đổi màu nền thì bạn tìm đến đoạn code sau trong file template.css.
body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
          background: #FFCCFF;
          line-height: 1.4;
để thay đổi màu nền thì bạn chỉ cần thay đổi đoạn code mình tô màu đỏ ở trên. Dưới đây là bảng màu trong thiết kế website_{:
     Bạn cũng có thể lấy mã màu ở link : http://translate.google.com.vn/translate?hl=vi&langpair=en|vi&u=http://html-color-codes.info/}


Để thay đổi màu cho border thì ban thay đoạn  code mình tô màu đỏ  theo màu trong bảng màu.
#container {
          width: 960px;
          margin: 0 auto;
          background-color: #fff;
          border-left:1px solid #fff;
          border-right:1px solid #fff;
          border-bottom:1px solid #fff;
          padding:2px;
}
Để tô màu cho menu,block thì thay mã màu khác vào đoạn code dưới trong file jqueryslidemenu.css (url/…/ themse/default/js/ queryslidemenu/ jqueryslidemenu.css)
}
.jqueryslidemenu ul li.current{
          background:#3366ff; /*tab link background during hover state*/
          color:#FFFFFF;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
          position: absolute;
          left: 0;
          display: block;
          visibility: hidden;
          background:#707038;

và trong thu mục promenu.css (url/…/ themse/default/css/ css/promenuu.css)
#smoothmenu2 {
        
}
.ddsmoothmenu-v {
          z-index: 5;
}
.ddsmoothmenu-v ul li {
    position: relative;
}

/* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    color:#ffccff;
    padding: 5px;
    white-space: nowrap;
          border-bottom:1px dashed #f5f5f5;
}

.ddsmoothmenu-v ul li img {
    position: absolute;
    right: 10px;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color:#ffccff;
          background:#fff url(../images/flowericon.png) no-repeat 5px 8px;
          padding-left:20px;
}

.ddsmoothmenu-v ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    background:#ffccff;
    color: #fff;
}

.ddsmoothmenu-v ul li a:hover {
    background: #F5F5F5 url(../images/flowericon.png) no-repeat 5px 8px; /*background of menu items during onmouseover (hover state)*/
    color:#990000;
}

/*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    top: 0;
    font-weight: normal;
    visibility: hidden;
          width:200px;
          border:1px solid #ffccff;
}

/* Holly Hack for IE \*/ * html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}
* html .ddsmoothmenu-v ul li a {
    height: 1%;
}

/* End */
Để thay đổi màu khi ta kích vào menu thi lam như sau:
Bạn mỡ file jqueryslidemenu.css  và thay những đoạn mình tô màu đỏ thành màu mà bạn thích trong bảng màu  trong link sau:
_{http://translate.google.com.vn/translate?hl=vi&langpair=en|vi&u=http://html-color-codes.info/}
@charset "utf-8";
/* CSS Document */
.jqueryslidemenu{
          font: bold 12px Arial;
          background:url("../../images/sidebox_bg.png") repeat scroll left top #FFFFFF;
          z-index:1000;
          position:absolute;
          bottom:0;
          left:0;
          width:100%;
}

.jqueryslidemenu ul{
           margin: 0;
           padding: 0;
           list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
          position: relative;
          display: inline;
          float: left;
          line-height:28px;
          height:28px;
          margin-right:2px;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
          display: block;
          color:#FFF;
          text-decoration:none;
          font-weight:bold;
          padding-left:8px;
          padding-right:8px;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
          display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
          color: white;
}

.jqueryslidemenu ul li a:hover{
          background:#E71E38; /*tab link background during hover state*/
          color:#FFFFFF;
}
.jqueryslidemenu ul li.current{
          background:#E71E38; /*tab link background during hover state*/
          color:#FFFFFF;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
          position: absolute;
          left: 0;
          display: block;
          visibility: hidden;
          background:#E71E38;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
          display: list-item;
          float: none;
          border-bottom:#E71E38 1px solid;
}
.jqueryslidemenuz ul li ul li:hover{ /*sub menus hover style*/
          background:#ffccff;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
          top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
          font: normal 12px Arial;
          width: 180px; /*width of sub menus*/
          margin: 0;
          line-height:28px;
          height:28px;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
          background:#E71E38;
          color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
          position: absolute;
          top: 12px;
          right: 7px;
}
Nguồn: http://webmanguonmo.com

Tweet