在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

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

    顾余笑7年前 (2014-02-23)回复
  2. #2

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

    顾余笑7年前 (2014-02-24)回复
  3. #1

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

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