Loper主题修改为宽屏模式,用过Loper主题都知道它是个古老的主题,Loper主题默认的宽度1000px,是为以前小显示器使用的主题,拽立网,现在的电脑显示器都27寸以上了,浏览起来感觉主题太小了,所以我决定修改主题的宽度为1180px,今天我把Loper主题修改为宽屏模式方法分享给大家,请看以下操作!

废话不多说直接分享修改的CSS代码和改过的图片!

Loper主题修改为宽屏模式-拽立网

1.登陆你的后台管理,选择【外观】-【编辑】-【loper: 样式表 (style.css)】

1.直接搜索下面代码:

.container {width: 1000px; margin: 0 auto;}

1.直接替换下面全部代码:

.container {
    width: 1180px;
    margin: 0 auto;
}

 

2.直接搜索下面代码:

header {width: 1000px; height:150px;margin: 0 auto;background:transparent url(images/headerbg.jpg) no-repeat;position:relative;_left:-10px}

 

2.直接替换下面全部代码:

header {
    width: 1180px;
    height: 150px;
    margin: 0 auto;
    background: transparent url(images/headerbg.jpg) no-repeat;
    position: relative;
    _left: -10px;
}

 

3.直接搜索下面代码:

.feedtips{ background: url(images/feedtip2.jpg) no-repeat; width:85px; height:49px; position:absolute; left:50%; top:111px; margin-left:-565px;}

 

3.直接替换下面全部代码:

.feedtips {
    background: url(images/feedtip2.jpg) no-repeat;
    width: 85px;
    height: 49px;
    position: absolute;
    left: 50%;
    top: 111px;
    margin-left: -660px;
}

 

4.直接搜索下面代码:

.layout{ float:left; padding-right:50px;_margin-left:-5px;_padding-right:-20px;width:620px;}

 

4.直接替换下面全部代码:

.layout {
    float: left;
    padding-right: 50px;
    _margin-left: -5px;
    _padding-right: -20px;
    width: 800px;
}

 

5.直接搜索下面代码:

.container-footer{ width:1000px; margin:0 auto; }

 

5.直接替换下面全部代码:

.container-footer {
    width: 1180px;
    margin: 0 auto;
}

 

6.直接搜索下面代码:

#comments ol li{ margin:20px 0; background:url(images/clearline.jpg) no-repeat bottom; padding:0 0 25px 0;zoom:1}

 

6.直接替换下面全部代码:

#comments ol li {
    margin: 20px 0;
    padding: 0 0 35px 0;
    background: url(images/clearline.jpg) no-repeat bottom;
    zoom: 1;
}

 

7.直接搜索下面代码:

#respond input{width:250px;font-size:12px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;  padding:3px 5px; border:1px  solid #ccc; font-family: "Microsoft YaHei", Trebuchet MS, Arial, Verdana, Tahoma, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;}

 

7.直接替换下面全部代码:

#respond input {
    width: 350px;
    font-size: 12px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    padding: 3px 5px;
    border: 1px solid #ccc;
    font-family: "Microsoft YaHei", Trebuchet MS, Arial, Verdana, Tahoma, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
}

 

8.直接搜索下面代码:

.postinfoend{ background:url(images/postinfoend.jpg) no-repeat; width:620px; height:3px}

 

8.直接替换下面全部代码:

.postinfoend {
    background: url(images/postinfoend.jpg) no-repeat;
    width: 800px;
    height: 3px;
}

 

9.直接搜索下面代码:

.postinfo{ border-top:1px solid #767777; width:620px; background:url(images/postinfobg.jpg) repeat-y; margin:30px 0 20px 0; padding:5px 0 0 0; font-size:12px;font-family: "Microsoft YaHei","Trebuchet MS",Tahoma,Arial,sans-serif; color:#666;}

 

9.直接替换下面全部代码:

.postinfo {
    border-top: 1px solid #767777;
    width: 800px;
    background: url(images/postinfobg.jpg) repeat-y;
    margin: 30px 0 20px 0;
    padding: 5px 0 0 0;
    font-size: 12px;
    font-family: "Microsoft YaHei","Trebuchet MS",Tahoma,Arial,sans-serif;
    color: #666;
}

 

10.全部修改过的主题图片,我会打包分享下载!

然后用FTP上传到主题目录的【images】里!

提示:必须要认真的搜索代码,才替换对的代码,不然很麻烦的哦!

提示:如果修改好了代码位子不对,可以自己慢慢修改!

Loper主题修改为宽屏模式
版权声明:本站原创文章,于2017年04月14日,由 拽立网 发表,共 2942 字。
打赏