Directory structure of theme in concrete5

Question

From what I gather around the internet and partially from the docs is that a theme structure as follows is recommended.

/css
/fonts
/img
/includes
/js
/default.php
/main.css
/thumbnail.png
/typography.css
/view.php

My questions are:

• Can main.css and typography.css reside in /css? I like my css neatly organised
• Can you use php includes that refer to a directory in your theme? For instance, in default.php, can you have something like <?php require_once echo $this->getThemePath() . "/includes/footer.html"; ?>?
• Does echo $this->getThemePath() refer to the correct theme folder when used on files in subdirectories (such as my-theme/includes/footer.php)?

Answer 1

In short: You can structure your theme map mostly the way you want it to be. Except for the default.php, view.php, description.txt and thumbnail.png . The name and location of typography.css can be changed but I've only found a source for version 5.6 . In version 5.7 typography.css is not used anymore because the wysiwyg-editor has changed. However, you can add custom styles to the new WYSIWYG-editor.

Full answer
Example theme directory:

css (css folder)
js (javascript folder)
img (or images)
elements (php files that I want to include)
view.php
default.php
thumbnail.png
description.txt

The thumbnail.png, description.txt, view.php (for single pages) and default.php need to be directly under the theme directory.

In the elements map I create a header.php and footer.php (but if necessairy you can put more files there such as a sidebar.php or something like that)
To link to the header.php and footer.php, I place this code in the default.php and view.php at the correct line:

//version 5.6 and below
$this->inc('elements/header.php');
$this->inc('elements/footer.php');

//version 5.7 and higher
$view->inc('elements/header.php');
$view->inc('elements/footer.php');

The inc() function in concrete5 has been made specially to include items which is why i prefer to use that instead of the normal include function of php. Here is an example of a default.php : http://pastie.org/9784547

In my header.php and/or footer.php you'd want to add custom css and js. To do this you can use this code :

//version 5.6 and below
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getThemePath() ?>/css/main.css" />
<?php echo '<script src="'.$this->getThemePath().'/js/concrete.js"></script>'; ?>

//version 5.7 and higher
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $view->getThemePath() ?>/css/main.css" />
<?php echo '<script src="'.$view->getThemePath().'/js/concrete.js"></script>'; ?>

Example of a header.php: http://pastie.org/9784546

Notice the typography.css has not been added on header.php.

The typography.css is automatically loaded in the system to be used in the wysiwyg-editor. To change the name and location of the typography.css, you will have to override the getThemeEditorCSS() function.
This only works on version 5.6.
How to : http://concrete5tricks.com/blog/rename-or-move-typography-css

If you are using version 5.7
Create a page-theme.php file in the root of your theme folder.
To define custom styles add into page-theme.php :

<?php
namespace Application\Theme\Your_Theme_Name;
class PageTheme extends \Concrete\Core\Page\Theme\Theme {
    public function getThemeEditorClasses(){
    return array(
        array('title' => t('Title Thin'), 'menuClass' => 'title-thin', 'spanClass' => 'title-thin'),
        array('title' => t('Title Caps Bold'), 'menuClass' => 'title-caps-bold', 'spanClass' => 'title-caps-bold'),
        array('title' => t('Title Caps'), 'menuClass' => 'title-caps', 'spanClass' => 'title-caps')
    );
    }
}
?>

(don't forget to change Your_theme_Name in your theme name + clear cache after adding styles)
Source: http://www.concrete5.org/community/forums/5-7-discussion/adding-redactor-custom-styles-in-a-theme/