FrontOpen主题的最大特点是自适应,技术层面完美适应各种分辨率…..
真要在各种分辨率下都好看,就要看使用者建站的时候怎么想了.
接下来介绍下,怎么添加完美自适应本款主题的首页幻灯片,幻灯片采用插件,meta slider .
1. 安装和设置插件。 安装后,后台工具栏会出现 meta slider 。
新的滑块就是创建一组幻灯片,然后添加幻灯片…
宽度和高度根据你自己的想要展示的图片比例填,我测试设的是宽1800,高600。 (3:1)
具体的宽和高要设置都大,要看你想要兼容适应的分辨率,如果你要适应 3840的宽度,那最好就设这么宽。
2. 添加到主题代码中。
在meta slider 的一组幻灯片,右下角 有“用法”,如下图:
复制这段文字,打开 frontopen2主题下的index.php, 在<div class=”main”> 后面加入上面复制的代码:
is_home()是只在首页展示,在幻灯片短代码 前后加了 “<div class=’slide_box’>”. 这个是自适应的关键。
3. 修改样式文件
在 style.css 的第一个 .post_box 样式行后面回车 中加入一行样式 .
.slide_box{margin-right:4%;overflow:hidden;width:96%;}
在mobile.css 中的 .post_box 后面 回车 加入一行样式.
.slide_box{margin-right:0;overflow:hidden;width:100%;}
保存后,大功告成。去试试效果吧!
补充一个问题:为什么看yoyo168.com是双栏,看自己的是单栏显示?
因为我修改了显示双栏的最小分辨率,主题默认是1366以上才显示双栏,以下以单栏呈现。
在style.css 中搜索 1366px(这个是主题的默认值) , 改成你想要双栏显示的最小分辨率的宽度就行了。
比如我的事 改成了 @media screen and (min-width:1280px){
博主,我之前也该国分辨率,但是我改完后,也是会显示两列,但是有时候某列会空出一个位置。你没有做其他改变吗?
小白,不会写。。。。您不能把你那个模板页面的代码贴给我。。。。要是能发QQ就最好了,我的3800224056@qq.com,感谢至极!
博主,能不能把模板代码发一下呢?