Move up some icons?

HTML & CSS
1

Hi all,

Added a weather module to a Joomla test site I’m putting together. You will notice, in the “forecast”, 4 days along with temps and small icons. It looks just like I’d like it to, but the icons are a tad too low. Don’t know how else to explain it other than to say that I’d like to raise the icons up about 15-18px to align with the names of the days.

Here’s the code…

/*------------------------------------------------------------------------
# mod_sp_weather - Weather Module by JoomShaper.com
# ------------------------------------------------------------------------
# Author    JoomShaper http://www.joomshaper.com
# Copyright (C) 2010 - 2012 JoomShaper.com. All Rights Reserved.
# License - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: http://www.joomshaper.com
-------------------------------------------------------------------------*/

.weather_sp1{padding:5px}

.weather_sp1_c{margin:0 0 10px}

.weather_sp1_cleft {  float: none !important;  text-align: center;}

.weather_sp1_cleft img.spw_icon_big {  margin-right:-60px;}

p.spw_current_temp{font-size:18px;margin:-30px 0 0 15px}

.weather_sp1_cright{float:left}

p.weather_sp1_city{font-size:24px;line-height:24px;font-weight:700;margin:15px 0 0;padding:0}

.block_even,.block_odd{text-align:center}

span.weather_sp1_temp,span.weather_sp1_list_temp{font-size:10px}

.list_even,.list_odd{width:100%;border-top:1px dashed #e0e0e0}

span.weather_sp1_list_temp,span.weather_sp1_list_icon{display:block;float:left;width:33%}
span.weather_sp1_list_day{display:block;width:33%}

img.spw_icon_big{height:96px}

img.spw_icon{height:32px}

I played with it a bit and got this close. What it used to look like was all 3 items in a row:

Monday 26/46 ICON

Help, please? Thanks!

Chris

2

OR…

The reason I ended up not wanting it having all three items in a row was because the word Wednesday overlapped into the temp. No other words had that trouble. If it could all be lined up so that all three could fall in a row, that’d be fine.

Chris

3

Presumably you mean this site? http://joomlatest.chrisbartlett.net/

You could try something like this:

.weather_sp1_list_icon {
  margin-top:-10px;
}
4

Good lord, I forgot the site. Yep, Ralph! Sheesh, sorry.

Code worked, just had to go to -15.

Thanks!

CB

5

Hi again,

One more wish… Starting with the “Lowell, MA” and going down, can I center the whole thing in a sense? Basically, I wanna keep the same, crisp vertical starting point for each line, but essentially move the whole thing about 50px to the right. That should “center” it all. Help?

Thanks!

CB

6

If you are happy for the dotted lines to move over as well, you could try this:

.weather_sp1_forecasts, .weather_sp1_cright {
  padding-left: 50px;
}

Or, if that’s a problem, maybe this:

.weather_sp1_forecasts p, .weather_sp1_cright p, .weather_sp1_forecasts div, .weather_sp1_cright div {
  padding-left: 50px;
}
7

Awesome, buddy. Thank you!

8

You’re welcome. :slight_smile: