Been trying to style up GMAP's Infobox - BALL-ACHE!!

[stuartpb]

I'm on the finishing touches for my website now, and one thing I wanted to alter was the infobox on the live flights google map. I've managed to pull off a decent enough style for it, but it isn't how I originally wanted it. I learned that you have to apply width and height to the container in-line, I tried doing it with CSS first and the styling gets ignored. I think this is because the browser renders the script container first, and then the containers content. Once you have a decent sized container, you can style the contents up as normal in the CSS stylesheet. The file that needs amending is the acarsmap.tpl file, found in the core/templates folder. Here's my markup:

<script type="text/html" id="acars_map_bubble">

The div below is the container which has the size styling applied in-line.

<div style="width:280px;height:165px;" class="bubble"> 

I chose to use a table for the content, but you can use divs, lists etc too. If you are going to be sizing the inner content container, you need to do this in-line too.

	<table style="width:100%;" class="bubbletable">
	<tr>
		<td id="bubblelogo" colspan="2"><img src="http://execair.org/frontimages/bubblelogo.png" alt="ExecAir Flight Info"/><span>Flight N°:</span> <%=flight.flightnum%></td>
	</tr>
	<tr>
		<td style="width:32%" class="bubbleheader">Pilot:</td>
		<td><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%></a> - <%=flight.pilotname%></td>
	</tr>
	<tr>
		<td class="bubbleheader">Schedule:</td>
		<td><%=flight.depicao%> to <%=flight.arricao%></td>
	</tr>
	<tr>
		<td class="bubbleheader">Status:</td>
		<td><%=flight.phasedetail%></td>
	</tr>
	<tr>
		<td class="bubbleheader">Dist Remain:</td>
		<td><%=flight.distremaining%> <?php echo Config::Get('UNITS');?></td>
	</tr>
	<tr>
		<td class="bubbleheader">Time Remain:</td>
		<td><%=flight.timeremaining%></td>
	</tr>
</table>
</div>
</script>

If any of you guys try this, Nabeel has kindly left some advice in the file, which helped. Here's what the infobox looks like with the CSS applied:

Not too shabby, but not how I wanted it. I did want to utilise the tabbed infobox, but couldn't figure out how to implement it in the phpVMS acarsmap.js.

Cheers,

Stu

[TAV1702]

That's looking pretty good. Nice looking site you have going on.

[Guest lorathon]

Thanks for the info Stuart

You inspired me to work on mine

http://www.phoenixva.org/index.php/acars

[mark1million]

Hey Jeff,

You put us all to shame

Very nice

[Guest lorathon]

Thanks but it is all because of Stuart. He inspired me to start messing with it. Thanks again Stuart for posting the styling you did.

[stuartpb]

Thanks guys, and nice job Lorathon, the infobox looks pretty cool!