Adding Additional Images to Header Area

The solution depends on what do you want to happen to the left/right logos on narrow screens:
– would you rather reduce the size of all three and display them on the same row at all times or…
– would you have the left and right ones float above and below the main logo when the screen is narrow?

In first case, you need to set some rules to shrink the size of all your logos if the width of the span10 is below some value, using media queries. For example, let’s suppose you want to start shrinking them on displays lower than 980px wide. You’ll need to:

@media (max-width: 979px) {
.brand.span10 {
	position: relative;
}
/* this tells the children to use this element as referrence when
 * calculating their width as percentage, not the page width
 */
.brand.span10 a.site-logo img {
	max-width: 33%;
}
/* set main logo to one third of the span
 */
.brand.span10 a.right-logo img,
.brand.span10 a.left-logo img {
	max-width: 25%;
}
/* set max width of the right and left logos, assuming you'll give
 * them these classes, you want them smaller and the'll also have
 * some links on them. If not, addapt your css selectors to your case.
 */
}

So this solution makes sure that no matter how narrow the screen, all three logos will shrink accordingly and remain on one line.

The other solution is to create a .row-fluid structure inside your .brand.span10 which will divide that span into 12. Assign each logo a spanX, spanY and spanZ so that X+Y+Z = 12 and they will maintain the one row formation on wider screens and rearrange one on top of the other on narrower ones.

Of course, for this to work you need to adapt the preg_replace on 4th line to add your extra logos.
For first case (all logos in one line):

return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1>)(.*?)(</h1>)', '%').'%'), array('brand span10 offset1', '$1{some_escaped_html_for_left_logo}$2{some_escaped_html_for_right_logo}$3'), $output);

You need to replace {some_escaped_html_for_{direction}_logo} with actual escaped html (escaping means you need to put backslashes before apostrophes or it\’ll break). For example, replace the accolade for right logo with

<a href="some_custom_link" title="some_custom_title" class="right-logo"><img src="some_path_to_some_right_logo" alt="some_alt_for_right_logo" /></a>

For second case:

return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1)>(.*?)(site-logo)(.*?)(</h1>)', '%').'%'), array('brand span10 offset1', '$1 class="row-fluid">{some_escaped_html_for_left_logo}$2span6 $3$4{some_escaped_html_for_right_logo}$5'), $output);

Mind that in this case your {escaped html} needs to have span3 class assigned to the anchor. Example:

<a href="some_custom_link" title="some_custom_title" class="right-logo  span3"><img src="some_path_to_some_right_logo" alt="some_alt_for_right_logo" /></a>

In the example above I used span3 for left and right logos and span6 for middle one. Change 3-6-3 to 2-8-2 or 4-4-4. Just make sure they add up as 12.

This should solve your problem. By the way, good job on theme customization. I would, however, get rid of the text-shadow on titles in footer and featured pages:

h1, h2, h3, h4, h5, h6 {
	text-shadow: none;
}

I’m sorry, I made a small omission. The preg_replace’s in the above solutions both need to have the ‘s’ regex modifier so the dot also matches newlines. And I realised it after the editing time expired.

So, for first case the preg_replace is:

return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1>)(.*?)(</h1>)', '%').'%s'), array('brand span10 offset1', '$1{some_escaped_html_for_left_logo}$2{some_escaped_html_for_right_logo}$3'), $output);

and for the second:

return preg_replace(array('%brand span3%', '%'.preg_quote('(<h1)>(.*?)(site-logo)(.*?)(</h1>)', '%').'%s'), array('brand span10 offset1', '$1 class="row-fluid">{some_escaped_html_for_left_logo}$2span6 $3$4{some_escaped_html_for_right_logo}$5'), $output);