Inside the templates folder, create a folder with a name of your choosing - it is the name of your theme. Inside this folder, we'll split your code above into three parts.
style.css -
Code:
#Container {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#Container img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 50px;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#Header {
height: 90px;
width: 98%;
position: fixed;
top: 1%;
left: 5%;
background-opacity: 0.1;
filter: alpha(opacity=40);
}
#TopBar {
height: 50px;
width: 74%;
position: fixed;
top: 105px;
left: 30%;
background-opacity: 0.1;
filter: alpha(opacity=40);
}
#Advertisments {
height: 150px;
width: 23%;
position: fixed;
top: 105px;
left: 5%;
background-opacity: 0.1;
filter: alpha(opacity=40);
}
#Content {
height: 600px;
width: 74%;
position: fixed;
top: 170px;
left: 31%;
background-opacity: 0.1;
filter: alpha(opacity=40);
font-family: 'Arial';
overflow: auto;
word-wrap: break-word;
font-size: 15px;
}
#Content h1 {
color: #492c00;
letter-spacing: 3px;
font-size: 35px;
text-shadow: 2px 2px #6b5430;
font-family: 'Cinzel', serif;
}
#Content b {
color: #7c4b00;
letter-spacing: 2px;
font-size: 17px;
font-family: 'Marck Script', cursive;
word-wrap: break-word;
}
#Content i {
color: #8f5934;
letter-spacing: 3px;
word-wrap: break-word;
}
#Content a {
color: #761b3c;
letter-spacing: 3px;
text-decoration: none;
}
#Content a:hover {
color: #c35e83;
letter-spacing: 3px;
text-decoration: none;
}
#SiderBar {
height: 500px;
width: 23%;
position: fixed;
top: 290px;
left: 5%;
background-opacity: 0.1;
filter: alpha(opacity=40);
}
header.tpl -
HTML Code:
<html>
<head>
<title>{$browser_title}</title>
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/style.css")}
{$header->loadAdditionalStyle()}
</head>
template.tpl -
HTML Code:
{include file="{$root}{$temp}{$theme}/header.tpl"}
<body>
<div id='Container'>
<img src="http://i.imgur.com/vsIBWLz.png?1" alt="http://i.imgur.com/vsIBWLz.png?1">
</div>
<div id='Header'>
<p></p>
</div>
<div id='TopBar'>
<p>Here will be the links such as: 'Inbox' 'Alerts' 'Notices' and also the currency links, probably also with a 'Random Online User: _____' bit too?</p>
</div>
<div id='Advertisments'>
<p></p>
</div>
<div id='Content'>
<h1>{$document_title}</h1>
{$document_content}
</div>
<div id='SiderBar'>
{$sidebar}
</div>
<div id='Footer'>
{$footer}
</div>
</body>
</html>
Also try rendering {$site_name} and use the built in {$menu} if you can (you can use the default css by adding {$header->loadStyle("{$home}{$css}/menu.css")} to your header - or just examine that code and build from there, of course). (Otherwise be sure to direct links back two directories if you're going to use your own - that way they work across all pages. "../../myadopts.php" instead of just "/myadopts.php", for example.) Be sure to figure out how you'll manage tabs on the profile page, too. Don't forget to swap out a favicon in your root directory (not in the templates folder).
Once you have the files ready to go, go into Admin CP and down to Themes and install the theme there: Enter the theme name and folder (these should be identical and match the case of the folder you created). Leave the header, body and style textboxes all blank. (In Mysidia v1.3.4 you must click on the checkbox beside 'The style has been uploaded to the site, and is pending for installation' at the very bottom of the theme creation form. Not doing so will wipe the template files you just put in place.) Submit!
If you would like to set it as your main theme later, in the Admin CP go down to Settings > Basic Settings and this will open up a page for Global Site Settings. Write the name of your theme in the Default Theme input box and hit 'Change Global Settings' to save it. If you'd like to remove people's ability to select other themes, in the Admin CP go to Links > Edit Links and it will open up the Site Links Manager. All you have to do is remove the link that would take visitors to changestyle.
As for constructing your Top Bar how you like it,
please check out this thread I made, as it'll require some custom effort on your part.