S/steel guages

[fastbysuzuki]

Hi, could you please give me some guidance on rearranging the gauges, I would like to move them around so the order suits our requirement.
  Thanks

[Andy9164]

Hi,
Its quite easy to do.

Open your gauges-dark.php (may be called something else) file and you should see several sections like this. This is for one row of gauges.

         <div class="row" style="height: 410px;"> <!-- Start gauge row -->
            <div id="tip_6" class="gauge box_img3">
               <canvas id="canvas_wind" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_wind; ?></h3>
               </div>
            </div>

            <div id="tip_7" class="gauge box_img3">
               <canvas id="canvas_dir" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_windd; ?></h3>
               </div>
            </div>

            <div id="tip_10" class="gauge box_img3">
               <canvas id="canvas_rose" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_windrose; ?></h3>
               </div>
            </div>
         </div> <!-- End gauge row -->

To change the order simply re-order the sections, so for example, in the above code I have a row of 3 gauges in the following order, wind speed (canvas_wind), wind direction (canvas_dir) and Wind Rose (canvas_rose).

If you re-arrange the code to that below then the row of 3 gauges would then show in the following order, wind direction (canvas_dir), Wind Rose (canvas_rose) and Wind Speed (canvas_wind).

         <div class="row" style="height: 410px;"> <!-- Start gauge row -->
            <div id="tip_7" class="gauge box_img3">
               <canvas id="canvas_dir" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_windd; ?></h3>
               </div>
            </div>

            <div id="tip_10" class="gauge box_img3">
               <canvas id="canvas_rose" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_windrose; ?></h3>
               </div>
            </div>

            <div id="tip_6" class="gauge box_img3">
               <canvas id="canvas_wind" class="gaugeSizeLrg"></canvas>
               <h3 style="text-align: center;"><?php echo $Tr_wind; ?></h3>
               </div>
            </div>
         </div> <!-- End gauge row -->

You can also move the gauges between rows by moving code from one row section to another..

Andy

http://www.midlifedad.me.uk/weather

[fastbysuzuki]

Hi Andy thanks for the reply and help much appreciated.