Forums

Need BEGGINER explanation how to use CSS with C5

Permalink
I need some serious help... I'm so used to Paperthin's CommonSpot management system where you just write a css file and upload it to apply it changes that I can't figure out how to add a css file in C5... I have no background in PHP and need some serious explanations how to use custom css with C5..

An example question would be. How do I style individual elements on a page using custom css files in C5?

All comments and explanations are highly valued. Thank you very much.
BradMash
 
NBardales replied on at Permalink Reply
NBardales
Let me confirm something first...

You basically want to be able to edit the website, if so, it's just a matter of creating a theme and uploading it to the themes directory. (I can give you more details on this).
Here's a video:http://www.concrete5.org/documentation/how-tos/designers/make-a-the...

If you want to edit how C5 looks, then that means editing the 'core'. Since I don't know how to do this, someone more qualified should be able to help.
wagdi replied on at Permalink Reply
wagdi
To style any block (individual elements) you add, simply click on the block you wish to edit, select 'design' from the drop-down and then select the 'CSS' tab.

Is this what you mean?
BradMash replied on at Permalink Reply
BradMash
I don't think I want to create my own overarching theme, I just want to add some styles to elements on a page to page basis. More specifically, if I want to style one element on a specific page in great detail (i.e. C5's design tab isn't getting the job done) how can I upload a style sheet for the page to use?

Basically I'm making styles with firebug and then copying them into a style sheet that I then want to upload and commit to the page... How do I do this?
12345j replied on at Permalink Reply
12345j
well, one not very elegant option would be to use the html block, do <style type="text/css">insert css here</style> . another alternative would be to do this:
in config/site.php
define('ENABLE_APPLICATION_EVENTS', true);
inside the php brackets. then, in config/site_events.php (you may need to create the file) put 
Events::extend('on_start', 'Css', 'css', 'libraries/css_add.php');
inside php brackets
in libraries/css_add.php
<?php
class Css {
   public function css() {
      $page = Page::getCurrentPage();
      if (!$page->isAdminArea() && !$page->isSystemPage()) {
         $html = Loader::helper('html');
         $v = View::getInstance();
         $v->addHeaderItem($html->css('my_style.css'));
      }
   }
}
where my_style.css is a css file named my_style.css in root/css.
marticps replied on at Permalink Reply
marticps
To apply styles to your C5 pages, you have to edit main.css and typography.css from the theme's directory.

If you want to edit a default theme, you will find these files in c5dir/concrete/themes/(themefolder). If you want to edit an installed theme, you will find these files in c5dir/themes/(themefolder).

Also, some themes are customizables, so you can edit a few styles from dashboard (The Themes section, Customize button on the theme).

These styles will not apply to blocks. You will find the core blocks in c5dir/concrete/blocks/(themefolder) and the installed blocks in c5dir/themes/(themefolder).

Hope you've understood me,
Marti
BradMash replied on at Permalink Reply
BradMash
main.css? typograghy.css?

What are the differences in those? Where do I create them, and what are there purpose? Is there anyway to just upload a custom style sheet I've created for a specific page and apply it to that page?
marticps replied on at Permalink Reply
marticps
These files are for themes. For specific styles you can see 12345j response.

Both main and typography css files are used to stile, but typography.css is used by the C5 Content Editor.

More info:http://www.smartwebprojects.net/concrete5-blog/131/typography-css-i...

I recommend you also to read the documentation:
http://www.concrete5.org/documentation/developers/pages/overview/...

Martí