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

时间:2年前 (2017-04-15) › 阅读:1352

侧边栏孤狼是这样设置的,首页和列表文章调用模块管理里面的 默认侧栏 ,文章内容页面调用 侧栏 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样式。


发表评论:

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