I want to edit the weatherstyle.css file to allow two fixed columns on either side for adding graphical links and pictures etc.
Does anyone know how I can do this?
I have tried but have failed to come up with the desired result.
Thanks
Greg
Welcome to the Cumulus Support forum.
Latest Cumulus MX V4 release 4.4.2 (build 4085) - 12 March 2025
Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024
Legacy Cumulus 1 release 1.9.4 (build 1099) - 28 November 2014
(a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)
Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki
If you are posting a new Topic about an error or if you need help PLEASE read this first viewtopic.php?p=164080#p164080
Latest Cumulus MX V4 release 4.4.2 (build 4085) - 12 March 2025
Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024
Legacy Cumulus 1 release 1.9.4 (build 1099) - 28 November 2014
(a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)
Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki
If you are posting a new Topic about an error or if you need help PLEASE read this first viewtopic.php?p=164080#p164080
Create three column css file
-
LillypillyWeather
- Posts: 14
- Joined: Tue 31 Jan 2012 8:45 am
- Weather Station: Digitech xc-0348
- Operating System: Windows Server 2008 R2
- Location: Kallangur, Queensland, Australia
- Contact:
-
TNETWeather
Re: Create three column css file
Someone might have already done this before and might be able to give you an example of what they did.
Assuming you want to learn rather than have someone do it for you...
When I want to learn something, I just create some files in /test directory and play with them there, leaving the real site up and running unchanged until I have it figured out.
To help understand one of the ways to do this with CSS. you can look at:
http://cumulus.tnetweather.com/test/3column.php
This is a bare minimum setup to show how you could set up three columns and to understand how they work. You can then tweak this using something like Web Developer (plugin for FF or Chrome) and change the CSS values live to see what they do when you change them.
Find what you like, you can the copy the CSS you have modified, and then save it in the css file that the test page uses so when you reload it has your changes.
There are two files that make up this test...
The css file which you can just click on the link and copy to your site
and the php file which you can click on the source link and copy that and save it to your site.
Note, even though this is a php file, it really has NO php in it, so you could just save it as an HTML file instead. I create all files as php in case I add php content later.
You can put these into ANY sub-directory and they will work as long as they are in the same directory each.
Files:
http://cumulus.tnetweather.com/test/3column.css
http://cumulus.tnetweather.com/test/3column.phps
There is a link in the page where I got the original content from when I first set this up for showing someone else. It goes on to do more concepts which you might find informative. He actually changes content-1 into a left side menu.
Assuming you want to learn rather than have someone do it for you...
When I want to learn something, I just create some files in /test directory and play with them there, leaving the real site up and running unchanged until I have it figured out.
To help understand one of the ways to do this with CSS. you can look at:
http://cumulus.tnetweather.com/test/3column.php
This is a bare minimum setup to show how you could set up three columns and to understand how they work. You can then tweak this using something like Web Developer (plugin for FF or Chrome) and change the CSS values live to see what they do when you change them.
Find what you like, you can the copy the CSS you have modified, and then save it in the css file that the test page uses so when you reload it has your changes.
There are two files that make up this test...
The css file which you can just click on the link and copy to your site
and the php file which you can click on the source link and copy that and save it to your site.
Note, even though this is a php file, it really has NO php in it, so you could just save it as an HTML file instead. I create all files as php in case I add php content later.
You can put these into ANY sub-directory and they will work as long as they are in the same directory each.
Files:
http://cumulus.tnetweather.com/test/3column.css
http://cumulus.tnetweather.com/test/3column.phps
There is a link in the page where I got the original content from when I first set this up for showing someone else. It goes on to do more concepts which you might find informative. He actually changes content-1 into a left side menu.
-
Graham64
- Posts: 74
- Joined: Mon 23 Aug 2010 5:04 pm
- Weather Station: Davis Vantage Pro 2
- Operating System: Windows XP
- Location: Cornwall, England
- Contact:
Re: Create three column css file
Greg
I have been trying to get this to work for some time. Judging from the number of comments in forums etc. it is very complicated to achieve a truly flexible 3 column page.
Kevin's solution uses a fixed height for each column, this works if you know how much content there will be in each column. However if your content exceeds the fixed height of any column, it will crash through the footer.
The most flexible and purest solution that I have found is by Matthew James Taylor and can be seen at http://matthewjamestaylor.com/blog/holy ... s-mode.htm
I have modified this slightly on the home page of the village site that my weather data is displayed on see: http://poundstockpacket.org.uk/
This took me a long time to get right and there are still parts that I do not understand - I only got the changes to work by trial and error.
Because I like to understand things and want them simpler I have recently been looking at another solution. This uses an image to fill up any empty columns but it does work. I am still working on my version but the source is at http://www.manisheriar.com/holygrail/fixed.htm
I hope to have this new simpler version live on my site very soon.
I agree with Kevin - use something as a starting point and 'play' so that you understand and can adapt for your own needs.
Enjoy the challenge and the learning!
I have been trying to get this to work for some time. Judging from the number of comments in forums etc. it is very complicated to achieve a truly flexible 3 column page.
Kevin's solution uses a fixed height for each column, this works if you know how much content there will be in each column. However if your content exceeds the fixed height of any column, it will crash through the footer.
The most flexible and purest solution that I have found is by Matthew James Taylor and can be seen at http://matthewjamestaylor.com/blog/holy ... s-mode.htm
I have modified this slightly on the home page of the village site that my weather data is displayed on see: http://poundstockpacket.org.uk/
This took me a long time to get right and there are still parts that I do not understand - I only got the changes to work by trial and error.
Because I like to understand things and want them simpler I have recently been looking at another solution. This uses an image to fill up any empty columns but it does work. I am still working on my version but the source is at http://www.manisheriar.com/holygrail/fixed.htm
I hope to have this new simpler version live on my site very soon.
I agree with Kevin - use something as a starting point and 'play' so that you understand and can adapt for your own needs.
Enjoy the challenge and the learning!
-
LillypillyWeather
- Posts: 14
- Joined: Tue 31 Jan 2012 8:45 am
- Weather Station: Digitech xc-0348
- Operating System: Windows Server 2008 R2
- Location: Kallangur, Queensland, Australia
- Contact:
Re: Create three column css file
Thank you Kevin and Graham, I will look into both your suggestions and have a little more practice at it as well...thanks