Web Weather > Weather Website PHP/AJAX scripting

Easy way to add rounded corners to Saratoga Templates

(1/4) > >>

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: ---<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" />

--- End code ---

Add the following line right BELOW those two lines:


--- Code: ---<link rel="stylesheet" type="text/css" href="/weather-rounded-corners.css" media="screen" title="screen" />
--- End code ---

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:

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

--- End quote ---

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:

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

--- End quote ---

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.

Navigation

[0] Message Index

[#] Next page