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:
    Oct 30th, 2010 Firefox 4.0b6 Linux 00:57 Reply

    来个沙发,,换了新主题..不错.另一个也发來看看.不素说情侣的么?

    • Mini Dragon Says:
      Oct 30th, 2010 Firefox 3.6.12 Fedora  13 09:09 Reply

      @Yayi 点那个"进入霞路" 主要主题没有更换啊

  2. Leigh Says:
    Oct 30th, 2010 Chrome 9.0.567.0 Windows 7 10:25 Reply

    左右分颜色好点

    • Mini Dragon Says:
      Oct 30th, 2010 MSIE 6.0 Windows XP 18:14 Reply

      @Leigh 嗯 配色搞好了...IE6下面杯具了~

  3. heson Says:
    Nov 30th, 2010 Firefox 3.6.12 Windows 7 18:20 Reply

    不错不错```有演示么?!

来了你就吐槽我吧!






Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).