Topic: Easy way to add rounded corners to Saratoga Templates

[SteveJ]

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!

[mcrossley]

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?

[SteveJ]

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?

[SteveJ]

FIXED... by going a much simpler route.

Edited the original post and added a download.

[miraculon]

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.

[SteveJ]

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.

[miraculon]

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.

[miraculon]

Much better, no sharp edges for added safety!   
Seriously, I like the look.

Thanks,

Greg H.

[SteveJ]

Much better, no sharp edges for added safety!   
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!

[SteveJ]

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.

[miraculon]

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.

[Ian.]

SteveJ

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

Ian

[SteveJ]

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!

[SteveJ]

Done and Done. Looks great. Thanks again.

Nice! Looks good!

[cospringswx]

Rounded corners are cool. I use them on my website with a border-radius.

[tstorm]

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

[Ian.]

Hi John,

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

Ian

[SteveJ]

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.

[weathergirl]

Great work, Steve, makes my site look even nicer

[W7DRM (old call was W3DRM)]

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.

[meteosanjuan]

Hello, I know the post is old, but I have applied the rounded corners solution as indicated but I have not noticed any changes.

https://www.meteosanjuan.com/

Greetings