Archived

This topic is now archived and is closed to further replies.

  • 0

Customizing iBlog Pro 3

Question

Posted · Report post

I am trying to customize the iBlog Pro theme for a company which has purchased this theme to use. I am wanting to add a few things such as a "quick search" on top of the navbar and below the header, shift the twitter and social networks to the top left corner, and add drop down to the navigation bar as well. Here is a mock up I had created in photoshop: PHSqDl.jpg Right now, I'm having difficulties with the feature footer and changing the colors. There is a white bar that is above and below the color change. I could not seem to find which image is being used to create the border for the feature post. Here is what I'm talking about specifically: ebQWS.png Any ideas or assistance would be excellent. Thank you!

Share this post


Link to post
Share on other sites

6 answers to this question

Posted · Report post

Okay well I figured out the footer ordeal. Now I'm wondering if it is possible to move the social network links over to the left? And move the twitter below them as in the photoshop mock up?

Share this post


Link to post
Share on other sites

Posted · Report post

I know just enough CSS to be dangerous, so no warranties here. In style.css, I see:

.nav-icon {float: right;margin:13px 0 0 8px;}
I would guess you want to change the right to left - you may or may not want to play with the margins. In the same file you find the twitter code:
#feature-footer .twitter {float: right;margin-right: 16px;display: inline;color: #777;}
		#feature-footer .twitter a{color: #333;}
Again, I would change the float to left. Now, to actually move it to the top of the page, you would need to find and move that code. In includes/pro/template_feature.php,line 33, I see
<?php include (LIB . '/_twittermessages.php'); ?>

I would try moving that to header.php. Hopefully this is not completely off base. Andrew, if I am all wet just let me know and I will be properly chastised. :) Good luck.

Share this post


Link to post
Share on other sites

Posted · Report post

I'm afraid those nice rounded corners only show in Firefox and Safari and not in IE. I suspect the lines and corners are rendered at the client side.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the advice everyone! I had managed to get the social links to the left, and I fixed the footer. It was the image file post-bg-short.png that needed altering. Justme, thanks for the code bits. I've been finding it difficult to find where stuff is located at and firebug isn't helping too much lol. I'll tinker around with that!

Share this post


Link to post
Share on other sites

Posted · Report post

Figured out had to create a new div in the header.php under line 108 (from the closing div)

<?php include (LIB.'/_iconlinks.php'); ?>
	</div>
So I created 4 new lines with the following code:
<div>
		<?php include (LIB . '/_twittermessages.php'); ?>
	
				</div>

I put the break in there to push it away from the navbar, or else it was sitting right on top of it. To note, after shifting the social network icons to the left and removing the header text, you must put in a bumper image or graphic to push the header down or else it chops off the icons.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the report, I'm sure that will help people a lot

Share this post


Link to post
Share on other sites