• Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    1年前 (2017/04/15) 孤狼 技巧 1111 浏览 0 条评论

    侧边栏孤狼是这样设置的,首页和列表文章调用模块管理里面的 默认侧栏 ,文章内容页面调用 侧栏 2 ,其它暂时不调用。还有暂时还没有添加其它模块,全部调用 模块管理/系统模块 里面的模块。同时为每一个系统模块定义CSS样式。


    新建三个文件, module.php,sidebar.php,sidebar2.php;

    Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    ——在module.php文件中写入以下代码。

    {* Template Name:单个模块 *}
    <div class="widget">{if (!$module.IsHideTitle)&&($module.Name)}<h3 class="widget-title">{$module.Name}</h3>{else}{/if}{if $module.Type=='div'}{$module.Content}{/if}{if $module.Type=='ul'}<ul class="{$module.HtmlID}">{$module.Content}</ul>{/if}</div>


    Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    ——在sidebar.php中写入以下代码。

    {* Template Name:侧栏模板 *}
    {foreach $sidebar as $module}
    {template:module}
    {/foreach}


    Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    ——在sidebar2.php中写入以下代码。

    {* Template Name:侧栏模板 *}
    {foreach $sidebar2 as $module}
    {template:module}
    {/foreach}


    Z-Blog PHP主题模板制作九:侧栏设置/系统模块/CSS样式

    ——在首页index.php文件中写入调用经下代码。

    {template:sidebar}
    .widget{background:#fff;padding:20px 20px 20px 20px;margin-bottom:20px;overflow:hidden;border-radius:5px;box-shadow:0px 0px 5px #ddd;}
    .widget-title{font-size:20px;color:#444;border-bottom:solid 2px #26A6F2;display:inline-block;padding-right:15px;padding-bottom:5px;padding-left:15px;font-weight:normal;margin-bottom:10px;}
    #tbCalendar{width:100%;table-layout:fixed;text-align:center;border:none;color:#000;}#tbCalendar a{color:#444;text-shadow:0 0 3px #fff;}
    #tbCalendar small{font-size:12px;}
    #tbCalendar td{}#tbCalendar td a{display:block;background:#26A6F2;color:#fff;text-shadow:0 0 3px #444;border-radius:3px;}
    #tbCalendar td b{display:block;background:#3A6EA5;text-shadow:none;}
    .cp-hello{display:block;}
    .divCatalog li{width:128px;height:30px;background:#26A6F2;margin:1px;float:left;border-radius:5px;}
    .divCatalog li a{width:100%;line-height:30px;text-align:center;color:#fff;display:block;}.widget input[type="text"]{width:211px;border:1px solid #ddd;height:20px;font-size:16px;color:#444;}
    .widget input[type="submit"]{width:42px;border:1px solid #ddd;height:25px;color:#444;font-size:14px;cursor:pointer;}
    .divComments li{width:100%;border-bottom:solid 1px #ddd;margin-bottom:10px;}
    .divComments li a{width:100%;line-height:25px;display:block;word-wrap:break-word;height:50px;overflow:hidden;}
    .divArchives li,.divFavorites li,.divLinkage li{width:100%;line-height:25px;}
    .divStatistics li{width:128px;height:25px;float:left;}
    .divMisc li,.divAuthors li{text-align:center;float:left;width:128px;}
    .divPrevious li{display:inline-block;width:100%;border-bottom:solid 1px #ddd;margin-top:10px;}
    .divTags li{height:30px;margin:2px;float:left;border-radius:5px;}
    .divTags li a{line-height:30px;display:inline-block;padding:0px 3px 0px 3px;color:#fff;}
    .divTags li:nth-child(6n){background:#298FCC;}
    .divTags li:nth-child(6n+1){background:#C3371C;}
    .divTags li:nth-child(6n+2){background:#5DBB73;}
    .divTags li:nth-child(6n+3){background:#777777;}
    .divTags li:nth-child(6n+4){background:#FF9900;}
    .divTags li:nth-child(6n+5){background:#F6C911;}
    .tag-count{display:none;}

    ——这是系统模块需要使用的CSS样式。

    版权属于:孤狼备忘录     本文作者:孤狼

    原文地址: https://www.glbwl.com/z-blog-php-theme-sidebar-css.html

    版权声明:转载时必须以链接形式注明原始出处及本声明。

    « 上一篇:Z-Blog PHP主题模板制作八:置顶/列表 调用命令和CSS样式 » 下一篇:孤狼开始观看“人民的名义”为什么这么火

    推荐阅读

  • 折腾Z-BlogPHP主题模板zbgl/GitHub下载(添加侧栏功能修改手机显示样式)
  • Z-Blog PHP主题模板制作十六:导出主题为.zba文件
  • Z-Blog PHP主题模板制作十五:响应式调整/手机平板自适应模式
  • Z-Blog PHP主题模板制作十四:错误页面404.php
  • Z-Blog PHP主题模板制作十三:自定义搜索页面search.php
  • 没有评论,留下你的印记,证明你来过。


    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。