Jump to content


Photo

Customizing iBlog Pro 3


This topic has been archived. This means that you cannot reply to this topic.
6 replies to this topic

#1 sladeh

sladeh

    Member

  • Members
  • PipPip
  • 12 posts

Posted 01 December 2009 - 10:15 PM

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:

Posted Image

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:

Posted Image

Any ideas or assistance would be excellent. Thank you!

#2 sladeh

sladeh

    Member

  • Members
  • PipPip
  • 12 posts

Posted 01 December 2009 - 11:36 PM

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?

#3 justme

justme

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts

Posted 02 December 2009 - 01:56 AM

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.

#4 Jackey

Jackey

    Advocate

  • Members


  • 683 posts

Posted 02 December 2009 - 04:04 PM

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.

#5 sladeh

sladeh

    Member

  • Members
  • PipPip
  • 12 posts

Posted 02 December 2009 - 05:05 PM

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!

#6 sladeh

sladeh

    Member

  • Members
  • PipPip
  • 12 posts

Posted 03 December 2009 - 01:21 AM

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.

#7 arpowers

arpowers

    Founder

  • Administrators
  • 3254 posts

Posted 03 December 2009 - 02:12 AM

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