在FrontOpen主题中添加轮播并完美自适应的方法

FrontOpen主题的最大特点是自适应,技术层面完美适应各种分辨率…..

真要在各种分辨率下都好看,就要看使用者建站的时候怎么想了.

接下来介绍下,怎么添加完美自适应本款主题的首页幻灯片,幻灯片采用插件,meta slider .

1. 安装和设置插件。 安装后,后台工具栏会出现 meta slider 。

新的滑块就是创建一组幻灯片,然后添加幻灯片…

宽度和高度根据你自己的想要展示的图片比例填,我测试设的是宽1800,高600。 (3:1)

具体的宽和高要设置都大,要看你想要兼容适应的分辨率,如果你要适应 3840的宽度,那最好就设这么宽。

2.  添加到主题代码中。

在meta slider 的一组幻灯片,右下角 有“用法”,如下图:

20140223081323

 

复制这段文字,打开 frontopen2主题下的index.php, 在<div class=”main”> 后面加入上面复制的代码:

is_home()是只在首页展示,在幻灯片短代码 前后加了 “<div class=’slide_box’>”. 这个是自适应的关键。

20140223083853

3. 修改样式文件

在 style.css 的第一个  .post_box 样式行后面回车 中加入一行样式 .

.slide_box{margin-right:4%;overflow:hidden;width:96%;}

如图:
20140223082540

在mobile.css 中的 .post_box 后面 回车 加入一行样式.

.slide_box{margin-right:0;overflow:hidden;width:100%;}

如图:
20140223082603

保存后,大功告成。去试试效果吧!

补充一个问题:为什么看yoyo168.com是双栏,看自己的是单栏显示?

因为我修改了显示双栏的最小分辨率,主题默认是1366以上才显示双栏,以下以单栏呈现。

在style.css 中搜索  1366px(这个是主题的默认值) , 改成你想要双栏显示的最小分辨率的宽度就行了。

比如我的事 改成了 @media screen and (min-width:1280px){

 

 

 

有话好好说 10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #3

    博主,我之前也该国分辨率,但是我改完后,也是会显示两列,但是有时候某列会空出一个位置。你没有做其他改变吗?

    顾余笑4年前 (2014-02-23)回复
    • 空位的问题,目前我遇到有两种:
      1. 上面一篇的文章,标签太多了,导致换行,把下面挤跑了。
      2. 浏览器缩放了,比如放到到125%

      爸爸4年前 (2014-02-24)回复
      • 我仔细思考了一下,可能跟我设置摘要有关,我采用的不是自动摘要,目前在测试是不是这个原因,至于标签我觉得不是,我的很多文章标签还不如你的多呢。。。
        另外还想问一个问题,就是你新建的面页没有侧边栏,你是改的默认的模板还是自己新建的?如果是默认模板的话,他是哪个文件呢?我没找到,我也想新建面页去掉侧边栏,还请赐教!感谢!

        顾余笑4年前 (2014-02-24)回复
        • 知道哪的问题了,已经解决了~打扰了~

          顾余笑4年前 (2014-02-24)回复
          • 是去掉侧边栏了,但是宽度没改变,应该改哪个参数呢?

            顾余笑4年前 (2014-02-24)
          • 改样式啊,就是中间主体部分页面的样式。 你可以自定义一个id 和 class,不要用原本的。 或者你看看我那个代码使用的什么。

            爸爸4年前 (2014-02-24)
  2. #2

    小白,不会写。。。。您不能把你那个模板页面的代码贴给我。。。。要是能发QQ就最好了,我的3800224056@qq.com,感谢至极!

    顾余笑4年前 (2014-02-24)回复
    • 邮箱不对啊,qq也不对。。在品味群里找我吧。

      爸爸4年前 (2014-02-25)回复
  3. #1

    博主,能不能把模板代码发一下呢?

    顾余笑4年前 (2014-02-24)回复