Multiple Style Sheets?
Permalink
Before attempting to build my 1st C5 site, I want to make sure it's OK to use more than one CSS styles sheet in my theme?
For example, I will have 3 unique template pages to theme. It would be cleaner and easier if each template had its own dedicated style sheet. Can this be done?
In the plain yogurt and other themes, I see only 2 CSS files, usually named main.css and typography.css. So, can I have something like: main.css, main_home.css AND main_3col.css?
A very basic question, I know. But better safe than sorry!
Thanks for any help.
- shorescores
For example, I will have 3 unique template pages to theme. It would be cleaner and easier if each template had its own dedicated style sheet. Can this be done?
In the plain yogurt and other themes, I see only 2 CSS files, usually named main.css and typography.css. So, can I have something like: main.css, main_home.css AND main_3col.css?
A very basic question, I know. But better safe than sorry!
Thanks for any help.
- shorescores
Hi Kino - thanks for the reply. I may have not been clear enough. I am not trying to customize the Plain Yogurt theme. I have 3 very different looking and structured Photoshop files I need to theme. It would be best for the CSS to have 3 unique style sheets: one for each template. It can get a bit messy trying to make them all work within "main.css" The graphics just weren't created with templating in mind :-)
So, the real question is: can I have more than one CSS style sheet for my theme?
Thanks.
- shorescores
So, the real question is: can I have more than one CSS style sheet for my theme?
Thanks.
- shorescores
Try to read the files that are attached to those articles.
Answer is written there.
Answer is written there.
Are you referring to the fact that you have a "css' sub-directory with multiple style sheets?
Sorry, I need to pass this information onto others, so I am hoping for more of a "yes" / "no" "try it this way..." kind of an answer.
Can you clarify?
Thanks.
- shorescores
Sorry, I need to pass this information onto others, so I am hoping for more of a "yes" / "no" "try it this way..." kind of an answer.
Can you clarify?
Thanks.
- shorescores
Each page type uses its own PHP file, so you can use completely different CSS files for each one.
Borrowing from the structure of the default themes, I had a project where I used a shared header and footer, then set up the unique elements for each page type in each page type PHP file, then I also created a few small CSS files that were specific to customizing the CSS for each type. I had one master CSS file, then one sub-CSS file (as necessary) for each page type to handle my columns
Let me know if you have more questions. In general, I like to think of Concrete themes like this:
1. Take any HTML/CSS/JS set up
2. Add a snippet at the header and at the footer
3. Add a snippet everywhere blocks should appear
4. Done
Concrete is really flexible in this regard, and is way better than other solutions I've used where it feels impossible to create a blank, white page. In Concrete your theme doesn't even need to have any blocks or anything.
Borrowing from the structure of the default themes, I had a project where I used a shared header and footer, then set up the unique elements for each page type in each page type PHP file, then I also created a few small CSS files that were specific to customizing the CSS for each type. I had one master CSS file, then one sub-CSS file (as necessary) for each page type to handle my columns
Let me know if you have more questions. In general, I like to think of Concrete themes like this:
1. Take any HTML/CSS/JS set up
2. Add a snippet at the header and at the footer
3. Add a snippet everywhere blocks should appear
4. Done
Concrete is really flexible in this regard, and is way better than other solutions I've used where it feels impossible to create a blank, white page. In Concrete your theme doesn't even need to have any blocks or anything.
Elyon - thanks so much for the reply, and the excellent workflow overview.
So, in short after I theme my templates, I can create a directory named like, "css" put in any CSS style sheets in there, and reference them as I like.
Please correct me if I am wrong.
Oh and this: "> Let me know if you have more questions."
Be careful - I may have hundreds :-)
Thanks for being so helpful.
- shorescores
So, in short after I theme my templates, I can create a directory named like, "css" put in any CSS style sheets in there, and reference them as I like.
Please correct me if I am wrong.
Oh and this: "> Let me know if you have more questions."
Be careful - I may have hundreds :-)
Thanks for being so helpful.
- shorescores
Yes, exactly.
You may already know this, but I also want to share a couple of tips from things that helped me when I set up my first c5 site.
The first is to favor tag-based styles rather than class-based styles. If you have a div with the ID "left-sidebar", then you can start to generate your CSS styles for left-sidebar a, left-sidebar p, etc. This makes it a lot easier to create themes that work across any block type. With few exceptions, the blocks all use their own unique class names, so you can always create exceptions when you need to.
The other thing is to remember that you can create custom templates. If you are in edit mode and click on a block, there's an option for set custom template. If you haven't done this before, it's simple to do. Create a new folder in the blocks directory with the same name as one of the core blocks, then create a folder called templates, then create a PHP file or a folder (with view.php inside it) with the name of your custom template.
Custom templates let you restructure the way any block is displayed, so when CSS doesn't go far enough, you can create a custom template and move tags around.
On one site I used a lot of Flash, but I didn't create any new block types. Instead I used custom templates. One of them was a custom template for an Image block, and I fed the image path into my SWF. Another was a custom template for the Slideshow block, and I fed them into Flash to create my own Slideshow. So long as a block has all the data that you will need, you can use custom templates to restructure the HTML or PHP output so that it shows up right.
You may already know this, but I also want to share a couple of tips from things that helped me when I set up my first c5 site.
The first is to favor tag-based styles rather than class-based styles. If you have a div with the ID "left-sidebar", then you can start to generate your CSS styles for left-sidebar a, left-sidebar p, etc. This makes it a lot easier to create themes that work across any block type. With few exceptions, the blocks all use their own unique class names, so you can always create exceptions when you need to.
The other thing is to remember that you can create custom templates. If you are in edit mode and click on a block, there's an option for set custom template. If you haven't done this before, it's simple to do. Create a new folder in the blocks directory with the same name as one of the core blocks, then create a folder called templates, then create a PHP file or a folder (with view.php inside it) with the name of your custom template.
Custom templates let you restructure the way any block is displayed, so when CSS doesn't go far enough, you can create a custom template and move tags around.
On one site I used a lot of Flash, but I didn't create any new block types. Instead I used custom templates. One of them was a custom template for an Image block, and I fed the image path into my SWF. Another was a custom template for the Slideshow block, and I fed them into Flash to create my own Slideshow. So long as a block has all the data that you will need, you can use custom templates to restructure the HTML or PHP output so that it shows up right.
Elyon - Excellent advice!
Thanks again so much.
- shorescores
Thanks again so much.
- shorescores
try this.
http://www.concrete5.org/community/forums/themes/plainyogurt-with-3...