Use Image Title in iNove

The most frequently asked question about iNove is 'How can I change the title to an image?' Some people using the iNove theme and they want to remove the text title and show an image/logo instead. Now I'll show you how to change the title to an image.

关于 iNove 主题, 被问得最频繁的莫过于 "怎样将博客的标题换成图片?" 这个问题. 一些朋友使用了 iNove 主题, 而他们希望能将文字标题换成他们的个性图片. 那么, 现在我将为你演示如何将标题换成图片.

Step 1 - Create your image title. In fact, I supply a PSD file (title_psd/title.psd) in iNove package, you can edit it for your blog.
步骤 1 - 创建一个标题图片. 其实我已经在主题包中提供了一个 PSD 文件 (title_psd/title.psd), 你可以编辑一下以适应你的博客使用.

If you have created an image yourself, then you can ignore 1.1~1.3 and jump to 1.4.
如果你已经自己创建了一个个性标题图片, 那么你可以忽略 1.1~1.3, 直接跳到 1.4.

1.1 - Open title_psd/title.psd in Photoshop, change the text on 'NeoEase' layout. (If the canvas is not long enough, please change the width of canvas.)
1.1 - 在 Photoshop 中打开 title_psd/title.psd, 修改 'NeoEase' 图层的文字. (如果画布长度不够, 请修改一下画布宽度.)

1.2 - Hide 'Background' layout.
1.2 - 隐藏 'Background' 图层.

1.3 - Save as title.gif (GIF file), and set 'Matte' to black color.
1.3 - 保存为 title.gif (GIF 图片), 并且将 '杂边' 设置为黑色.

1.4 - Move title.gif file to 'img' directory. (If you have an GIF image, please rename the image to 'title.gif'.)
1.4 - 将 title.gif 文件移动到 'img' 目录(文件夹). (如果你已有一个 GIF 文件准备作为标题图片的, 也请移动到这里.)

Step 2 - Now, your image is ready and you have to edit 'style.css' file to change the title.
步骤 2 - 现在你的图片已经准备就绪了, 但你还需要编辑一下 'style.css' 文件以更换标题.

2.1 - Open the style.css and find '#title a'.
2.1 - 打开 style.css 文件, 并在文件中找到 '#title a'.

2.2 - Close or remove the following lines.
2.2 - 屏蔽或者移除以下代码.

1
2
3
4
5
6
7
8
9

#title a {
	text-decoration:none;
	color:#FFF;
	/*width:250px;*/
	height:30px;
	display:block;
	font-family:"Trajan Pro";
	letter-spacing:0;
}

2.2 - Open the following lines. (remove the beginning /* and the ending */)
2.2 - 激活下面的代码. (移除掉开始位置的 /* 和 结束位置的 */ 即可)

1
2
3
4
5
6
7
8
9

#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px; /* change '250' to the width of you title.gif file */
	height:30px;
	text-indent:-999em;
	display:block;
}

If you want to remove the tagline and increase the height of the title, follow the next steps.
除此之外, 如果你还想移除掉副标题部分和增加标题的高度, 你可以跟着做下面的一些步骤.

Step 3 - Remove the following line in templates/header.php file.
步骤 3 - 在 templates/header.php 文件中移除下面的代码.

1

<div id="tagline"><?php bloginfo('description'); ?></div>

Step 4 - Find '#title a' in style.css and change 'height:30px;' to 'height:44px;'.
步骤 4 - 在 style.css 文件中找到 '#title a', 将 'height:30px;' 改为 'height:44px;'.

1
2
3
4
5
6
7
8
9

#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px;
	height:44px; /* change 30px to 44px */
	text-indent:-999em;
	display:block;
}

Step 5 - If you need higher title, please modify the attributes of '#caption' and '#title a', for example:
步骤 5 - 如果你需要更高的标题, 可以修改一下 '#caption' 和 '#title a' 的相关属性, 下面是一个例子. 如果你使用中文语言 (将 WPLANG 改成了 zh_CN 或者 zh_TW), 那请打开 chinese.css 文件修改一下 '#caption' 的属性.

1
2
3
4
5
6
7
8
9
10
11
12
13

#caption {
	height:65px; /* change 44px to 65px (44 + 21 = 65) */
	padding:25px 30px 0; /* change 21px to 0 */
}
#title a {
	background:url(img/title.gif) no-repeat;
	text-decoration:none;
	color:#FFF;
	width:250px;
	height:65px; /* change 44px to 65px */
	text-indent:-999em;
	display:block;
}