Theme CSS quandary
Permalink
I have modified Greek Yogurt as my theme. I'd like to change some layout stuff or at the very least, find details on the layout so I can adequately proportion my images (i.e. header photo width, main container width). I have examined main.css and typography.css in both themes/[mymodifiedthemename]/xxx.css and concrete/themes/greek_yogurt/xxx.css and cannot find that information. In fact, the word "width" doesn't even appear in the file. For example, all the div#main code I can find is
Is something missing? Am I not looking in the right place? I should note that I haven't worked with css since, like, 2004, but I'm pretty good at figuring new stuff out. Thanks for any advice!
/* main styles */ div#main-container { margin-top: 0; margin-bottom: 0; box-shadow: 2px 0 8px 0 #b2b9c1; } div#main-container #header-image { min-height: 12px; } div#main-content-container { } div#main-content-inner { margin: 55px 40px 60px 40px;
Is something missing? Am I not looking in the right place? I should note that I haven't worked with css since, like, 2004, but I'm pretty good at figuring new stuff out. Thanks for any advice!
I came across some great documentation called "The Anatomy of a Theme" atwww.www.concrete5.org/download_file/-/15544/... that indicates default/main/style.css as "the main CSS file for your theme" -- but I can't find it in any of my theme folders.
Greek Yogurt is based on the 960 grid system. It's a css framework that uses a 960px grid-- the idea is to make a starting for designing and coding sites that removes a lot of guesswork in regard to how divs behave. It also can save a lot of time once you're familliar with how it works. It's become fairly popular on the web in the last couple of years.
Lots more info here:http://960.gs/
You'll notice that for instance in the Full page type (full.php), main-content-container has a class of grid_24, which sets its width to 940px with a 10px gutter on each side:
Here's a 24-column grid sample layout that might make it a little easier to understand:http://960.gs/demo_24_col.html
Notice that this div is located inside a 960px container div (containers have no 10px gutter), referenced in elements/header.php:
The 960gs works best for designs that are (you guessed it) 960px or less in width. You can certainly modify Greek Yogurt if you wish, but it will take a little trial and error depending on how far you want to go. If my intention was to create a site that was wider than 960px, I guess I might start by removing the container_24 and grid_24 classes on those divs (for instance, if that's the Page Type you're working with) and writing a custom class with a width property specified. main.css is located at the root of the Greek Yogurt theme.
Have you copied Greek Yogurt out of your core directory and into your theme overrides directory as described in this article?
http://www.concrete5.org/documentation/how-tos/editors/customize-a-...
Lots more info here:http://960.gs/
You'll notice that for instance in the Full page type (full.php), main-content-container has a class of grid_24, which sets its width to 940px with a 10px gutter on each side:
<div id="main-content-container" class="grid_24">
Here's a 24-column grid sample layout that might make it a little easier to understand:http://960.gs/demo_24_col.html
Notice that this div is located inside a 960px container div (containers have no 10px gutter), referenced in elements/header.php:
<div id="main-container" class="container_24">
The 960gs works best for designs that are (you guessed it) 960px or less in width. You can certainly modify Greek Yogurt if you wish, but it will take a little trial and error depending on how far you want to go. If my intention was to create a site that was wider than 960px, I guess I might start by removing the container_24 and grid_24 classes on those divs (for instance, if that's the Page Type you're working with) and writing a custom class with a width property specified. main.css is located at the root of the Greek Yogurt theme.
Have you copied Greek Yogurt out of your core directory and into your theme overrides directory as described in this article?
http://www.concrete5.org/documentation/how-tos/editors/customize-a-...
THANK YOU! I don't want to modify it as much as figure out how it works to make my images fit, etc. And yes, I did copy it into the themes folder on the root so I'm not messing with the original.
Hi Jessica,
the greek yogurt theme is based off of a 960px grid system. You can find the relevant file in css/960_24_col.css. An excellent tool for dissecting themes is the chrome browswer's "inspect element" tool. You can right-click on any in-page element and view its place in the DOM as a tree and also the rules that are applied to the element and from where. Additionally, you can change the rules while you are looking at the page before you actually modify the CSS files. I believe firefox's Firebug extension will do the exact same thing.
If you're just getting back into CSS, frameworks are a big thing now. Check out twitter's bootstrap framework:
http://twitter.github.com/bootstrap/...
That's probably way more information than you're interested in though, it's a full application UI framework.
For just learning about grids, check outhttp://960.gs
the greek yogurt theme is based off of a 960px grid system. You can find the relevant file in css/960_24_col.css. An excellent tool for dissecting themes is the chrome browswer's "inspect element" tool. You can right-click on any in-page element and view its place in the DOM as a tree and also the rules that are applied to the element and from where. Additionally, you can change the rules while you are looking at the page before you actually modify the CSS files. I believe firefox's Firebug extension will do the exact same thing.
If you're just getting back into CSS, frameworks are a big thing now. Check out twitter's bootstrap framework:
http://twitter.github.com/bootstrap/...
That's probably way more information than you're interested in though, it's a full application UI framework.
For just learning about grids, check outhttp://960.gs
I have used Greek Yogurt for several sites and I love the wide format. Also, been able to make some modifications on my own and I have found that using the full width page with multi-column layouts makes this a very versatile theme.
I am currently working on a site where the client wants a black page background. That's fine, but the client would also like to remove the modify the left and right border of the site.
Can't find that bit of code. Any hints would be helpful.
I am currently working on a site where the client wants a black page background. That's fine, but the client would also like to remove the modify the left and right border of the site.
Can't find that bit of code. Any hints would be helpful.
I have been able to edit pretty much everything but can't eliminate the excess white space above the logo and navigation bar. You can see what I am talking about in the screen shot here:
http://www.flickr.com/photos/47653666@N00/8415930678/in/photostream...
This is in the Greek Yogurt Theme
http://www.flickr.com/photos/47653666@N00/8415930678/in/photostream...
This is in the Greek Yogurt Theme
Is there a live URL we can work with?
