User Tools

Site Tools


documentation:create_first_theme

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
documentation:create_first_theme [2015/08/24 05:12]
127.0.0.1 external edit
documentation:create_first_theme [2016/01/16 07:34] (current)
Line 13: Line 13:
 ===== How to create theme ===== ===== How to create theme =====
  
-Now lets go to **Admin**→**Home**** > Site Manager > Themes Manager > Create a New Theme** (See image) and fill the fields there shown. The only really important fields are the **name** and the **based on**, but it doesnt hurt to fill in the others too.+Now lets go to **Admin**→**Home**** > Site Manager > Themes Manager > Create a New Theme** ​ (See image) and fill the fields there shown. The only really important fields are the **name** ​ and the **based on**, but it doesnt hurt to fill in the others too.
  
 {{:​documentation:​f98758bbbfc0c89d3206da5b53849363.png}} {{:​documentation:​f98758bbbfc0c89d3206da5b53849363.png}}
Line 176: Line 176:
 By edit only files in your new theme, you are making sure that new versions that overwrite default css files will be updated without a problem (because you didn't edit those files), and those CSS changes (in the upgrade) will match new elements in the template files, then again if you're not using the default template the new rules wont affect anything By edit only files in your new theme, you are making sure that new versions that overwrite default css files will be updated without a problem (because you didn't edit those files), and those CSS changes (in the upgrade) will match new elements in the template files, then again if you're not using the default template the new rules wont affect anything
  
-  * **info.xml **  file is essential. Without it, your template won't be seen by Joomla!. The file holds key metadata about the template.+  * **info.xml **  file is essential. Without it, your template won't be seen by mooSocial!. The file holds key metadata about the template.
 <code xml> <code xml>
 <?xml version="​1.0"​ encoding="​utf-8"?>​ <?xml version="​1.0"​ encoding="​utf-8"?>​
Line 189: Line 189:
  
 </​code>​ </​code>​
 +
 ====== Making Layout Customization ====== ====== Making Layout Customization ======
  
Line 201: Line 202:
 {{:​documentation:​9546eee075df176a8dfa2f4bcda21aa5.png}} {{:​documentation:​9546eee075df176a8dfa2f4bcda21aa5.png}}
  
-**Example: ** To add the new text to the homepage, let go to **root/​app/​View/​Elements/​ajax ** then copy the home_activity**.ctp** file and paste it to **root/​View/​Themed/​Mytheme/​Home/​ **+**Example: **  To add the new text to the homepage, let go to **root/​app/​View/​Elements/​ajax **  then copy the home_activity**.ctp** ​ file and paste it to **root/​View/​Themed/​Mytheme/​Home/​ **
  
 {{:​documentation:​dc9dd0be2e09d8fe7d5a04d8106fb3e8.png}} {{:​documentation:​dc9dd0be2e09d8fe7d5a04d8106fb3e8.png}}
Line 212: Line 213:
  
 <code php> <code php>
- 
 <div class="​welcome_text">​ <div class="​welcome_text">​
 <?php echo __("​Welcome to my site") ?> <?php echo __("​Welcome to my site") ?>
Line 225: Line 225:
 ==== Option 2: Change layout in Admin ==== ==== Option 2: Change layout in Admin ====
  
-To customize the template file for custom theme, go to Admin > Themes Manager > mooSocial Base Theme, navigate to the view (template file) you want to modify ​=> click Copy then select your theme. Click Proceed to make a copy of the template file in your theme folder (see image)+To customize the template file for custom theme, go to Admin > Themes Manager > mooSocial Base Theme, navigate to the view (template file) you want to modify ​⇒ click Copy then select your theme. Click Proceed to make a copy of the template file in your theme folder (see image)
  
 {{:​documentation:​bc64278948213d08654c6d3eb8d6171d.png}} {{:​documentation:​bc64278948213d08654c6d3eb8d6171d.png}}
Line 241: Line 241:
 {{:​documentation:​f1412f1c778589e30724c1715dbfcdfc.png}} {{:​documentation:​f1412f1c778589e30724c1715dbfcdfc.png}}
  
-To add new block to header section, we can go to +To add new block to header section, we can go to Admincp >
-Admincp >+
  
 Site Manager > Themes Manager > Layout Editor Site Manager > Themes Manager > Layout Editor
Line 250: Line 249:
 === Body Section === === Body Section ===
  
-The main layout u +The main layout u se the Layout Editor to decide what content appears on specific pages or in your site-wide header and footer.
-se the Layout Editor to decide what content appears on specific pages or in your site-wide header and footer.+
  
 It decides the overall layout by deciding how many columns you want to have on this page by clicking on the “Edit Columns” button. It decides the overall layout by deciding how many columns you want to have on this page by clicking on the “Edit Columns” button.
Line 263: Line 261:
 === Footer === === Footer ===
  
-footer.php - This file will handle your footer. +footer.php - This file will handle your footer. It includes all header blocks that were added at Admincp >
-It includes all header blocks that were added at Admincp >+
  
 Site Manager > Themes Manager > Layout Editor Site Manager > Themes Manager > Layout Editor
Line 283: Line 280:
  
 <​code>​ <​code>​
- 
 app/​webroot/​theme/<​theme_name>/​css/​name_file.css app/​webroot/​theme/<​theme_name>/​css/​name_file.css
- 
 </​code>​ </​code>​
  
Line 294: Line 289:
  
 <code php> <code php>
- 
 <?php <?php
      echo $this->​Html->​css( array(      echo $this->​Html->​css( array(
Line 302: Line 296:
  
 </​code>​ </​code>​
- 
  
   * Open custom.css file then apply the new style:   * Open custom.css file then apply the new style:
  
 <​code>​ <​code>​
- 
  
 #header{ #header{
Line 315: Line 307:
    ​background:​ #E60000;    ​background:​ #E60000;
 } }
- 
 </​code>​ </​code>​
- 
- 
  
   * Open browser and check:   * Open browser and check:
Line 332: Line 321:
 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> +<​code ​html4strict>
 echo $this->​Html->​script( array( '​file_name.js?'​ . Configure::​read('​core.version'​) ) ); echo $this->​Html->​script( array( '​file_name.js?'​ . Configure::​read('​core.version'​) ) );
  
Line 341: Line 329:
  
 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> <code php>
- 
  
 <?php $this->​Html->​scriptStart(array('​inline'​ => false)); ?> <?php $this->​Html->​scriptStart(array('​inline'​ => false)); ?>
Line 351: Line 337:
  
 </​code>​ </​code>​
 +
 ====== Export the theme ====== ====== Export the theme ======
  
documentation/create_first_theme.txt · Last modified: 2016/01/16 07:34 (external edit)