ofbiz theme layout: Re-order main screen components

Question

I'm trying to change places of ofbiz components like application bar and main container places, I know that maybe can be changes from /common/widget/CommonScreens.xml or something like that (such as another xml file), I tired without luck to find what the file responsible to render "app-navigation" and just I lost my way.

So I hope find my answer here, I want to change layout, The default interface is look like this:

What I want is (I made this using firebug) :

How I can do that?? or in another word from where I can start to do that?

leave the CSS and HTML side for me, I just want the point to start with, to edit theme layout to be like what I explained in previous screenshot.

Sorry If I cant give you what I want clearly my English didn't help me today :) but you can ask me in comment about anything if not clear yet.

Answer 1

I solved my issue, there was a little mistake from my side, and I did some modification;

In CSS file:

#app-navigation {
...
/* border-top: 0.1em solid #3E5A71; */ /*Removed*/
...
width: 200px; /*Added*/
float: left; /*Added*/
}
...
#app-navigation ul li ul li {
...
/* float: left;
 display: inline; */ /*Removed*/
...
}

/*Added*/
#container:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

In templates :

At appbar.ftl , or appbarOpen.ftl :

<div id="container"> <!-- This is the Line that I Added -->

<#if userLogin?has_content>
...

And in footer.ftl :

</div> <!-- This is the Line that I Added -->

<div id="footer">
...

Simply :)