Weather by You!

Templates and Projects support => Php templates => Topic started by: fastbysuzuki on July 01, 2017, 04:32:08 AM

Title: S/steel guages
Post by: fastbysuzuki on July 01, 2017, 04:32:08 AM

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

Title: Re: S/steel guages
Post by: Andy9164 on July 11, 2017, 03:38:08 AM

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 (http://www.midlifedad.me.uk/weather)

Title: Re: S/steel guages
Post by: fastbysuzuki on July 20, 2017, 07:41:15 AM

Hi Andy thanks for the reply and help much appreciated.