整站风格入门

大概流程
入门只讲解最基础的css修改
  1. 创建一套整站模板
  2. 要有个大概的配色效果图
  3. 切图
  4. 调整样式表和替换添加图片
  5. 收工打包
准备工作
创建模板在前面已经有介绍,效果图则需要个人开发。这边将讲解入门级的修改方案
首先,我们创建模板,设置为默认后,你会发现怎么跟默认模板是一模一样的,没关系,创建就是在默认模板的基础上复制一份。
然后,切效果图或取色值:
  1. 全局背景图/或者颜色
  2. 头部导航背景
  3. 头部导航激活状态/鼠标悬停状态
  4. 全局共用模块(这个使用率非常高,所以模块边框背景颜色都是它控制,所以修改一下全部变化)
  5. 取色:默认文本颜色、链接颜色、背景颜色等等
全局背景修改
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*全局背景颜色*/,他会出现在 body 的括号里
  3. /*全局背景颜色*/ 前面,我们会发现有句 background:#f4f4f4;,这就是背景色
  4. 其中 #f4f4f4 就是色值,修改成我们已经取好的颜色。
  5. 当然,如果有图片需求,我们可以加上背景图片,先把图片拷贝到 themes/site/创建的风格名/images/ 里面。
  6. 在色值后面加上 url(../../images/图片名); 图片展示效果可以网上去搜索教程。
  7. 综合结果就是 background:#f4f4f4 url(../../images/图片名);
全局默认文本颜色
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*全局默认文本颜色*/,他会出现在 body 的括号里
  3. /*全局背景颜色*/ 前面,我们会发现有句 color:#333;,这就是背景色
  4. 其中 #f4f4f4 就是色值,修改成我们已经取好的颜色。
全局链接
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*全局链接*/,在他下面会有代码
    a{
        color:#105cb6;
        text-decoration:none;
    }
    /*鼠标悬停链接的效果*/
    a:hover{
        text-decoration:underline;
    }
  3. a{} 里面是默认颜色
  4. a:hover{} 里面就是鼠标悬停时候的颜色了
导航背景
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*导航背景*/,他会出现在 .header_wrap 的括号里
  3. /*导航背景*/ 前面,我们会发现有句 background:#488fce;,这就是背景色
  4. 其中 #488fce 就是色值,修改成我们已经取好的颜色。
  5. 当然,如果有图片需求,我们可以加上背景图片,先把图片拷贝到 themes/创建的风格名/images/ 里面。
  6. 在色值后面加上 url(../../images/图片名); 图片展示效果可以网上去搜索教程。
  7. 综合结果就是 background:#488fce url(../../images/图片名);
导航菜单激活状态
什么是导航激活状态:我们看顶部,如当前首页,会发现它的背景颜色跟其他几个菜单不一样,这就是激活状态。
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:.nav li.current a,后面括号里就是鼠标悬停和激活状态的样式了
全局公用模块
站点上所有模块的包裹样式。
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*全局通用模块外框*/,后面的三组样式都是,具体修改方案如上。
  3. 碰到 border-color:#fff #efefef #d3d3d3 #efefef; 颜色对应就是 上 右 下 左,想一样留一个即可
界面宽屏实现
主要涉及3个部分,头部,主题内容,底部
  1. 打开 themes/site/创建的风格名/css/dev/style.css
  2. 搜索:/*导航宽度*/
  3. 搜索:/*主体结构样式*/
  4. 搜索:/*页脚、底部*/
  5. 以上3处地方后面的width:960px就是宽度控制,改成自适应 就是96%等
替换封面效果图
打开 themes/创建的风格名/images,里面有一个文件叫preview.jpg,它就是显示在风格列表的效果图了
最后,在后台模板列表,创建模板开启的520模式还在的话,会有个导出按钮,即可进行分享。