Hi!请登陆

一款小巧的WordPress响应式免费博客主题ProwerV6

2021-1-19 51 1/19

这款Prower主题是一款非常简洁小巧的两栏式博客主题,打包后的大小仅有57.9KB,解压后也只有76.7KB,除去图片的话仅有27.8KB,最难能可贵的这款主题还是响应式主题,非常值得推荐。

一款小巧的WordPress响应式免费博客主题ProwerV6

ProwerV6版本主题效果图

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

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

ProwerV6版还修正了导航栏过多时被隐藏掉的问题,现在的版本当导航栏超出屏幕宽度时,是可以拖动导航栏以显示被隐藏掉的导航内容的。

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

1、底部广告修改(footer.php文件),删除或是修改代码

  1. <div id=”sponsor”>
  2. <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>
  3. <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>
  4. <a href=”http://reeoo.com” target=”_blank”><img src=”http://media.reeoo.com/reeoo.jpg” width=”250″ height=”100″ alt=”精美网页设计欣赏” title=”精美网页设计欣赏”></a>
  5. </div>

2、文章页广告修改(single.php文件),删除或是修改代码

  1. <div>
  2. <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>
  3. </div>

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

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

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

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

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

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

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

ProwerV6主题的演示及下载

 下载地址

非常重要的,请在使用的过程中保留主题底部关于这个主题的链接,谢谢!

相关推荐