YOOtheme subway主题设置

Written by 翔仔. Posted in wordpress. 32 Comments

最近把使用了两年多的主题Modern Style换掉了,取而代之的是yootheme出品的subway主题。subway主题整体上采用了微软最新的metro风格,我想这也是这个主题取名subway的原因吧。

subway是一套收费主题,但是万能的google还是不负所托,让我下到了1.0.0版本。虽然不是最新的版本,另外还有一些bug存在,但至少能用。本以为像一般的主题一样上传激活就能达到demo一样的华丽效果,但是结果却是一片乱七八糟的错位。。。于是悲催的折腾过程又开始了。

  • 1. 主题下载

推荐使用原版的英文主题,虽然在3.4版本以上的WP后台有点错位。国内有几个汉化的版本,我试的时候都有一些问题,而且比较恶劣的是,汉化版的主题都不约而同地把版权信息改成了自己的,更有甚者还加了密…虽然我也是免费用了这个主题,但是总归心有戚戚焉。

subway主题有两个包,一个是主题包,另一个是WordPress Demo Package。后者是demo站点的整站打包,包含了wordpress程序,subway主题,demo站用到的素材,Widgetkit插件及其subway专用样式

  • 2. Widgets的安装和配置

subway主题的侧边栏除了常规的安装外,还要在Dashboard->Subway->Widget options设置各个widget的样式和显示的页面。下面就按照我自己的样式把具体设置分享一下。主要参考了官方的文档,需要的图片等素材要提前放到相应的目录中。

  • 首先是logo的设置
<img src="/wp-content/uploads/yootheme/logo.png" alt="logo" height="65" />
  • 最右边浮动的Social-icon
<ul class="social-icons">
<li><a class="twitter" target="_blank" href="https://twitter.com/soarpoon" ></a></li>
<li><a class="facebook" target="_blank" href="http://www.facebook.com"></a></li>
<li><a class="googleplus" target="_blank" href="https://plus.google.com"></a></li>
<li><a class="feed" target="_blank" href="http://feeds.feedburner.com/pgxblog"></a></li>
</ul>
  • 在breadcrumbs位置拖入Warp – Breadcrumbs这个widget。还有别忘了search。
  • Gallery和Contact类似

写入下面的内容后Widget options设置里的title选择hide,style选择box。

<a href="http://#">
<img class="size-auto align-center" src="/wp-content/uploads/yootheme/icon/icon_gallery.png" height="126" width=“126” alt=“Gallery Icon" />
<h3 class="module-title">Gallery</h3>
</a>
  • RSS Feed模块

由于Widget options设置里只有两种颜色可以选择,所以我在加入RSS Feed模块时修改了一下CSS。先在widget中写入以下如下代码。在Widget options设置里的style选择blank。

<div class="mod-box mod-box-color3 deepest" >
<a href="http://feeds.feedburner.com/pgxblog">
<img class="size-auto align-center" src="/wp-content/uploads/yootheme/icon/icon_rss.png" height="126" width="“126”" alt="“RSS Feed" >
<h3 class="module-title">RSS Feed</h3>
</a>
</div>

然后修改CSS目录下的style.css,加入以下内容来定义color3的样式:

.mod-box-color3 {
background: #dc9f27;
background: -moz-linear-gradient(-45deg, #f2c56f 0%, #dc9f27 100%);
background: -webkit-linear-gradient(-45deg, #f2c56f 0%,#dc9f27 100%);
background: linear-gradient(-45deg, #fbbb3f 0%,#dc9f27 100%);
}
.mod-box-color3 a { color: #F6E1B9; }
.mod-box-color3 a:hover { color: #ffffff; }
  • aboutme模块
<a href="http://hi.pgx.me/about">
<div style="height: 67px; width: 220px; padding-top: 150px; background: url(http://hi.pgx.me/files/aboutme.jpg) no-repeat;" >
<h3 style="color: #fff;" class="module-title">about me</h3>
</div>
</a>
  • 图片展示区

图片展示需要用到widgetkit插件。在widgetkit中创建一个Slideshow,style选择subway,Effect选择KenBurns即可。当然,还要把生成的widget放入sidebar中。

  • 3. 导航栏

导航栏的配置按照官方的文档设置就可以了,唯一需要说明的是,1.0.0版本的主题在3.4以上的wp中不能显示导航栏的图标,这不得不说是一个遗憾呐!不过补救的办法可以参考这里

 

总算是写完了,回头看一下也就这不多的一些代码而已。但是由于本人不会写代码,有的只是举一反三的能力,还有不厌其烦的尝试。这也就是所谓的折腾了,浪费了不少时间。估计有一段时间不用折腾代码了,有了好看的博客之后应该多更新更新了,还是这句老话,博客要内容为王才行。

Tags: , , , ,

Trackback from your site.

Comments (32)

  • Aoyu

    |

    感觉本人语言表达能力太差了,写了那么长才写完,竟然没有发现wp3.x可以添加导航栏图标,以后还要努力

    Reply

    • 翔仔

      |

      你写的比我详细多了。。。

      Reply

  • 鱼鱼

    |

    lz,Columns 选择 和Images 填了之后,每次点击保存后,都保存不了。怎么回事?

    Reply

    • 翔仔

      |

      这是1.0.0版本的主题在3.4+版wordpress下的bug…必要的话,就把wp降级了吧

      Reply

      • 鱼鱼

        |

        你是用的3..3?还是你怎么实现的啊?

        Reply

        • 熊猫

          |

          这个用户头像怎么加的?

          Reply

      • 熊猫

        |

        lz,这个用户头像在哪儿加啊?

        Reply

  • 鱼鱼

    |

    你那个”Recent Comments“ 这个头是怎么弄的?求指教

    Reply

  • 鱼鱼

    |

    我在小工具里面 也是添加一个近期评论的控件,怎么不显示头

    Reply

    • 翔仔

      |

      你加了小控件以后,要在Widget options设置里的title设置标题显不显示

      Reply

  • 鱼鱼

    |

    请问一下,你这个评论框是怎么弄的,FCKeditor怎么修改,才是你这个样的?

    Reply

    • 翔仔

      |

      评论框我用的Comment Reply Notification这个插件

      Reply

  • 创意安仔

    |

    想询问你主页的post最下面的页数是怎样弄得?帮帮忙~谢谢!

    Reply

    • 翔仔

      |

      这个自己本来就有啊?你在后台setting里面的reading设置Blog pages show at most了么?

      Reply

      • 创意安仔

        |

        新手上路嘛~~多谢指点!!

        Reply

  • 创意安仔

    |

    问问你~!!您主页的照片展示是用Widgetkit里哪个功能?谢谢!

    Reply

  • Eric

    |

    同样是1.0.0,为啥你的背景有点点中间亮的感觉?
    我的是却是一片蓝色。。。咋设置的?
    pls email me

    Reply

    • 翔仔

      |

      subway的主题我用的默认的 背景也没有改过
      照片展示用的就是Gallery~

      Reply

  • 寻莫

    |

    老兄,能否把那个WordPress Demo Package给我传下?我google了好久都下不到啊。fyd27@126.com 谢谢了

    Reply

  • webb

    |

    博主是否可以提供一下WordPress Demo Package 包? 我也找了很久都是不带演示数据的。求分享啊 65202985@qq.com

    Reply

  • 音符

    |

    博主 我也找了很多这个主题都没有演示数据 能否发我一份WordPress Demo Package 包

    Reply

  • 月少

    |

    可以分享下主题吗? skyzaizhe@126.com 最近找主题 好不容易看到满意的 下载后发现不能用

    Reply

  • 吴伟博客

    |

    博主你好,我跟你一样主题,为什么我的出现错位,是哪里设置错位啊

    Reply

    • 翔仔

      |

      我没发现你的主页错位额

      Reply

  • 吴伟博客

    |

    在ie10 谷歌没有问题,我使用IE8在显示器分辨率1024×768出现第三栏错位

    Reply

  • pradip

    |

    hello. i need your help please can u send me data package of subway theme or upload it and send me a link … thanks in advance. its veru urjent hope u understand..
    my mail id : aby.cool24@gmail.com

    Reply

  • sheak

    |

    hi there,
    could you send me the link where to download subway demo package for wordpress please : sheakspeer@yahoo.com
    many thanks

    Reply

    • 翔仔

      |

      your email address is rejecting my mail…

      Reply

  • 村哥哥

    |

    博主写得太详细啦,真是受益多多!!!我想问下,博主右边的那个喂乌龟那个flash,如果我要放我自己的flash文件上去,我要怎么放上去呢?怎么实现的?

    Reply

Leave a comment