Author Topic: Easy way to add rounded corners to Saratoga Templates  (Read 18593 times)

0 Members and 1 Guest are viewing this topic.

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Easy way to add rounded corners to Saratoga Templates
« on: February 04, 2015, 01:44:55 PM »
I like the look of rounded corners on my weather site:

http://weather.lakewebster.com/

To apply this to any site using Saratoga Weather Templates, download the zip archive from my GitHub extract it in your weather site's web root (or just copy and paste the CSS file content direct from GitHub):

https://github.com/stevejenkins/saratoga-rounded-corners

The archive contains a simple CSS file that will apply rounded borders to the default Saratoga Templates. Of course, if you've previously modified your CSS, this may or may not work for you. But it probably will.

The current version (updated Feb 9, 2015) adds rounded corners to:

  • Page header (sitewide)
  • Page Footer (sitewide)
  • Outside border (sitewide)
  • Forecast and moon icons (homepage

Once the CSS file is on your server, edit your top.php file and locate the following two lines (probably around line 111):

Code: [Select]
<link rel="stylesheet" type="text/css" href="<?php echo $SITE['CSSscreen']; ?>" media="screen" title="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo $SITE['CSSprint']; ?>" media="print" />

Add the following line right BELOW those two lines:

Code: [Select]
<link rel="stylesheet" type="text/css" href="/weather-rounded-corners.css" media="screen" title="screen" />
Save the file, and you should have rounded corners! :)

If you look at the CSS in the file, you'll note that I've set the border radius for the colored backgrounds in the header and footer to 11px, while the outside border is 12px in others. That's because you'd see a 1 pixel gap between the background and border if you set them to the same values.

Enjoy! :)
« Last Edit: February 09, 2015, 10:08:55 AM by SteveJ »
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline mcrossley

  • Forecaster
  • *****
  • Posts: 1132
    • Wilmslow Astro
Re: Easy way to add rounded corners to your weather site
« Reply #1 on: February 04, 2015, 02:06:02 PM »
On my tablet your temperature figure appears in the top right of the browser window, outside your 'rounded' container. Also the 'wide' mode does not appear to work?
Mark

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to your weather site
« Reply #2 on: February 04, 2015, 02:31:27 PM »
On my tablet your temperature figure appears in the top right of the browser window, outside your 'rounded' container. Also the 'wide' mode does not appear to work?

Weird. Thanks, mcrossley. I'll check it out. What browser you running on that tablet so I can try to reproduce?
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to your weather site
« Reply #3 on: February 04, 2015, 02:33:25 PM »
FIXED... by going a much simpler route.

Edited the original post and added a download. :)
« Last Edit: February 04, 2015, 03:03:55 PM by SteveJ »
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline miraculon

  • Sunrise Side Weather
  • Forecaster
  • *****
  • Posts: 4107
  • KE8DAF
    • Sunrise Side Weather in Rogers City MI USA
Re: Easy way to add rounded corners to your weather site
« Reply #4 on: February 04, 2015, 03:05:37 PM »
On my tablet your temperature figure appears in the top right of the browser window, outside your 'rounded' container. Also the 'wide' mode does not appear to work?

I had the same thing happen with the temperature running off the proper location, and I reverted back to the original code. I have a graphic at the top of my page, does that cause this issue?

Greg H.


Blitzortung Stations #706 and #1682
CoCoRaHS: MI-PI-1
CWOP: CW4114 and KE8DAF-13
WU: KMIROGER7
Amateur Radio Callsign: KE8DAF

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to your weather site
« Reply #5 on: February 04, 2015, 03:15:30 PM »
On my tablet your temperature figure appears in the top right of the browser window, outside your 'rounded' container. Also the 'wide' mode does not appear to work?

I had the same thing happen with the temperature running off the proper location, and I reverted back to the original code. I have a graphic at the top of my page, does that cause this issue?

Greg H.

Hey, Greg. You probably saw my first post, which was much more complicated and caused the temp to pop out. Try the simplified approach with the attached zip file, and lemme know if that works! :)

EDIT: I just checked the HTML source on your site and the simplified version should work for sure. :)
« Last Edit: February 04, 2015, 03:17:19 PM by SteveJ »
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline miraculon

  • Sunrise Side Weather
  • Forecaster
  • *****
  • Posts: 4107
  • KE8DAF
    • Sunrise Side Weather in Rogers City MI USA
Re: Easy way to add rounded corners to your weather site
« Reply #6 on: February 04, 2015, 03:21:14 PM »
On my tablet your temperature figure appears in the top right of the browser window, outside your 'rounded' container. Also the 'wide' mode does not appear to work?

I had the same thing happen with the temperature running off the proper location, and I reverted back to the original code. I have a graphic at the top of my page, does that cause this issue?

Greg H.

Hey, Greg. You probably saw my first post, which was much more complicated and caused the temp to pop out. Try the simplified approach with the attached zip file, and lemme know if that works! :)

EDIT: I just checked the HTML source on your site and the simplified version should work for sure. :)

I'll give it a try. Thanks.

Greg H.


Blitzortung Stations #706 and #1682
CoCoRaHS: MI-PI-1
CWOP: CW4114 and KE8DAF-13
WU: KMIROGER7
Amateur Radio Callsign: KE8DAF

Offline miraculon

  • Sunrise Side Weather
  • Forecaster
  • *****
  • Posts: 4107
  • KE8DAF
    • Sunrise Side Weather in Rogers City MI USA
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #7 on: February 04, 2015, 03:33:41 PM »
Much better, no sharp edges for added safety!   \:D/
Seriously, I like the look.

Thanks,

Greg H.



Blitzortung Stations #706 and #1682
CoCoRaHS: MI-PI-1
CWOP: CW4114 and KE8DAF-13
WU: KMIROGER7
Amateur Radio Callsign: KE8DAF

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #8 on: February 04, 2015, 03:40:35 PM »
Much better, no sharp edges for added safety!   \:D/
Seriously, I like the look.

Thanks,

Greg H.

Hey, Greg. You're welcome! Just checked your site and it looks great!

If you like the rounded look, and you want to try rounding the corners of your header graphic to match, just edit your top.php and find the line that says:

Code: [Select]
<a href="index.php" title="Browse to homepage"><img style="border:none;" src="http://www.rogerscityweather.com/SSWbanner.png" width=772</a>
Then add some border-radius to the img style.

And while you're in there, if I may be so bold as to suggest it, you might want to consider adding just a single pixel of padding to the top of the image, to better center it vertically in that header.

So that entire line would read:

Code: [Select]
<a href="index.php" title="Browse to homepage"><img style="border:none;border-radius: 12px;padding-top: 1px;" src="http://www.rogerscityweather.com/SSWbanner.png" width=772</a>
Give that a shot and lemme know what you think! :)
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #9 on: February 04, 2015, 03:44:57 PM »
I promise I'm not picking on ya, Greg... but I had ONE MORE idea for you.

Add this line at the bottom of your weather-rounded-corner.css:

Code: [Select]
.headerTitle {text-align:center;}
That will make your header graphic horizontally centered on the page in both the narrow AND the wide versions of your templates. :)

My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline miraculon

  • Sunrise Side Weather
  • Forecaster
  • *****
  • Posts: 4107
  • KE8DAF
    • Sunrise Side Weather in Rogers City MI USA
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #10 on: February 05, 2015, 07:40:19 AM »
Thanks, you are right of course. I'll try to fix it later today.

Greg H.


Done and Done. Looks great. Thanks again.

Greg H.

« Last Edit: February 05, 2015, 04:46:27 PM by miraculon »


Blitzortung Stations #706 and #1682
CoCoRaHS: MI-PI-1
CWOP: CW4114 and KE8DAF-13
WU: KMIROGER7
Amateur Radio Callsign: KE8DAF

Offline Ian.

  • Forecaster
  • *****
  • Posts: 459
    • Chatteris Weather
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #11 on: February 05, 2015, 02:17:05 PM »
SteveJ

Thanks for sharing this cool mod, makes a real difference.

Ian
CWOP - DW3371
PWS - ICAMBRID16
https://www.chatteris.biz

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #12 on: February 05, 2015, 08:14:53 PM »
SteveJ

Thanks for sharing this cool mod, makes a real difference.

Ian

You're very welcome, Ian! I just checked out your site and see you did the rounded corners to the pages AND your title graphic! Looks great! :)
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #13 on: February 05, 2015, 08:17:36 PM »
Done and Done. Looks great. Thanks again.

Nice! Looks good!
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline cospringswx

  • Forecaster
  • *****
  • Posts: 4136
    • Colorado Springs Weather
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #14 on: February 05, 2015, 11:00:58 PM »
Rounded corners are cool. I use them on my website with a border-radius.




Ryan 

Colorado Springs, CO
www.cospringsweather.com
Davis Vantage Vue
Weather Display Software
Amcrest HD IP Camera

Offline tstorm

  • Contributor
  • ***
  • Posts: 141
    • Harpers Ferry Weather
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #15 on: February 07, 2015, 10:05:40 AM »
I've added rounded corners to my banner (called up in my header.php), but I'm having an issue with the blue background coloring not extending over as far as it should for the wording Navigation for the menu side bar.

http://www.harpersferry-weather.com

Thanks,

John

Offline Ian.

  • Forecaster
  • *****
  • Posts: 459
    • Chatteris Weather
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #16 on: February 07, 2015, 05:12:45 PM »
Hi John,

I found I needed another </div> to fix this

Ian
CWOP - DW3371
PWS - ICAMBRID16
https://www.chatteris.biz

Offline SteveJ

  • Senior Member
  • **
  • Posts: 95
    • My Blog
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #17 on: February 09, 2015, 10:10:02 AM »
Decided to move the project  to GitHub, because I'm going to try adding more rounded corners where possible (and when I have time to tinker). Edited link in the OP.

Latest version (Feb 9, 2015) added rounded corners to the forecast and moon phase icons on the homepage.
My LinkedIn

Weather.LakeWebster.com

WU: KMAPLE47 | PWS: JNKNS | CWOP: EW6690 | WXBug: p22113


Offline weathergirl

  • Forecaster
  • *****
  • Posts: 677
    • Beamsville Weather Station
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #18 on: February 09, 2015, 12:29:33 PM »
Great work, Steve, makes my site look even nicer :-)
Ann-Marie
Beamsville, Ontario, Canada

Offline W3DRM

  • Forecaster
  • *****
  • Posts: 3360
    • Emmett Weather
Re: Easy way to add rounded corners to Saratoga Templates
« Reply #19 on: February 14, 2015, 03:53:59 PM »
While I also like these changes to the look of the templates, please be aware that making these changes will change the basic template code and thus, require you, whenever you download a new update to the PHP-AJAX routines, to manually check to see if any of the files you've modified are affected by the updates from Ken True (saratoga-weather.org).

You may want to ask Ken to consider including your mods into his PHP-AJAX code so this won't be an issue. I see the TOP.PHP file is changed so that would be one of the files needing Ken's attention. There may be other files impacted too if you make other changes to the template files.
« Last Edit: February 14, 2015, 04:10:04 PM by W3DRM »
Don - W3DRM - Emmett, Idaho --- Blitzortung ID: 808 --- FlightRadar24 ID: F-KBOI7
Davis Wireless VP2, WD 10.37s150,
StartWatch, VirtualVP, VPLive, Win10 Pro
--- Logitech HD Pro C920 webcam (off-line)
--- RIPE Atlas Probe - 32849

 

anything