| View previous topic :: View next topic |
| Author |
Message |
chrisale
Joined: 09 Nov 2005
Posts: 187
|
 Posted: Wed Nov 16, 2005 11:31 pm Post subject: HTML Templates using Cascading Style Sheets |
 |
|
I've completed the changes to the template files and the CSS file. Remember the CSS file needs to live in the img directory (or whatever your root directory is) for your live webpage where you're final html files live.
You can see the result at my weather page at http://www.alberniweather.ca
For those not familiar with Cascading Style Sheets. What these basically do is allow you to keep your webpage code as simple as possible and have all the formatting and "look" of your site controlled by one file.
This is done by adding the <link> element in the <head> section of each page. Then control the look by encasing your data in <div> tags that are modified by adding "classes" and "id". All those classes and ids are defined in the single CSS file.
This makes it very easy to update. It keeps the need for touching the actual HTML files (in this case "htx" template files) to a minimum. While giving you the ability to make dramatic cosmetic changes to the webpage.. INSTANTLY!
For some great examples and helpful information on using CSS... consult http://www.w3schools.com/css/css_reference.asp
Anyway, I've update this thread to include each file in source form, just copy and paste into your file.
I've also added some javascript to the file to allow for "alerts" when rain and wind values reach a certain threshold.
Hopefully this stuff is useful for people![/url]
Last edited by chrisale on Tue Jan 17, 2006 12:43 pm; edited 6 times in total |
|
| Back to top |
|
 |
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Wed Nov 16, 2005 11:32 pm Post subject: |
|
|
Ignore this...
Last edited by chrisale on Tue Jan 17, 2006 12:31 pm; edited 1 time in total |
|
| Back to top |
|
|
mteel
Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX
|
| Posted: Wed Nov 16, 2005 11:41 pm Post subject: |
|
|
Thanks for providing those for public consumption. I really like what you've done - it's a really cool alternate look...
You might want to include your index.htx file (home page), and it would be nice to see them ultimately without the rain conversion code lest you get a bunch of questions later about errant rainfall readings 
Also, the wview web site is wviewweather.com (link at bottom of your home page).
Mark |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Thu Nov 17, 2005 8:30 am Post subject: |
|
|
And I actually had a question about the javascript.
I've been having a hard time adding in comments to the .htx file. It seems the html generator always trys to interpret them. Is there a way I can add comments into the code so that the HTML generator doesn't try to parse them? (This way I could keep the javascript code in there as an example... and also properly comment everything I've done)
Last edited by chrisale on Tue Jan 17, 2006 12:32 pm; edited 3 times in total |
|
| Back to top |
|
|
mteel
Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX
|
| Posted: Thu Nov 17, 2005 9:22 am Post subject: |
|
|
Unfortunately, the answer is no. I adopted the "tag" format of weatherview when I started developing wview, and it is nothing more than a standard html comment construct. I have regretted this since then, wishing I had used "<!--$" or some such as the start of a wview tag instead of the standard html form.
Problem is if I change it now it will hose up everyone with existing custom html templates...
If you use something like "<!--@" to start your comments, at least the htmlgenerator will easily see that the "@" does not match any wview html tag and avoid confusion. There is no way really to avoid it looking at all html comments, as discussed above. |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Thu Nov 17, 2005 10:27 am Post subject: |
|
|
OK.. well I'll play around with it.. if using <!--@ should work in most cases anyway.
Maybe that will be something for a later "major" release? Software often breaks past versions... it's not uncommon, and I don't think users object to it as long as it is done for good reasons, which I think this would be.
As long as there is a clear migration path, people will gladly follow along. |
|
| Back to top |
|
|
mteel
Joined: 30 Jun 2005
Posts: 435
Location: Collinsville, TX
|
| Posted: Thu Nov 17, 2005 11:05 am Post subject: |
|
|
Not quite the same thing. It would be like a new version of MySQL not reading databases from earlier versions. Now, that might happen but they would provide a "convertor" to convert the old tables to the new. We are talking about program data here, the html templates are input data to wview.
If a convertor were written to check every html comment in a template file to see if it is a wview tag and convert it to the new format if it were, that would be a workable solution.
Now, so you can comment html templates (which you already can) and have the warm feeling of knowing that they are not making the htmlgenerator work just a little bit harder (and it is only a little), we should all make these sacrifices?
Very poor bang for the buck ratio there... |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Thu Nov 17, 2005 11:25 am Post subject: |
|
|
| roger dodger.. no worries |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Tue Jan 17, 2006 12:12 pm Post subject: Template Update: CSS file |
|
|
Updated Templates are below I'll spread into its' own reply so that people can comment on it seperately more easily.
First... the CSS file.. weatherstyle.css
This controls all display functionality for all the webpages... without this file, it's just a bunch of text.
| Code: |
/*
Theme Name: Weather Style
Version: 1.0
Author: Chris Alemany
*/
/*** Common Rules ***/
body {
background-color:#FFF;
width: 975 px;
}
h1,h2,h3,h4 {
font-size: 16px;
font-family: arial, geneva, serial-serif;
}
h5 strong {
color: red;
}
h5 {
font-size: 9px;
font-family: arial, geneva, serial-serif;
}
.column {
position: relative;
background-color: #CCCCCC;
font-style: italic;
padding: 1px;
font-size: 12px;
width: 145px;
}
/*** END COMMON Rules ***/
/************************/
/* Specific Current Conditions.htx */
#page {
position: absolute;
width: 400px;
top: 50px;
left: 200px;
background-color:#EEEEEE;
}
#head {
text-align: center;
}
h5 span.small {
color: red;
}
h5 a {
color: blue;
text-decoration: none;
}
#current {
position: relative;
top: 1px;
width: 400px;
padding: 5px;
}
#curcol1 {
position: relative;
top: 1px;
left: 1px;
width: 90px;
font-size: 14px;
text-align: right;
}
#curcol2 {
position: absolute;
top: 6px;
left: 105px;
width: 80px;
font-size: 14px;
text-align: left;
font-style: italic;
}
#curcol3 {
position: absolute;
top: 6px;
left: 215px;
font-size: 14px;
text-align: right;
}
#curcol4 {
position: absolute;
top: 6px;
left: 302px;
font-size: 14px;
text-align: left;
font-style: italic;
}
/* End Current Conditions.htx */
/************************/
/*** Main Index.htx ***/
#indexpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#DEF;
padding-bottom: 900px;
}
.headingindex a
{
text-align: center;
text-decoration: none;
color: black;
}
ul#minitabs {
list-style: none;
margin: 0;
padding: 0;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li {
display: inline;
margin: 0;
font-size: 10pt;
}
ul#minitabs a {
text-decoration: none;
padding-left: 2px;
padding-right: 2px;
padding-top: 5px;
border-bottom: 5px solid #ABF;
color: #000;
}
ul#minitabs a#current {
background-color:#ABF;
border-color: #ABF;
color: #000;
}
ul#minitabs a:hover {
background-color:#ABF;
border-color: #ABF;
color: #000;
}
#forecast {
position: absolute;
top: 320px;
left: 100px;
width: 600px;
text-align: center;
font-style: italic;
font-size: 10px;
}
#imagesmain {
position: absolute;
top: 400px;
left: 10px;
width: 780px;
bottom: 1px;
text-align: center;
}
#dials {
position: relative;
text-align: center;
width: 100%;
top: 0px;
bottom: 1px;
}
#satellite {
position: absolute;
text-align: left;
top: 930px;
left: 20px;
}
.textlinks {
position: absolute;
text-align: center;
width: 500px;
top: 270px;
left: 155px;
}
div#ads table {
white-space: nowrap;
}
#satheaddiv {
position: relative;
left: 5px;
width: 750px;
padding: 0px;
}
.sathead {
position: relative;
padding-left: 38px;
padding-right: 50px;
padding-bottom: 0px;
padding-top: 0px;
font-size: 14px;
font-style: bold;
margin: 0px;
}
/*Weather Data Table in Main Index.htx*/
#tabledata {
position: relative;
top: 5px;
width: 755px;
left: 25px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;
}
#col1 {
position: relative;
top: 1px;
left: 1px;
}
#col2 {
position: absolute;
top: 1px;
left: 151px;
}
#col3 {
position: absolute;
top: 1px;
left: 302px;
}
#col4 {
position: absolute;
top: 1px;
right: 155px;
}
#col5 {
position: absolute;
top: 1px;
right: 5px;
}
.odd {
background-color: #EEE;
}
.even {
background-color: #DDD;
}
/*END Weather Data Table*/
/** End Main Index.htx **/
/* Daily, Monthly and Yearly Summary Weather Pages */
#sumpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#EEE;
padding-bottom: 180px;
}
div.textlinks p {
font-style: normal;
font-color: #000;
font-size: 10px;
text-decoration: none;
}
#hilotable {
position: relative;
top: 1px;
width: 1px;
left: 1px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;
}
.hilocolumn {
position: relative;
background-color:#EEE;
font-style: italic;
padding: 1px;
font-size: 14px;
}
#hiloblock1 {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
left: 10px;
text-align:left;
}
#hiloblock2 {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
right: 10px;
text-align:left;
}
#hiloblock1year {
position: absolute;
width: 210px;
font-size: 12px;
top: 60px;
left: 100px;
text-align:left;
}
#hiloblock2year {
position: absolute;
width: 300px;
font-size: 12px;
top: 60px;
right: 10px;
text-align:left;
}
.hilocol1 {
position: relative;
width: 100px;
top: 1px;
left: 1px;
text-align: right;
}
.hilocol2 {
position: absolute;
width: 100px;
top: 2px;
left: 100px;
text-align: center;
}
.hilocol3 {
position: absolute;
width: 100px;
top: 2px;
left: 200px;
text-align: center;
}
#dailycharts {
position: relative;
top: 90px;
width: 705px;
left: 70px;
text-align: left;
font-family: arial, geneva, serial-serif;
font-size: 12px;
}
#chartscol1 {
position: float;
width: 300px;
top: 1px;
left: 1px;
text-align: right;
}
#chartscol2 {
position: absolute;
width: 300px;
top: 1px;
left: 320px;
text-align: right;
}
.hilohead {
text-align: center;
font-style: bold;
font-size: 16px;
background-color: #AAA;
}
/*End Daily, Monthly and Yearly Summary Weather Pages */
/**************************/
/*Almanac*/
#almpage {
position: relative;
font-family: arial, geneva, serial-serif;
width: 800px;
text-align:center;
top: 5px;
right: 5px;
left: 75px;
background-color:#EEE;
padding-bottom: 850px;
}
#almspacer {
position: relative;
width: 200px;
font-size: 12px;
top: 110px;
left: 1px;
text-align:left;
}
#almtemp {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 10px;
text-align:left;
}
#almdew {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 270px;
text-align:left;
}
#almhum {
position: absolute;
width: 250px;
font-size: 12px;
top: 110px;
left: 530px;
text-align:left;
}
#almwindchill {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 10px;
text-align:left;
}
#almheat {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 270px;
text-align:left;
}
#almwindrun {
position: absolute;
width: 250px;
font-size: 12px;
top: 370px;
left: 530px;
text-align:left;
}
#almwind {
position: absolute;
width: 350px;
font-size: 12px;
top: 470px;
left: 90px;
text-align:left;
}
#almbar {
position: absolute;
width: 250px;
font-size: 12px;
top: 470px;
left: 530px;
text-align:left;
}
#almrain {
position: absolute;
width: 250px;
font-size: 12px;
top: 730px;
left: 530px;
text-align:left;
}
.almanachead {
text-align: center;
font-style: bold;
font-size: 16px;
padding-right: 1px;
background-color: #AAA;
}
.almcol {
position: relative;
width: 250px;
top: 1px;
left: 1px;
text-align: left;
}
.almcol1 {
position: relative;
width: 200px;
top: 1px;
left: 1px;
text-align: left;
}
.almcol2 {
position: absolute;
width: 200px;
top: 19px;
left: 100px;
text-align: left;
}
.almwindcol2 {
position: absolute;
width: 200px;
top: 19px;
left: 150px;
text-align: left;
}
.almwindcol {
position: relative;
width: 350px;
top: 1px;
left: 1px;
text-align: left;
}
|
[/code] |
|
| Back to top |
|
|
chrisale
Joined: 09 Nov 2005
Posts: 187
|
| Posted: Tue Jan 17, 2006 12:36 pm Post subject: Index.htx |
|
|
Now the index.htx file... updated to include new tags from wview-3.0.0 note that i have removed some of the unit tags for rain and barometer as I have made other modifications, you will need to add those tags back in.
I'm going to update this code so that it is more generic and totally XHTML Strict valid... it's totally functional now, just not perfect. So please continue to use it, just know that it will change. 
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Wview Weather Conditions</title>
<meta http-equiv="refresh" content="300">
<link href="weatherstyle.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/rss+xml" title="Wview Weather RSS" href="wxrss.xml">
<script type="text/javascript">
//<
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
