Changing layout of Details page?

[zopemgr]

Hello,
First off, thanks for Dataface, its a really cool application. What I'd like to do is customize the layout of the Details page. There are times when the vertical, 1 field in a row, default layout isn't very practical. (Ex. - Say I have two fields for times... it would make more sense to have them side by side instead of vertically). However, I haven't been able to find where to change this.
Can you shed any light on my situation?

Thanks!
Eric

[shannah]

OK.. I had to try this out before posting.

Version 0.6.0 will allow you to easily define a different layout for details mode. For 0.5.3 you have to do a little bit of stylesheeting.

Follow these steps to be able to customize the layout:

1. Open the file Dataface/templates/Dataface_QuickForm_element.html and change the first line to:
   

   Code: Select all

   
   
   You are just adding an ID to the div tag so that we can reference it using CSS.
   
   


2. Create a directory named "templates" in your application folder and create a file named "head_slot.html"
   Your directory structure will now look like:
   

   
        /path/to/your_apps
                    +------/templates
                        +---------/head_slot.html
       

   
   The contents of the head_slot.html file will automatically get rendered in the portion of the Dataface web pages.
   


3. Create a stylesheet named "styles.css" in your application directory. And add the following. For this example, assume you have a FirstName field and LastName field that you want to have displayed side by side:
   

   Code: Select all

   #FirstName-wrapper {
    display: inline-block;
    width: 200px;
}

#LastName-wrapper {
    display: inline-block;
    width: 200px;
}


   
   This just tells the browser to render the FirstName and LastName fields inline instead of as blocks. It also sets their widths so that they can fit nicely.
   


4. Finally add the following to the head_slot.html file to import the stylesheet you just made:
   

   Code: Select all

   


   
   

Hopefully this helps. Let me know how it goes.

Best regards

Steve

[zopemgr]

Fantastic, thanks for your help!
I'm at work and can't try it right now, but I will check it out when I get home.

Thanks again!
Eric