标签归档：theme

Drupal的安装及ZEN主题的使用

由 发表于 ┊3,463 PV

Drupal的安装

1. 下载程序Drupal 6.19及中文包
2. 新建一个数据库
3. 解压缩后进行安装，这里要注意的是sites\default\default.settings.php这个文件是要复制一份并改名为settings.php。

ZEN主题的使用

1. 下载ZEN主题
2. 解压后放到sites\all\themes\目录下，如果没有themes目录则建立一个

以ZEN主题创建自己的主题

1. 拷贝STARTERKIT目录到sites\all\themes\目录下并改名，如fy907
2. 把STARTERKIT.info.txt改名为fy907.info
3. 替换template.php和theme-settings.php文件中的STARTERKIT为fy907
4. 登陆后台，在admin/build/themes下找到新建的主题并启用。

添加江阴印刷网主题自定义菜单并支持二级分类

由 发表于 ┊3,726 PV

如果你在使用江阴印刷网风格,而且升级到了WordPress3.0,那么你可以看看主题在3.0下首页的分类名不显示的解决办法，而这篇是使主题支持自定义菜单并支持二级分类。

编辑functions.php文件，在 include (TEMPLATEPATH . ‘/settings.php’); 下添加

1
2
3
4
5
6
7
8
9
register_nav_menus( array(
    'primary' => __( 'Primary Navigation', 'cnt1' ),
) );
   
function cnt1_page_menu_args( $args ) {
    $args['show_home'] = true;
    return $args;
}
add_filter( 'wp_page_menu_args', 'cnt1_page_menu_args' );

编辑header.php文件，查找下例代码
继续阅读 →

解决江阴印刷网风格适应WordPress3.0

由 发表于 ┊3,890 PV

如果你正在使用江阴印刷网风格,而且升级到了WordPress3.0,会出现首页的分类名不显示，搜索了一下官方，找到了解决办法：

编辑主题的index.php文件，找到

1
$wp_query->is_category = false;

改为

1
$wp_query->is_category = true;

再找

1
<?php single_cat_title(); ?>

改为

1
<?php printf( __('%s','ctn1'), single_cat_title('', false)); ?>

这样就可以正确显示分类名，如果还有其它问题，可以留言解决。

WordPress主题的jQuery应用之TAB切换效果

由 发表于 ┊2,341 PV

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".entry-foot span:first").addClass("current");  // 为第一个span添加 .current 的样式，默认选中
$(".entry-foot ul:not(:first)").hide();  //ul 不是第一个时隐藏
$(".entry-foot span").mouseover(function(){  // 鼠标移到 span 上时触发函数
$(".entry-foot span").removeClass("current");  //为第一个 span 移除 .current 样式
$(this).addClass("current");  //为触发的 span 添加样式
$(".entry-foot ul").hide();  // 隐藏 ul
$("."+$(this).attr("id")).fadeIn("slow");  // 这句是核心，class(.) 和触发 span 的ID 一致的 fadeIn(渐显)
});});

HTML代码如下：

1
2
3
4
5
6
7
8
9
<div class="tab">
<p>
<span ID="tab1">tab1</span>
<span ID="tab2">tab2</span>
<span ID="tab3">tab3</span></p>
<ul class="tab1">以 LI 形式呈现的 tab1 的内容</ul>
<ul class="tab2">以 LI 形式呈现的 tab2 的内容</ul>
<ul class="tab3">以 LI 形式呈现的 tab3 的内容</ul>
</div>

添加CSS代码如下：

1
2
3
4
5
6
7
.entry-foot{background-color:#FAFAFA;margin:5px 8px;padding:5px 10px;}
.entry-foot p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:6px;padding:2px 5px;}
.entry-foot p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.entry-foot p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.entry-foot li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.entry-foot .mhot,.entry-foot.allhot{display:none;}

原文：http://www.xiaorsz.com/jquery-realize-tab-switch-effect/

WordPress主题的jQuery应用之幻灯片效果

由 发表于 ┊2,452 PV

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function slideSwitch() {
var $current = $("#slideshow div.current");
if ( $current.length == 0 ) $current = $("#slideshow div:last");
var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
$current.addClass('prev');
$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
$current.removeClass("current prev");
});
} $(function() {
$("#slideshow span").css("opacity","0.7");
$(".current").css("opacity","1.0");
setInterval( "slideSwitch()", 3000 );
});

HTML代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ID="slideshow">
    <div class="current">
        <a href="http://www.koryi.net/"><img src="1.jpg" alt="" /></a>
        <span>The First Image</span>
    </div>
    <div>
        <a href="http://www.koryi.net/"><img src="2.jpg" alt="" /></a>
        <span>The Second Image</span>
    </div>
    <div>
        <a href="http://www.koryi.net/"><img src="3.jpg" alt="" /></a>
        <span>Yes, thd third.</span>
    </div>
</div>

添加CSS代码如下：

1
2
3
4
5
6
#slideshow{position:relative;height:195px;width:425px;border:10px solid #ddd;margin:0 auto 15px;}
#slideshow div{position:absolute;top:0;left:0;z-index:3;opacity:0.0;height:195px;overflow:hidden;background-color:#FFF;}
#slideshow div.current{z-index:5;}
#slideshow div.prev{z-index:4;}
#slideshow div img{display:block;border:0;margin-bottom:10px;}
#slideshow div span{display:none;position:absolute;bottom:0;left:0;height:50px;line-height:50px;background:#000;color:#fff;width:100%;}

原文：http://www.happinesz.cn/archives/1015/

WordPress主题的jQuery应用之返回顶部滑动效果

由 发表于 ┊2,357 PV

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

1
2
$('.top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
$('.bot').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);});

在footer.php文件中加入代码：

1
2
3
4
<div ID="goto">
    <div class="top">顶端</div>
    <div class="bot">底端</div>
</div>

在CSS文件中添加下例代码：

1
2
3
4
5
*html #goto { position: absolute; top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));}
#goto { position: fixed; left: 50%; top: 50%; bottom: auto; margin-left: -500px; z-index: 999;}
#goto .top, #goto .bot { width: 28px; height: 41px; margin: 5px 0; background-image: url('images/goto.gif'); background-repeat: no-repeat; display: block; text-indent: -9999px; cursor: pointer;}
#goto .top { background-position: 0 0;}
#goto .bot { background-position: 0 100%;}

原文：http://immmmm.com/added-sliding-effect-enhanced.html

WordPress主题的jQuery应用之标题提示

由 发表于 ┊1,955 PV

首先在header.php的head标签中加载jQuery库

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var sweetTitles = {
    x : 10,                            
    y : 20,                            
    tipElements : "a",                 
    init : function() {
        $(this.tipElements).mouseover(function(e){
            this.myTitle = this.title;
            this.myHref = this.href;
            this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);       // url 超过 30 个字符的部分用 ... 代替
            this.title = "";
            var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
            $('body').append(tooltip);
            $('#tooltip')
                .css({
                    "opacity":"0.8",                   // 0.8 为透明度可自行根据喜好调整数字
                    "top":(e.pageY+20)+"px",
                    "left":(e.pageX+10)+"px"
                }).show('fast');   
        }).mouseout(function(){
            this.title = this.myTitle;
            $('#tooltip').remove();
        }).mousemove(function(e){
            $('#tooltip')
            .css({
                "top":(e.pageY+20)+"px",
                "left":(e.pageX+10)+"px"
            });
        });
    }
};
$(function(){
    sweetTitles.init();
});

在CSS文件中添加下例代码：

1
2
3
body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

如果你还用了@回复这样的jQuery提示效果的话会被标题提示遮掉，可以参照下面解决：
代码中的tipElements : “a”改成tipElements : “a:not(‘.atreply’)”来排除class为atreply的a标签，或者用tipElements : “a:not([href^=’#’])”来排除href为锚点的a标签

原文：http://leeiio.me/sweet-titles-for-jquery/

江阴印刷网新版风格

由 发表于 ┊11,004 PV

其实江阴印刷网换上新风格有一段时间了，只是首页的JS幻灯片一直没有完成。今天总算找到了一个，换上了。

风格仿的是Discuz的Supesite的默认风格，支持二级分类，后台自定义MEAT，广告，统计代码等。

主题要改的地方是index.php文件的array(1,3,4,5,6,7)，把里面的数字改成你想显示的分类ID号，幻灯片是自动读取文章中的图片，演示中最下面的最新图片是用advanced-post-image做的(注意：这个插件要求在你的uploads目录下建立thumb目录及写入权限)

下载：CMS THEME NO.1
截图
jyprint

在用的WP风格

由 发表于 ┊2,870 PV

没什么技术含量的，都是东抄西借，想名字也麻烦，就直接用缩写命名了(Blog Theme No. 1)，主题侧栏支持 WordPress 自带的 Widgets 功能。
后台可自定义关键，Meta，可选显示页面或分类，可用Google自定义搜索，带公告栏（在博客首页的文章区域上方显示），自主义侧栏RSS订阅地址，可选显示广告，可选显示备案和统计。

btn1

下载：btn1