Hello and welcome Saeed,
When you say you want the header to have two colours side by side, I am assuming something like this...
If so then the easiest way to do this is add another <div></div> tag inside the page-header in the layout files frontpage.php and general.php
You can then style it to only show up in the first part of the header using height and width, as well as add a background colour just using CSS, at the same time setting the page header to the second background colour.
I hope that helps?
EDITED:
And here is the code to test out in your copy_of_leatherbound/layout/general.php
As you will see I have also added in-line styles to the various elements, if this works as you want it to, you can remove the in-line styles and add the actual css from those styles to your theme's stylesheet.
<?php if ($hasheading) { ?>
<div id="page-header" style="width: 100%; height:125px; padding: 0; margin: 0;">
<div id="red" style="width: 50%; height:100%; padding: 0; margin: 0; background-color: #DA5013;">
<div id="page-header-wrapper" class="wrapper clearfix" style="width: 100%; height:100%; padding: 0; margin: 0; background: none;">
<h1 class="headermain inside" style="padding-left: 25px;"><?php echo $PAGE->heading ?></h1>
</div>
</div>
<div class="headermenu" style="position: absolute; top: 10px; right: 10px;"><?php
echo $OUTPUT->login_info();
if (!empty($PAGE->layout_options['langmenu'])) {
echo $OUTPUT->lang_menu();
}
echo $PAGE->headingmenu ?>
</div>
</div>
<?php } ?>
The finished result looks like this...
Mary