WXforum.net

Web Weather => Weather Website PHP/AJAX scripting => Topic started by: SteveJ on February 04, 2015, 01:44:55 PM

Title: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ 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:


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! :)
Title: Re: Easy way to add rounded corners to your weather site
Post by: mcrossley 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?
Title: Re: Easy way to add rounded corners to your weather site
Post by: SteveJ on February 04, 2015, 02:31:27 PM
Quote from: mcrossley 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?

Weird. Thanks, mcrossley. I'll check it out. What browser you running on that tablet so I can try to reproduce?
Title: Re: Easy way to add rounded corners to your weather site
Post by: SteveJ on February 04, 2015, 02:33:25 PM
FIXED... by going a much simpler route.

Edited the original post and added a download. :)
Title: Re: Easy way to add rounded corners to your weather site
Post by: miraculon on February 04, 2015, 03:05:37 PM
Quote from: mcrossley 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?

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.
Title: Re: Easy way to add rounded corners to your weather site
Post by: SteveJ on February 04, 2015, 03:15:30 PM
Quote from: miraculon on February 04, 2015, 03:05:37 PM
Quote from: mcrossley 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?

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. :)
Title: Re: Easy way to add rounded corners to your weather site
Post by: miraculon on February 04, 2015, 03:21:14 PM
Quote from: SteveJ on February 04, 2015, 03:15:30 PM
Quote from: miraculon on February 04, 2015, 03:05:37 PM
Quote from: mcrossley 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?

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.
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: miraculon 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.

Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ on February 04, 2015, 03:40:35 PM
Quote from: miraculon 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.

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! :)
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ 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. :)

Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: miraculon 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.
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: Ian. on February 05, 2015, 02:17:05 PM
SteveJ

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

Ian
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ on February 05, 2015, 08:14:53 PM
Quote from: redpis on February 05, 2015, 02:17:05 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! :)
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ on February 05, 2015, 08:17:36 PM
Quote from: miraculon on February 05, 2015, 07:40:19 AM
Done and Done. Looks great. Thanks again.

Nice! Looks good!
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: cospringswx on February 05, 2015, 11:00:58 PM
Rounded corners are cool. I use them on my website with a border-radius.
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: tstorm 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
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: Ian. on February 07, 2015, 05:12:45 PM
Hi John,

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

Ian
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: SteveJ 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.
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: weathergirl on February 09, 2015, 12:29:33 PM
Great work, Steve, makes my site look even nicer :-)
Title: Re: Easy way to add rounded corners to Saratoga Templates
Post by: W3DRM 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.