Forums

NEW CSS FILE

Permalink 1 user found helpful
Where do I go about creating a new CSS file? Also, I want this CSS File to be used for certaing pages, so where would I regulate this?
 
diorist replied on at Permalink Reply
diorist
CSS files should typically live in your theme folder. They can be at the theme root or in a subfolder (.../[theme]/css/). You'll no doubt have a few CSS files in your template folder already, so just add the new one wherever the other ones are.

You can reference CSS files selectively by incorporating them into a Page Type or by adding them as "Header Extra Content" on a page-by-page basis.

You can get to complete documentation on customizing themes from:http://www.concrete5.org/community/forums/usage/how-to-add-my-own-c...

Or, by way of a short answer...

-----

To add CSS files to an existing Page Type:

1. Open the page-header php file (typically header.php in the /[theme]/elements/ folder) for that Page Type

2. Add a css reference like 
<link rel="stylesheet" href="<?php  echo $this->getThemePath(); ?>/css/newcss.css" />
to the <head> section of the header.php file


3. Apply that Page Type to whatever pages need the custom css

-----

To add CSS files to a new Page Type and apply that Type to selective pages:

1. Create a new page template php file AND a corresponding header php file (e.g., copy, rename, and modify existing template and header php files). Make sure your new Page Template file includes the new custom header file with something like 
$this->inc('elements/yournewheader.php'); ?>


2. Add the css link to your customer header file, as described above

3. In your C5 dashboard, add the new page type under Pages & Themes > Page Types

4. Apply the new Page Type to whatever pages should have the custom css

-----

To add a css file reference ad hoc to individual pages:

1. On any page, open the Properties dialog and select the Custom Attributes tab

2. Under the Page Header section, select Header Extra Content

3. In the Header Extra Content box, add a css link reference; e.g.: 
<link rel="stylesheet" media="screen" type="text/css" href="/themes/myowntheme/css/home.css" />
(NB: HTML references only---no php---in Header Extra Content.)

Hope this helps!
biz0087 replied on at Permalink Reply
Great insight! This helped tremendously...Thank You.