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: default interface layout

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

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.

score 0 · Answer 1 · answered Aug 08 '12 at 13:34

0

take a look at the other themes in OFBiz. The bizness_time theme is already using a similar layout.

Cheers

answered Aug 08 '12 at 13:34

Erwan

46
1

Thanks, but I want to learn how to do that, not to see that :) – Al-Mothafar Aug 09 '12 at 07:41
create a new theme, by copying the one you want to modify. you can use this page to help you : https://cwiki.apache.org/confluence/display/OFBIZ/Visual+Themes+-+How+to – Erwan Aug 09 '12 at 08:00
I know the way to create theme, I copied flatgary theme, i like it, and second thing, I said I want to learn, what if I want to make layout 3 columns. – Al-Mothafar Aug 09 '12 at 09:06
I did what you said, I mean I went to bizness theme and looked how they did layout, totally different ! its just split main navigation to 2 parts !! – Al-Mothafar Aug 22 '12 at 08:56

score 0 · Accepted Answer · answered Aug 23 '12 at 09:47

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 :)

ofbiz theme layout: Re-order main screen components

2 Answers2