An experimental strip layout for the Awesome Weather Widget Pro

awe-strip.php

<style>
/* STRIP */
.awe_strip { padding: 0; width: 100%;}
.awe_strip .awesome-weather-header { margin-left: -10px; padding: 10px 15px; }
.awe_strip .awesome-weather-strip-line { padding: 10px; white-space: nowrap; display: block; padding-right: 50px; text-transform: uppercase; overflow: hidden; overflow-x: scroll; }
.awe_strip .awesome-weather-strip-stat { padding: 0 10px; }
.awe_strip .awesome-weather-strip-line strong { padding-right: 5px; }

.awe_strip .awesome-weather-form { top: 5px; left: 5px; right: 35px; bottom: 5px; }
.awe_strip .awesome-weather-form input[type="text"] { max-height: 100%; }

.awe_strip .awesome-weather-blankout .awe-loading { width: auto; left: auto; right: 7px; top: 10px; font-size: 18px; }

.awe_strip .awe-weather-bubble { text-align: center; text-transform: uppercase; }
.awe_strip .awe-weather-trigger { background: rgba(0,0,0,0.8); top: 0; right: 0; bottom: 0; width: 35px; text-align: center; padding-top: 5px; padding-left: 5px;  }
</style>

<div id="awesome-weather-<?php echo $weather->city_slug; ?>" class="awe_strip <?php echo $background_classes ?>" <?php echo $inline_style; ?>>

<?php if($weather->background_image) { ?><div class="awesome-weather-cover" style="background-image: url(<?php echo $weather->background_image; ?>);"><?php } ?>

	<?php awe_change_weather_form( $weather ); ?>
	<?php awe_change_weather_trigger( $weather ); ?>
	
	<div class="awesome-weather-strip-line">
		
		<span class="awesome-weather-header"><?php echo $header_title; ?></span>
		
		<?php if( isset($weather->data['current'])) { ?>
			<span class="awesome-weather-strip-stat">
				<strong><?php _e('Now', 'awesome-weather-pro'); ?></strong>
				<?php if($weather->show_icons) { ?><i class="<?php echo $weather->data['current']['icon']; ?>"></i><?php } ?>
				<?php echo $weather->data['current']['temp']; ?><sup>&deg;</sup>
				<?php echo $weather->data['current']['description']; ?>
			</span>
		<?php } ?>
		
		<?php if($weather->forecast_days != "hide") { ?>
			<?php foreach( $weather_forecast as $forecast ) { ?>
			<span class="awesome-weather-strip-stat">
				<strong><?php echo $forecast->day_of_week; ?></strong>
				<?php if($weather->show_icons) { ?><i class="<?php echo $forecast->icon; ?>>"></i><?php } ?>
				<?php echo $forecast->temp; ?><sup>&deg;</sup>
				<?php echo $forecast->description; ?>
			</span>
			<?php } ?>
		<?php } ?>

	</div>
	
<?php if($weather->background_image) { ?></div><!-- /.awesome-weather-cover --><?php } ?>

</div><!-- /.awesome-weather-wrap: strip -->