【博客主题】大气科技感博客主题Power V6

屏聚源码 wordpress评论179,059阅读模式

【博客主题】大气科技感博客主题Power V6

Prower V6版的新主题增加了WordPress的日志形式支持(主要是每个日志前的小ICON图标,可以在编写日志的时候设置形式类别,具体的形式表现还没做差异化处理),不过只做了一部分的:日志、相册、视频、音频,主要是这几个平时用得多。

Prower V6进行了简单的屏幕适配。对屏幕的适配原则是,在大屏上尽量多显示一些相关内容,而在小屏上则是以内容显示为主,这里大屏与小屏的区分,除了以PC、移动设备进行区分外,屏幕分辨率小于1280的都被我划分在小屏的行列里,而大于1280分辨率的屏幕则归划为大屏,也就是只有在大于1280分辨率的情况下,才会显示侧边栏内容,其它的屏幕上是不显示侧边栏内容的。

Prower V6主题有两处广告,分别是在底部以及内容页中间一处,需要修改这两处广告的朋友请到主题的以下两处修改,删除代码或是替换为自己的广告都可以。

使用非IE浏览器(包括IE内核的)或是IE9以上版本的浏览器进行访问,获得更好的浏览体验。

Prower V6版的新主题增加了WordPress的日志形式支持(主要是每个日志前的小ICON图标,可以在编写日志的时候设置形式类别,具体的形式表现还没做差异化处理),不过只做了一部分的:日志、相册、视频、音频,主要是这几个平时用得多。以及进行了简单的屏幕适配。其它部分与V5版本差不多,依然是简洁为主的一栏式,宽分辨率的屏幕下可以显示侧边栏。

 

对屏幕的适配原则是,在大屏上尽量多显示一些相关内容,而在小屏上则是以内容显示为主,这里大屏与小屏的区分,除了以PC、移动设备进行区分外,屏幕分辨率小于1280的都被我划分在小屏的行列里,而大于1280分辨率的屏幕则归划为大屏,也就是只有在大于1280分辨率的情况下,才会显示侧边栏内容,其它的屏幕上是不显示侧边栏内容的。

在大于1280的分辨率下,侧边栏内容显示,它是这样的:

【博客主题】大气科技感博客主题Power V6

在小于或等于1280分辨率的情况下,侧边栏被隐藏掉:

【博客主题】大气科技感博客主题Power V6

当然,iPad的横屏模式下,显示与小于1280的分辨率显示是一样的:

【博客主题】大气科技感博客主题Power V6

iPad的竖屏模式下,则使用了与iPhone一样的显示模式,除去了内容之外的那些辅衬元素:

【博客主题】大气科技感博客主题Power V6

iPhone下的显示,当然之前有朋友留言提醒说导航栏过多时,会被隐藏掉,这里修正了这个问题,当导航栏超出屏幕宽度时,是可以拖动导航栏以显示被隐藏掉的导航内容的:

【博客主题】大气科技感博客主题Power V6

内容页全貌:

【博客主题】大气科技感博客主题Power V6

主题有两处广告,分别是在底部以及内容页中间一处,需要修改这两处广告的朋友请到主题的以下两处修改,删除代码或是替换为自己的广告都可以,当然我还是希望使用的朋友能尽量保留一下我的广告,算是对我的支持,广告中的内容都是我自己做的产品。

底部广告修改,footer.php文件,删除或是修改代码:

<div id=”sponsor”>
<a href=”http://reader.mx/?utm_source=prower&utm_medium=web&utm_campaign=banner” target=”_blank”><img src=”http://media.reeoo.com/readermx.jpg” width=”250″ height=”100″ alt=”ReaderMX” title=”ReaderMX”></a>
<a href=”http://faq.wopus.org” target=”_blank”><img src=”http://media.reeoo.com/faq_side.png” width=”250″ height=”100″ alt=”WordPress问答” title=”WordPress问答”></a>
<a href=”http://reeoo.com” target=”_blank”><img src=”http://media.reeoo.com/reeoo.jpg” width=”250″ height=”100″ alt=”精美网页设计欣赏” title=”精美网页设计欣赏”></a>
</div>

内容中间部分广告修改,single.php文件,删除或是修改代码:

<div><a title=”web design inspiraiton” href=”http://reeoo.com” target=”_blank”><img alt=”reeoo.com – web design inspiration” src=”http://media.reeoo.com/reeoo_728.jpg” width=”728″ height=”90″ /></a></div>

另外,如果还想修改主题的头部或是底部的背景图及底色的话,请至主题的images文件夹里替换相应图片及修改style.css里的相应颜色代码。

头部背景图(blue_bg.png),颜色代码为:

#header {background:#0067aa url(images/blue_bg.png) repeat; border-bottom:1px solid #005b97; box-shadow:0 1px 5px #003f68; width:100%; padding:5% 0; color:#90d5ff; text-shadow:1px 1px #005b97; z-index:1; position:relative;}

修改这里的background、border-bottom、box-shadow、color以及text-shadow的颜色值,分别是背景底色、下边框色、阴影颜色、文字颜色及文字阴影颜色

底部背景图为(gray_bg.png),颜色代码为:

#footer {background:#888f96 url(images/gray_bg.png) repeat; border-top:1px solid #fff; box-shadow:inset 0 2px 5px #555; font-size:0.8em; padding-bottom:1em; padding-top:1em; color:#292f34; text-shadow:1px 1px #adafb1;}
#footer a {color:#292f34;}

同修改头部颜色一样,修改background、border-top、box-shadow、color及text-shadow的颜色值,另外再修改#footer a这里的链接文字颜色

美菱阁精品源码分享中国好源码下载地址:大气科技感博客主题Power V6

继续阅读
屏聚源码
评论  0  访客  0
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定