SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Move up some icons?

    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...

    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. #2
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Presumably you mean this site? http://joomlatest.chrisbartlett.net/

    You could try something like this:

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

  4. #4
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good lord, I forgot the site. Yep, Ralph! Sheesh, sorry.

    Code worked, just had to go to -15.

    Thanks!

    CB

  5. #5
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    If you are happy for the dotted lines to move over as well, you could try this:

    Code:
    .weather_sp1_forecasts, .weather_sp1_cright {
      padding-left: 50px;
    }
    Or, if that's a problem, maybe this:

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

  7. #7
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, buddy. Thank you!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •