O’Connor是一个付费主题,但它值得购买。因为它的优点在于:全站AJAX(真正的)、Web App(不依赖任何插件)、单栏双栏(不启用任何小工具即为单栏模式,后台可设置主题宽度)、星评(非插件优雅版)、BOX文章列表、可能是SEO最牛逼的主题、所有设备(网页自适应),所以在Bigfa发布正式版时第一时间购入。
但任何一个主题都不可能满足所有的人,所以主题修改是不可避的。虽然Bigfa的Q群有技术支持,但这些可不是在售后服务范围的,所以问了几次Bigfa后也不好意思再麻烦他这小伙子了,于是把这次修改的记录下面,方面自已往后的修改。
1、评论头像圆形显示,只需要在CSS文件最后加上以下代码既可。
.comhead .zlazyload{border-radius:100%}
2、调整右边栏宽度。由于主题右边栏默认为240,不适合Google AD的250*250的标准展示。同样在CSS文件中
找到#content{float:left;width:660px;width:calc( 100% - 270px );_margin-right:20px}
并修改成:
#content{float:left;width:650px;width:calc( 100% - 280px );_margin-right:20px}
再找到#sidebar{float:right;width:240px;font-size:12px}
并修改成
#sidebar{float:right;width:250px;font-size:12px}
完成。剩下的就是加入广告代码。
3、恢复浏览器下拉条原状,主题默认对浏览器下拉条进行了美化。可惜我是一个追求原生态的,所以把下拉条恢复成原状。在CSS文件中搜索到以下代码,并将其删除既可。
::-webkit-scrollbar-track-piece{width:15px;border-right:1px solid #EEE;border-left:1px solid #e4e4e4;background-color:#f0f0f0;background-image:-webkit-linear-gradient(left,#f0f0f0,#FFF)}
::-webkit-scrollbar{width:15px;height:15px}
::-webkit-scrollbar-thumb{position:relative;min-height:25px;border-radius:9999px;background:linear-gradient(#f36639,#efcc43) repeat scroll 0 0 #f36639;background-clip:padding-box}
::-webkit-scrollbar-thumb:vertical{border-top:0 solid transparent;border-right:2px solid transparent;border-bottom:0 solid transparent;border-left:3px solid transparent}
::-webkit-scrollbar-thumb:horizontal{border-top:3px solid transparent;border-right:0 solid transparent;border-bottom:2px solid transparent;border-left:0 solid transparent}
4、把主题的橙色风格改为蓝色
把CSS文件中的#f36639
全部换成#3b5998
,剩下的为边栏图片修改。
5、头部增加蓝色条样
搜索:
#pre-header {
background-color:#E9E9E9;
border-bottom-color:#F6F6F6;
border-bottom-style:solid;
border-bottom-width:5px;
color:#888888;
font-size:12px;
height:40px;
}
更换成:
#pre-header {
background-color:#E9E9E9;
border-bottom-color:#3B5998;
border-bottom-style:solid;
border-bottom-width:5px;
color:#888888;
font-size:12px;
height:40px;
overflow:hidden;
}
剩下的就是在主题设置里面进行设置了,WordPress Theme O’Connor主题后台主题设置选项非常强大,详见下图。
2014-04-07增补:删除主题自带的Lightbox效果,因为不支持多张图片显示。删除themes/O-Connor/js/global.js
中的以下代码。
$(document).on("click", "a.fancybox",
function() {
pagesize = bigfa_getPageSize(),
bigfa_img_url = $(this).attr("href"),
css_bigfa_bg = "z-index:9999;overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%;background-color:#000;",
css_bigfa = "z-index:99999;position:fixed;left:50%;top:50%;",
css_bigfa_img = "display:none;border:8px solid #fff;box-shadow:0px 0px 10px rgba(0,0,0,0.6)",
css_bigfa_p_n = "display:none;cursor:pointer;position:absolute;top:50%;line-height:80px;margin:-40px 0 0 0;color:#eee;text-shadow:1px 3px 5px #000;font-size:40px;font-family:Arial,Tahoma;";
if (typeof document.body.style.maxHeight === "undefined") {
alert("\u4E0D\u652F\u6301IE6\uFF01\u8BF7\u4F60\u4EEC\u653E\u8FC7IE6\u5427\uFF0C\u5B83\u592A\u8001\u4E86\uFF0C\u5C31\u8BA9\u5B83\u5B89\u5FC3\u7684\u53BB\u5427\u2026\u2026");
return false
} else {
$("body").append('<div id="bigfa_bg" style="' + css_bigfa_bg + '"></div><p id="zshowbox_loading" style="' + zl_style_1 + 'font-size:22px;background-color:#000;"></p><div id="bigfa" style="' + css_bigfa + '"><img id="bigfa_img" style="' + css_bigfa_img + '" /></div>');
$("#bigfa_bg").fadeTo(600, .8);
zloading = 0;
$zshowbox_loading = $("#zshowbox_loading");
$zshowbox_loading.fadeTo(1, .85).zloading();
bigfa_img("#bigfa_img", bigfa_img_url, pagesize);
$("#bigfa_prev,#bigfa_next").click(function() {
if ($(this).attr("id") == "bigfa_prev") a--;
else a++;
$("#bigfa").find("img").remove().end().append('<img id="bigfa_img" style="' + css_bigfa_img + '" />');
bigfa_img_url = $("#bigfa-" + a).attr("href");
bigfa_img("#bigfa_img", bigfa_img_url, pagesize, a, d);
return false
});
$("#bigfa_bg,#bigfa_img").click(function() {
zloading = 1;
$zshowbox_loading.remove();
$("#bigfa_bg,#bigfa_img").unbind("click");
$("#bigfa_bg,#bigfa").fadeOut(400,
function() {
$(this).remove()
});
return false
})
}
return false
});
再加个.avatar{border-radius:100%},连边栏的也变成圆角的了
边栏我没有放评论显示,不过非常感谢提供的方法。
调整宽度那个麻烦了吧,我把宽度改成1024就行了。
好方法。就只在主题管理那里设置1024吗?
是啊
按你的方法改后,页面与回到顶端按钮有部份重叠。
那你修改一下返回顶部的位置啊,搜索back2top
现在gg的游戏广告都太色情了,我已经屏蔽了游戏广告,但是还是忍不住点了一下美女 😀
呵呵,游戏一般面向对像都是宅男居多,所以这只是市场需求。
那不是谷歌的错啊,而是游戏广告的错嘛。
不过还好,Google AD 自身还可以设置过滤一些不想展示的广告类别。这一点值得夸奖。我全过滤了,嘻嘻。
大发说他的主题中的代码有很多的变量名称为FUC*,真服了这小子。
呵呵,还年轻嘛,个性。
上次我跟他说:不好意思老麻烦你的嘛,
他说:你还真是不好意思啊,
确实如此,想想,不过只是购买了一个主题,一百多元,还要麻烦他那么多,每个人的时间很宝贵。
bigfa very nice,啊(竟然必须要中文)
这个是大发开发出来的功能,以防那些国外的垃圾评论。
折腾主题是生活的一部分……
你当时用的connor是发哥的1.9版本还是4.3 我好纠结啊
几个版本对于修改没什么样式没有太大的阻碍。