Add Sina Weibo Support for Greyshade Theme of Octopress

Posted on   |   In   |  

I am not familiar with CSS and ROR until now. It is not easy for me to add Sina Weibo support as the slidebar shows. So let me note it.

  • Firstly, add the following code to “octopress/_config.yml” file. Note that the weibo_user should be your weibo id, not your nickname.
1
2
3
4

# Weibo link
weibo_user: thankforyou

Behind of the following code:

1
2
3
4
5

# ----------------------- #
#   3rd Party Settings    #
# ----------------------- #

  • Secondly, add the “weibo.png” to “octopress/source/images/social” dirctory.
  • Thirdly, add the following code to “octopress/sass/parts/_header.scss” file.
1
2
3
4
5
6
7
8
9
	
&.weibo{
	background: image-url('social/weibo.png') center no-repeat #e32529;
	border: 1px solid #e32529;
	&:hover{
		border: 1px solid darken(#e32529, 10%);
	}
}

In front of the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

&.facebook{
	background: image-url('social/facebook.png') center no-repeat #3B5998;
	border: 1px solid #3B5998;
	&:hover{
		border: 1px solid darken(#3B5998, 10%);
	}
}
&.google{
	background: image-url('social/google.png') center no-repeat #C83D20;
	border: 1px solid #C83D20;
	&:hover{
		border: 1px solid darken(#C83D20, 10%);
	}
}
&.twitter{
	background: image-url('social/twitter.png') center no-repeat #55CFF8;
	border: 1px solid #55CFF8;
	&:hover{
		border: 1px solid darken(#55CFF8, 10%);
	}
}
……

  • Fourthly, add the following code to “octopress/source/_includes/header.html” file.
1
2
3

Behind of the following code:

1
2
3
4
5

……
<nav id="sub-nav">
	<div class="social">

Ok, have done.