Differences

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

--- documentation:create_first_theme [2015/06/11 03:02]
mooeditor
+++ documentation:create_first_theme [2016/01/16 07:34]
@@ Line 1: / Line 1: @@
-====== Creating Your mooSocial First Theme ======
-----
-====== Understanding mooSocial Theme ======
-  * A theme has a template and styles.
-  * A theme is a set of Views. In this way, you can develop any themes you want but not affected the main process.
-  * A style is a set of images and css.
-====== Creating a 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.
-{{:documentation:f98758bbbfc0c89d3206da5b53849363.png}}
-After that, the theme is created and all theme's files will be auto generated.
-====== Theme Files ======
-===== Basic directory structure =====
-{{:documentation:f0d3eb53e379f58fd2c505440934e68b.png}}
-===== Themed =====
-All available themes are stored in **View > Themed**
-A theme contains views of the modules which you want to change the way they look. When a theme is being used, its views will be used instead of the default ones.
-It is unnecessary to create all views for a theme, just create views you want to change. Views is not available in a theme will be loaded from default.
-**''default.ctp:''  **  This template file defines the general layout (header, footer, main content, etc…)
-===== Webroot =====
-All style files are stored in **Webroot > theme**
-You can style your theme by editing ''main.css''  in **webroot > theme > yourtheme > css**
-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
-====== Making Layout Customization ======
-If you want to change the layout of the special page, there are 2 options:
-===== Option 1: Change layout in file =====
-you can copy this file from default to **View > Themed > Structure file. **  Remember that you must keep the directory structure and the file name to get effect, for example if you want to custom ''ajax_share.ctp''  you must copy **Activities**  directory also, so you will have ''Themed ⇒ **//<Your theme directory>//** ⇒ Activities ⇒ajax_share.ctp (see image)''
-{{:documentation:9546eee075df176a8dfa2f4bcda21aa5.png}}
-===== 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)
-{{:documentation:bc64278948213d08654c6d3eb8d6171d.png}}
-Now you can make changes to the file without affecting the base theme. Any changes made to the base theme will be overwritten when you upgrade the software.
-Changes in your custom theme will not be affected after upgrading. This means you don't have to redo your changes but if the base theme was changed in the new version, your custom theme will need to be updated (manually) as well.
-====== Export the theme ======
-To export the plugin, go to **Admin > ****Home > Site Manager > Theme Manager**, click download icon to export (See image)
-{{:documentation:1072ef2faf224d5a45b4ecef6a1f219a.png}}

mooWiki - Everything mooSocial

User Tools

Site Tools

Differences

Page Tools