begin主题下载详情页样式调整

  • A+
所属分类:建博笔记

本文主要对begin主题下载详情页做一些简单的样式调整,从而使整个页面看上去更加协调,与其他页面的展现方式也更加统一。

 

  • “下载地址”显示效果修改

打开down.php文件,大约77行的位置,找到代码

  1. <div class="down-list-t">下载地址</div>

将其修改

  1. <div class="down-list-t"><h3>下载地址</h3></div>
begin主题下载详情页样式调整

修改前后效果对比

 

  • 将幻灯标题图片与下面的内容区分开,使其成为两个独立的部分,同时隐藏文章标题显示

主题默认内容区是紧贴在幻灯标题图片下的,这显得“下载页面”与其他页面的显示效果不一致

首先,在同文件中,从大约59行的位置,找到代码

  1. <div class="down-post">
  2. <div class="down-header">
  3. <img src="<?php echo zm_get_option('down_header_img'); ?>" alt="<?php echo $title;?>" />
  4. <h1><?php echo $title;?></h1>
  5. <div class="clear"></div>
  6. </div>

将这段代码中的第一行移动到最后一行,同时,注释掉第4行,变成:

  1. <div class="down-header">
  2. <img src="<?php echo zm_get_option('down_header_img'); ?>" alt="<?php echo $title;?>" />
  3. <!--隐藏标题显示
  4. <h1><?php echo $title;?></h1>
  5. -->
  6. <div class="clear"></div>
  7. </div>
  8. div class="down-post">

然后,打开css/down.css文件,找到代码:

  1. .down-post {
  2. background: #fff;
  3. border-radius: 2px;
  4. border: 1px solid #ddd;
  5. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  6. }

在“}追加代码

  1. margin-top: 10px;

追加后,整个代码如下:

  1. .down-post {
  2. background: #fff;
  3. border-radius: 2px;
  4. border: 1px solid #ddd;
  5. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  6. margin-top: 10px;
  7. }
begin主题下载详情页样式调整

修改前后效果对比

 

  • 删除页面底部“下载版权”的留白

同文件大约101行的位置,找到代码

  1. .down-copyright {
  2. background: #fff;
  3. color: #999;
  4. margin: 50px 0;
  5. padding: 20px;
  6. border-top: 1px dashed #dadada;
  7. }

将其修改

  1. .down-copyright {
  2. background: #fff;
  3. color: #999;
  4. margin: 50px 0 0 0;
  5. padding: 20px;
  6. border-top: 1px dashed #dadada;
  7. }
begin主题下载详情页样式调整

修改前后效果对比

 

Ps:如果你在主题选项--基本设置勾选下载链接在根目录选项的话,请修改download.php文件,而不是down.php文件。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: