My First WordPress Theme:Xialu

5

Comments

Xialu "霞路" is my first WordPress theme,a leading CSS3 style theme.It's based on McGeek's theme "Our Love Stories" .You can preview it by pressing "进入霞路" at default theme's navigation bar.In xialu,you can press "回到默认主题" in navigation bar to back to default theme.

xialu short

This theme is powered by WordPress and Love. It has two wraps , left warp for boy, right warp for girl. First wp-admin account is set as boy defaultly. Users should create a new wp-admin account to set for girl (As this post, I create a new account. I don't have a girl to write with me yet). Between the two warp is a sidebar. This sidebar supports widget. But I write a php-sidebar myself with pages, recent comments, post categories and blog-link. So I strongly do not recommend using widget because I never use it and I haven't written any style to any widget elements in this theme.

This theme is very simple in framework. But I use a lot of CSS3 style for Box. All box-background-color is 0.90 translucent, and border-radius.When users pass the mouse over the box,the box shows a shadow and 0.95 translucent, like this box is glowing.

.box{
	border:0px;
	-moz-border-radius:10px;/* for firefox*/
	-webkit-border-radius:10px;/* for chrome or safari*/
	border-radius:10px;/* for future standard browser */
	background-color:#fff;
	filter:alpha(opacity=90); /* IE alpha filter */
	opacity:0.90;/* standard browser */
}
.box:hover{
	opacity:0.95;
	-moz-box-shadow:0 0 10px #fff; /* for firefox*/
	-webkit-box-shadow:0 0 10px #fff;/* for chrome or safari*/
	box-shadow:0 0 10px #fff;/* for future standard browser */
}

As a Web designer, I got the latest version for Firefox and Chrome in Fedora Linux Opeating System. But IE didn't support border-radius, box and text shadow. IE 6 even didn't support pseudo-class for a div, and framework will be orderless. I didn’t know how tragic this theme would be in IE, but I still factor IE into my design by just giving a fully transparency to div in case of no-background-color(fixed).

Another problem is, the width of the blog-title box will be automatically scaled by the content. Because the lenghth of the content is uncertain. But in IE, the width of the box is determined by the width of the parent element.

.blogtitle{
	width:intrinsic;/*for webkit and other?*/
	width:-moz-fit-content; /*for firefox*/
}

If you like it, leave your comments and I will send it to your mailbox.

超级简单的情侣博客主题.有很多CSS3特效,所以IE下会杯具.喜欢就留言,然后我发邮件.谢谢精兵.

5 Responses to “My First WordPress Theme:Xialu”

  1. Yayi Says: