5 BlueBubble wordpress theme hacks

BlueBubble is one of the free, minimal and elegant wordpress theme for simple portfolio and blog. This theme was made by Thomas Veit and Mike Walsh. And I’m using this theme for this blog as you can see.

However, some features or styles of BlueBubble theme seems to be broken. Some of the css maybe not tuned well. So, here i would like to share some hacks that i did to make it looks perfect (at least for me).

Belows are the problems which I faced:

1. The size/look of search button in search widget varies/depend on the user’s browsers

To solve the problem, i choose to hide the search button. You can do that by opening the style.css file and search for the following code.

#searchsubmit:hover {
	cursor: pointer;
	background: #CCCCCC;
}

Replace the code with:

#searchsubmit: {
	display: none;
}

2. The sidebar is quite narrow for me.

So, I decided to make it wider and lower the margin between the sidebar and the content div, because the margin looks like too much. To edit the width, you just need to find the codes below in style.css and update the width value.

#sidebar {
	font-family: verdana, arial, tahoma;
	font-size:12px;
	width:210px;
	position:relative;
	float:left;
	margin:0;
	padding: 0;
	line-height: 20px;
}

3. Overlapping between avatar and the info of author in author’s page in dark theme.

I faced this issue since BlueBubble 3.3 but the problems still not fixed yet up to the latest version of BlueBubble; 3.5. Search for the code below:

#entry-author-info #author-avatar {
	background: #222 !important;
	border: 1px solid #111 !important;
	border-right: 1px solid #262626 !important;
	border-bottom: 1px solid #262626 !important;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	margin: 5px -90px 0 0;
	padding: 7px;
}

Set the margin as 5px 5px 0 0. Then add the code below into dark.css

#entry-author-info #author-description {
	width:520px;
	float: left;
	word-wrap: break-word;
	position:relative;
	margin: 0 0 0 10px;
}

4. Shortcode font size is too small.

I do believe that the font should be in bigger size so that it will looks catchy and people will be attracted to it. Open style.css and search for alert, dload, info, and idea class.

Update the values of padding and add font-size as follow:

padding: 15px 15px 15px 50px;
font-size: 18px;

5. Unattractive style of blockquote

I add more style for blockquote, to make it looks nicer (hopefully). You can search for blockquote class in style.css and dark.css and update the code as follow:

blockquote {
	border-left:4px solid #161616 !important;
	margin-bottom:16px;
	padding:0 12px;
	font-family: Georgia,"Bitstream Charter",serif;
	font-style: italic;
	font-size: 18px;
	color: #3e3e3e !important;
}

Conclusion

This is just a small css tweak / hack that I managed to do. I’m not yet explore the other parts and function of this theme such as portfolio and contact page. If you are using the BlueBubble theme, do share you experience in comments below.