修改杂志布局下,底部两栏分类列表缩略图显示样式

  • A+
所属分类:建博笔记
修改杂志布局下,底部两栏分类列表缩略图显示样式

begin主题主题选项--杂志布局中有一个“显示底部两栏分类列表”模块,其中有一个“不显示第一篇摘要”的选项,默认情况下是取消勾选的。当我勾选这个功能后,在前台首页显示的效果是这样的:

修改杂志布局下,底部两栏分类列表缩略图显示样式

默认显示效果

可以看到,在缩略图左右两侧留了一些空白,但是我希望将这部分空白去掉,让缩略图撑满列表。

 

首先,打开style.css文件,在大约10486行的位置,找到代码段

  1. /** 图片动画 **/
  2. .picture-h-img a img, .tao-h-img a img, .line-one-thumbnail a img, .line-small .small-thumbnail a img, .line-big .small-thumbnail a img, .section-thumbnail a img, .custom-thumbnail a img {
  3.     text-aligncenter;
  4.     max-width: 100%;
  5.     widthauto;
  6.     heightauto;
  7.     -webkit-transition: -webkit-transform .3s linear;
  8.     -moz-transition: -moz-transform .3s linear;
  9.     -o-transition: -o-transform .3s linear;
  10.     transition: transform .3s linear
  11. }

然后,将其中的

  1. widthauto;

改成

  1. width: 100%;

于是, 这段代码就变成了这样:

  1. /** 图片动画 **/
  2. .picture-h-img a img, .tao-h-img a img, .line-one-thumbnail a img, .line-small .small-thumbnail a img, .line-big .small-thumbnail a img, .section-thumbnail a img, .custom-thumbnail a img {
  3.     text-aligncenter;
  4.     max-width: 100%;
  5.     width: 100%;
  6.     heightauto;
  7.     -webkit-transition: -webkit-transform .3s linear;
  8.     -moz-transition: -moz-transform .3s linear;
  9.     -o-transition: -o-transform .3s linear;
  10.     transition: transform .3s linear
  11. }

保存后,刷新前台可以看到效果已经变化了,如下图:

修改杂志布局下,底部两栏分类列表缩略图显示样式

修改后的效果

 

另外,额外对主题全局(图片)缩略图宽度属性由width:auto;修正为width:100%;,具体如下:

style.css文件大约1881行的位置,找到代码

  1. .thumbnail a img {
  2.     floatleft;
  3.     width: 100%;
  4.     heightauto;
  5.     max-width: 100%;
  6. }

修改其中的

  1. widthauto;

  1. width: 100%;

由于全局(图片)缩略图尺寸较小,且在发布文章时就对缩略图尺寸做了比较严格的控制,因此在修改前后看不出什么变化,但从上面修改大列表的情况来看,个人以为将width:auto;修改为width:100%;从代码的角度来说可能更加规范和准确吧!

发表评论

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