Help needed to widen page and change column percentage
Permalink
Hello,
I am in the process of moving my Google Site to a Concrete5 site (which means that I have to start from scratch). At the moment, I am using a temporary domain, until I have things in place. I am using the Greek Yogurt theme.
I like what I've done so far (it isn't much), but I want the site to be wider. I added "width: 1000px;" to the "Add Your CSS" on the "Customize Theme" page. That worked fine, but I can't get the column width to increase and I noticed that the footer didn't extend with the rest of the page.
I attempted to update the CSS file in the default file, but those changes didn't show. I'm connected directly to the host server, so I'm not sure if I'm doing something wrong there.
Any help is greatly appreciated.
Thanks,
Ken
I am in the process of moving my Google Site to a Concrete5 site (which means that I have to start from scratch). At the moment, I am using a temporary domain, until I have things in place. I am using the Greek Yogurt theme.
I like what I've done so far (it isn't much), but I want the site to be wider. I added "width: 1000px;" to the "Add Your CSS" on the "Customize Theme" page. That worked fine, but I can't get the column width to increase and I noticed that the footer didn't extend with the rest of the page.
I attempted to update the CSS file in the default file, but those changes didn't show. I'm connected directly to the host server, so I'm not sure if I'm doing something wrong there.
Any help is greatly appreciated.
Thanks,
Ken
Thank you! I'll take a look.
I think you're heading for trouble trying to change too much when using the Greek Yogurt theme because it uses a 'grid' system that's based on a width of 960px. The css widths for all the other divs are defined with 960 as the width of the outside container.
It also uses typography.css to style elements on the website when the typography.css file was supposed to be used only to style the stuff inside the TinyMCE content editor.
All that being said, the footer width is set at about line 24 of typography.css.
ALSO: Make sure you turn off all the concrete5 caching at "Dashboard->System and Settings->Cache and Speed Settings" and always do full browser refresh by hitting CTRL+SHFT+R
It also uses typography.css to style elements on the website when the typography.css file was supposed to be used only to style the stuff inside the TinyMCE content editor.
All that being said, the footer width is set at about line 24 of typography.css.
ALSO: Make sure you turn off all the concrete5 caching at "Dashboard->System and Settings->Cache and Speed Settings" and always do full browser refresh by hitting CTRL+SHFT+R
Hmmm... Do you have any theme suggestions? The site is for a nonprofit, so ideally, I'd like the theme to be free. I'd like to be able to easily adjust the width of the overall site (ideally around 1000px wide - Greek Yogurt indicates that it is 800px wide), and also the sidebar width and main section of the page. I also need to be able to adjust the color scheme, as we have specific colors that we use.
Ideally, this is what I'm going for (haven't extended the footer just yet):
http://173.193.101.252/~raisinga/...
When we first started a year ago, Google Sites was fine, but I found that there were certain things that I wanted to do that Google Sites just doesn't do. Seemingly simple things like a PayPal dropdown menu.
Thanks,
Ken
Ideally, this is what I'm going for (haven't extended the footer just yet):
http://173.193.101.252/~raisinga/...
When we first started a year ago, Google Sites was fine, but I found that there were certain things that I wanted to do that Google Sites just doesn't do. Seemingly simple things like a PayPal dropdown menu.
Thanks,
Ken
How are a couple of free ones to look at:
http://www.concrete5.org/marketplace/themes/zenlike/...
Change the background image or just remove it and use a color or a gradient. This one has a width of 82% but that can be changed to 'max-width:1000px' to make it semi-responsive or a 'width:1000px'.
Or perhaps:
http://www.concrete5.org/marketplace/themes/pixel-green/...
which was used on this site:
http://www.perranporthpetsitting.com/...
http://www.concrete5.org/marketplace/themes/zenlike/...
Change the background image or just remove it and use a color or a gradient. This one has a width of 82% but that can be changed to 'max-width:1000px' to make it semi-responsive or a 'width:1000px'.
Or perhaps:
http://www.concrete5.org/marketplace/themes/pixel-green/...
which was used on this site:
http://www.perranporthpetsitting.com/...
There is no real simple way to make a narrower layout wider other than to do a little math and adjust the CSS. Consider this theme:
http://www.concrete5.org/marketplace/themes/lucky-stars/...
It's free and responsive, but not the width you are looking for.
If you go up to 1140px wide you can do some simple math and make the necessary adjustments to the grid which will give you what you want, but you will have to adjust for every column within the skeleton.css file.
Not everything will divide evenly, but in those cases just round down. When resizing, you need to add your margins on each side of the column and factor that into the overall width. As an example, .sixteen.columns is a column that represents the full width of the container, so its width is 1120px + 20px margin (10px on each side).
.eight.columns represents 1/2 the width of the container, so its width is 550px + 20px margin x 2 = 1140px. You can do this all the way down the line. Then there is a one-third column that if there were three in a row would be the full container width so 360 + 20px margin x 3 = 1140 px. There are also offsets in the skeleton.css as well as responsive sizes that would need to be adjusted. It's not rocket science, but you would need to be methodical about the adjustments you make in order for everything to fall into place correctly. If you go with a random pixel width you won't get even division so that's why 1140 is the next best width to use. The margins are what tend to screw everything up. 1140 grids typically use 22px of gutter, so if you really wanted to go the extra mile, make your margins 11px wide and adjust the column width from there.
You wouldn't necessarily need to adjust every column width if your site doesn't call for all the incremental widths for columns that are available, but I would go and make the adjustments anyway so you have the flexibility to make changes down the road without breaking anything.
That's my advice for what it's worth. Just make a backup of the skeleton.css file before you begin so you have a fallback.
http://www.concrete5.org/marketplace/themes/lucky-stars/...
It's free and responsive, but not the width you are looking for.
If you go up to 1140px wide you can do some simple math and make the necessary adjustments to the grid which will give you what you want, but you will have to adjust for every column within the skeleton.css file.
.container .four.columns { width: 265px; } .container .eight.columns { width: 550px; } .container .sixteen.columns { width: 1120px; }
Not everything will divide evenly, but in those cases just round down. When resizing, you need to add your margins on each side of the column and factor that into the overall width. As an example, .sixteen.columns is a column that represents the full width of the container, so its width is 1120px + 20px margin (10px on each side).
.eight.columns represents 1/2 the width of the container, so its width is 550px + 20px margin x 2 = 1140px. You can do this all the way down the line. Then there is a one-third column that if there were three in a row would be the full container width so 360 + 20px margin x 3 = 1140 px. There are also offsets in the skeleton.css as well as responsive sizes that would need to be adjusted. It's not rocket science, but you would need to be methodical about the adjustments you make in order for everything to fall into place correctly. If you go with a random pixel width you won't get even division so that's why 1140 is the next best width to use. The margins are what tend to screw everything up. 1140 grids typically use 22px of gutter, so if you really wanted to go the extra mile, make your margins 11px wide and adjust the column width from there.
You wouldn't necessarily need to adjust every column width if your site doesn't call for all the incremental widths for columns that are available, but I would go and make the adjustments anyway so you have the flexibility to make changes down the road without breaking anything.
That's my advice for what it's worth. Just make a backup of the skeleton.css file before you begin so you have a fallback.
I was going to suggest 'Lucky Stars' or 'Sex 'N Chocolate' because of the excellent underlying framework but I was afraid of how much css re-work would be necessary on almost every element to 're-brand' it.
Well, they probably should have been laid out with 1140 to begin with, given that 960 is getting to be "old school", but free is free, so a little "no guts no glory" will get you a long way...
Hmmm- maybe I will make a skeleton.css that can be swapped out for 1140 width (in my spare time).
Hmmm- maybe I will make a skeleton.css that can be swapped out for 1140 width (in my spare time).
If you change themes, you would have to go through this same process, depending on how much adjusting you need.
I use Firebug so much, I am not sure what I would do without it.
http://getfirebug.com/
Best of luck!