迅睿CMS网站模板修改

tjstar

   <!-- 主要css开始 -->

   <link href="/static/assets/icon/css/icon.css"rel="stylesheet" type="text/css" />

   <link href="/static/assets/global/css/pc.css"rel="stylesheet" type="text/css" />

   <!-- 主要css结束 -->

   <!-- 风格css开始 -->

   <link href="/static/default/web/css/style.css"rel="stylesheet" type="text/css" />

   <!-- 风格css结束 -->

   <!-- 系统懒人版js(所有自建模板引用)-->

   <script type="text/javascript">var is_mobile_cms ='';var web_dir = '/';</script>

   <script src="/api/language/zh-cn/lang.js"type="text/javascript"></script>

   <script src="/static/assets/global/plugins/jquery.min.js"type="text/javascript"></script>

   <script src="/static/assets/js/cms.js"type="text/javascript"></script>

   <!-- 系统懒人版js结束 -->

   <script src="/static/assets/global/plugins/bootstrap/js/bootstrap.min.js"type="text/javascript"></script>

<scriptsrc="/static/default/web/scripts/app.min.js"type="text/javascript"></script>

第一章static/tjstar/web/css/style.css修改

主要颜色

全局颜色：#40aae2修改为 #2ec7bb

标题背景色、页脚背景色：#2ec7bb

菜单点击、悬停、点击后颜色：#ffae4e 修改为#ee4866

菜单背景：#40aae2修改为 #2bbfb3

搜索页面标题颜色：#40aae2修改为 #ee5253

一、颜色修改1. 修改导航菜单背景颜色

.page-header.page-header-menu {

       background:#40aae2

例：修改为

background:#2ec7bb

2. 修改页脚背景颜色

.page-footer {

       background: #40aae2;

       color:#e6e6e5

修改为background: #2ec7bb

3. 修改顶部搜索框边框线条和颜色

.fc-search-keyword{

       border:1pxsolid #e1e5ec!important

4. 修改顶部header区域背景图片和颜色、高度

.page-header {

       opacity:1;

       filter:alpha(opacity=100);

       width:100%;

       margin:0;

       border:0;

       padding:0;

       height:126px;

       background-image:url("http://zt.tjstar.cn/uploadfile/img/banner_t05.jpg");

       background-size:100%;

背景颜色修改为：background-color:blue!important;

加上!important表示重要为强制显示

5. 修改顶部header区域搜索栏宽度、位置

.page-header-search{

       width:400px;

       float:left;

       padding-top:0;

       margin-left:120px

6. 修改顶部header菜单栏悬停时颜色

.page-header.page-header-menu .hor-menu .navbar-nav>li.open>a,.page-header.page-header-menu .hor-menu .navbar-nav>li:hover>a,.page-header.page-header-menu .hor-menu .navbar-nav>li>a:active,.page-header.page-header-menu .hor-menu .navbar-nav>li>a:focus,.page-header.page-header-menu .hor-menu .navbar-nav>li>a:hover {

       color:#fff;

       background:#ffae4e!important

修改为background:#ee4866

7. 修改顶部header菜单栏当前菜单点击后颜色

.page-header.page-header-menu .hor-menu .navbar-nav>li.active>a,.page-header.page-header-menu .hor-menu .navbar-nav>li.active>a:hover,.page-header.page-header-menu .hor-menu .navbar-nav>li.current>a,.page-header.page-header-menu .hor-menu .navbar-nav>li.current>a:hover {

       color:#f1f1f1;

       background:#ffae4e

修改为background:#ee4866

8. 修改顶部header下拉菜单栏悬停颜色、和过渡效果

.page-header.page-header-menu .hor-menu .navbar-nav>li .dropdown-menu li:hover>a {

       color:#fff;

       background:#ffae4e

修改为background:#ee4866

增加过渡

       -webkit-transition:all 400ms ease-in-out;

       -moz-transition:all 400ms ease-in-out;

       -o-transition:all 400ms ease-in-out;

       -ms-transition:all 400ms ease-in-out;

       transition:all 400ms ease-in-out

9. 修改顶部header下拉菜单栏点击后颜色、和过渡效果

.page-header.page-header-menu .hor-menu .navbar-nav>li .dropdown-menuli.active>a,.page-header .page-header-menu .hor-menu .navbar-nav>li.dropdown-menu li.active>a:hover,.page-header .page-header-menu .hor-menu .navbar-nav>li.dropdown-menu li.current>a,.page-header .page-header-menu .hor-menu.navbar-nav>li .dropdown-menu li.current>a:hover {

       color:#fff;

       background:#ffae4e

修改为background:#ee4866

增加过渡

       -webkit-transition:all 400ms ease-in-out;

       -moz-transition:all 400ms ease-in-out;

       -o-transition:all 400ms ease-in-out;

       -ms-transition:all 400ms ease-in-out;

       transition:all 400ms ease-in-out

10. 修改顶部header下拉菜单栏背景颜色

.page-header .page-header-menu.hor-menu .navbar-nav>li .dropdown-menu {

       background:#40aae2;   此处必须添加分号，不然显示有误

       opacity:0.9;增加不透明度设置

11. 修改顶部header下拉菜单阴影不透明度

.page-header.page-header-menu .hor-menu.hor-menu-light .navbar-nav>li .dropdown-menu {

       box-shadow:5px 5px rgba(85,97,111,.2);

       background:#fafafc

       opacity:0.9;   增加不透明度设置

12. 修改顶部搜索栏按钮、菜单颜色

.btn.default {

       color:#fff!important;

       background-color: #40aae2!important;

       border-color: #40aae2!important

修改为

       background-color:#2ec7bb!important;

       border-color:#2ec7bb!important

13. 修改搜索页，”不限”背景颜色

.label-success {

       background-color: #40aae2!important

修改为：background-color:#ee5253!important

14. 修改菜单字体大小

.page-header.page-header-menu .hor-menu .navbar-nav>li>a {

       font-size:14px;

       font-weight:400;

       padding:13px 18px 12px

修改为font-size:16px;

15. 修改下拉菜单字体大小

.page-header.page-header-menu .hor-menu .navbar-nav>li .dropdown-menu li>a {

       font-family:"OpenSans",sans-serif;

       font-size:14px;

       font-weight:300;

       padding:10px 12px;

       white-space:normal

修改为：font-size:16px;

16. 修改下拉菜单宽度

.page-header.page-header-menu .hor-menu .navbar-nav>li.classic-menu-dropdown.dropdown-menu {

       min-width:195px;

       max-width:235px

修改为：max-width:335px或min-width:295px;

模板页面设置：

<ulclass="dropdown-menu pull-left" style="width:335px">

17. 在Div模块、图片、悬停按钮等位置增加圆角的方法

增加

border-radius:8px8px 0 0!important;

注意: !important，为强制增加权限相对较高，否则可能无法显示

如无法显示可能是上级或下级同时需要调整。

第二章 模板修改1. search.html修改搜索按钮颜色

<buttonclass="btn blue"onclick="dr_module_search('search_keyword')"type="button"> <i class="fa fa-search"></i> 搜索</button>

修改为<buttonclass="btn red"

第三章 JS文件修改

1. 轮播图片修改显示的持续时间，避免滑动时不连续

static/assets/global/plugins/bootstrap/js/bootstrap.min.js

c.VERSION = "3.3.7",

c.TRANSITION_DURATION = 1600, 原为600

c.DEFAULTS = {

nterval: 5e3,

pause: "hover",

wrap: !0,

keyboard: !0

2. 轮播图片切换间隔调整

@media all and(transform-3d),(-webkit-transform-3d) {

       .carousel-inner>.item {

       -webkit-transition:-webkit-transform .6sease-in-out;

       -moz-transition:-moz-transform .6sease-in-out;

       -o-transition:-o-transform .6sease-in-out;

       transition:transform 1.6s ease-in-out;

       -webkit-backface-visibility:hidden;

       -moz-backface-visibility:hidden;

       backface-visibility:hidden;

       -webkit-perspective:1000px;

       -moz-perspective:1000px;

       perspective:1000px

单独调整某个模块

3. 轮播图片左右两侧按钮渐变颜色

.carousel-control.left{

       background-image:-webkit-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,0) 100%);

       background-image:-o-linear-gradient(left,rgba(0,0,0,0)0,rgba(0,0,0,.0) 100%);

       background-image:linear-gradient(toright,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);

       background-repeat:repeat-x;

       filter:progidXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000', GradientType=1)

}

.carousel-control.right{

       left:auto;

       right:0;

       background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0)0,rgba(0,0,0,0) 100%);

       background-image:-o-linear-gradient(left,rgba(0,0,0,.0)0,rgba(0,0,0,.0) 100%);

       background-image:linear-gradient(toright,rgba(0,0,0,.0) 0,rgba(0,0,0,0) 100%);

       background-repeat:repeat-x;

       filter:progidXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000', GradientType=1)

4. 轮播图片左右两侧按钮、渐变宽度、不透明度、字体、边距调整

.carousel-control{

       position:absolute;

       top:0;

       left:0;

       bottom:0;

       width:15%;

       opacity:.5;

       filter:alpha(opacity=50);

       font-size:20px; 120px

       background-color:transparent

修改为：width:3%; font-size:120px; opacity:.2;filter:alpha(opacity=20);font-size:120px;

5. 轮播图片新增一种轮播li的样式方法

文件：static/assets/global/plugins/bootstrap/js/bootstrap.min.js

    var c = function(b, c) {

        this.$element = a(b),

        this.$indicators =this.$element.find(".carousel-indicators,.tj-carousel-indicators"),

        this.options = c,

        this.paused = null,

        this.sliding = null,

        this.interval = null,

        this.$active = null,

        this.$items = null,

        this.options.keyboard &&this.$element.on("keydown.bs.carousel", a.proxy(this.keydown, this)),

        "hover" == this.options.pause&& !("ontouchstart" in document.documentElement) &&this.$element.on("mouseenter.bs.carousel", a.proxy(this.pause,this)).on("mouseleave.bs.carousel", a.proxy(this.cycle, this))

    };

在/static/assets/global/css/pc.css新建以下内容（复制原carousel-indicators即可）

.tj-carousel-indicators{

       position:absolute;

       bottom:10px;

       left:50%;

       z-index:15;

       width:60%;

       margin-left:-30%;

       padding-left:0;

       list-style:none;

       text-align:center

}

.tj-carousel-indicatorsli {

       display:inline-block;

       width:32px;

       height:6px;

       margin:1px;

       text-indent:-999px;

       border:1px solid #fff;

       border-radius:2px!important;

       cursor:pointer;

       background-color:#000\9;

       background-color:transparent

}

.tj-carousel-indicators.active {

       margin:0;

       width:34px;

       height:8px;

       background-color:#fff

}

.tj-carousel-indicators{

       bottom:20px

}

增加鼠标悬停时的动作

.tj-carousel-indicatorsli:hover {

       background-color:#d8d8d8;

}

6. 轮播图片新增一种淡入淡出轮播的方法

在下方代码增加carousel-fade

class="carousel carousel-fade  slide"

样式表新增

/* tjstar新增carousel-fade样式 开始*/

.carousel-fade.carousel-item {

  opacity: 0;

  transition-duration: 0.6s;

  transition-property: opacity;

}

.carousel-fade.carousel-inner .item{

    opacity:0;

    -webkit-transition-propertypacity;

    -moz-transition-propertypacity ;

    -ms-transition-propertypacity;

    -o-transition-propertypacity;

    transition-propertypacity ;

}

.carousel-fade.carousel-inner .active{

    opacity: 1;

}

.carousel-fade.carousel-inner .active.left,.carousel-fade .carousel-inner .active.right{

    left: 0;

    opacity: 0;

}

.carousel-fade.carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right {

    opacity: 1;

}

/* tjstar新增carousel-fade样式 结束*/