Change Layout of Detailview

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

Hello,

I am trying to change the layout of the detailview. I would like to have the detailpanels tiled, rather than stacked. I made the following changes in style.css so far:

/* detail view */
.detail.view,
.detail table,
table.detail
{
padding: 0;
[color=#ff0000]width: 45%;[/color]
}

and

.detail.view, .detail table, table.detail {
margin:10px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
[color=#ff0000]float: left;[/color]

}

which gives me the result that you can see in the screenshot. It’s a start, but not exactly what I need. I’d like the first panel to be in the top left corner, then the second panel in the right top corner, then the third panel below the first panel ect…

Is there any way to edit each individual panel separately?

Thanks

2

You’re editing the CSS. If you can wrap them in some custom divs or find the positioning in the CSS, you can move them anywhere you want.

3

Is there any way you could point me in the right direction? Where (in what file) can I wrap them in a custom id? Sorry, I’m pretty new with all this…

4

Sorry, I don’t know which file(s) generate the Detail view, but if you can find them you can just pop in something like the div below. You can look at the developer documentation to see where that’s coming from.

<div id="mydiv> <p>…All kinds of code here…</p> </div> <p>Then you can move it around as you please with the CSS.</p>