User Tools
documentation:create_first_theme
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
|
documentation:create_first_theme [2015/06/15 07:04] mooeditor [Option 1: Change layout in file] |
documentation:create_first_theme [2015/08/24 05:12] 127.0.0.1 external edit |
||
|---|---|---|---|
| Line 282: | Line 282: | ||
| To use the new theme webroot: | To use the new theme webroot: | ||
| - | * | + | <code> |
| + | |||
| + | app/webroot/theme/<theme_name>/css/name_file.css | ||
| + | |||
| + | </code> | ||
| For example: To change style theme from blue to red | For example: To change style theme from blue to red | ||
| Line 289: | Line 293: | ||
| * Go to app/View/Themed/redtheme/ , copy Layouts/defaults.tpl from default to redtheme folder, then include custom.css | * Go to app/View/Themed/redtheme/ , copy Layouts/defaults.tpl from default to redtheme folder, then include custom.css | ||
| - | * | + | <code php> |
| + | |||
| + | <?php | ||
| + | echo $this->Html->css( array( | ||
| + | 'custom.css?' . Configure::read('core.version') | ||
| + | )); | ||
| + | ?> | ||
| + | |||
| + | </code> | ||
| * Open custom.css file then apply the new style: | * Open custom.css file then apply the new style: | ||
| - | \\ * | + | <code> |
| + | |||
| + | |||
| + | #header{ | ||
| + | background: #B90000; | ||
| + | } | ||
| + | .header-bg{ | ||
| + | background: #E60000; | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| * Open browser and check: | * Open browser and check: | ||
| Line 307: | Line 332: | ||
| To "load" the JavaScript file into your site, in the head, add something like this: | To "load" the JavaScript file into your site, in the head, add something like this: | ||
| - | * | + | <code html> |
| + | |||
| + | echo $this->Html->script( array( 'file_name.js?' . Configure::read('core.version') ) ); | ||
| + | |||
| + | </code> | ||
| ==== JavaScript in single page ==== | ==== JavaScript in single page ==== | ||
| Line 313: | Line 342: | ||
| To use JavaScript inside of single page, ex: blog index page, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary. Make sure that each script is defined inside quote: | To use JavaScript inside of single page, ex: blog index page, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary. Make sure that each script is defined inside quote: | ||
| - | * | ||
| + | <code php> | ||
| + | |||
| + | |||
| + | <?php $this->Html->scriptStart(array('inline' => false)); ?> | ||
| + | // Your code here | ||
| + | <?php $this->Html->scriptEnd(); ?> | ||
| + | |||
| + | </code> | ||
| ====== Export the theme ====== | ====== Export the theme ====== | ||
| Line 333: | Line 369: | ||
| {{:documentation:7ccc0d3367f6ef178cc7c7ca638ff0cd.png}} | {{:documentation:7ccc0d3367f6ef178cc7c7ca638ff0cd.png}} | ||
| + | |||
| + | //SAMPLE THEME:// [[https://www.moosocial.com//wiki/lib/plugins/ckgedit/fckeditor/userfiles/file/mytheme.zip|https://www.moosocial.com//wiki/lib/plugins/ckgedit/fckeditor/userfiles/file/mytheme.zip]] | ||
documentation/create_first_theme.txt · Last modified: 2016/01/16 07:34 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
