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 | ||
|
documentation:create_first_theme [2015/06/15 06:44] mooeditor [Basic directory structure] |
documentation:create_first_theme [2016/01/16 07:34] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Creating A Basic 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}} | ||
| - | |||
| - | * **Name**: the name will be displayed in Theme Manager | ||
| - | * **Key**: it <font 9pt/arial;;#000000;;#ffffff>is to think about what the plugin will do, and make a unique key for your plugin. Key only contains letters, numbers and the underscore '_' with no space. Ex: redtheme</font> | ||
| - | * <font 9pt/arial;;#000000;;#ffffff>Based on : it is the theme that the created theme is inherited all layouts and styles.</font> | ||
| - | * Others field are optional | ||
| - | |||
| - | After that, the theme is created and all theme's files will be auto generated. | ||
| - | |||
| - | Example: Lets fill the fields like this: | ||
| - | |||
| - | {{:documentation:fb3019efa4fe77557fe7b24579a59aad.png}} | ||
| - | |||
| - | <font 13.3333330154419px font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3333339691162px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);/Arial, Helvetica, FreeSans, sans-serif;;#000000;;rgb(0, 0, 0) font-family: Arial, Helvetica, FreeSans, sans-serif; font-size: 13.3333330154419px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3333339691162px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);>At this point we have a theme and source files for template. Now lets go to the source file and check at</font> ** root/app/View/Themed/Mytheme ** <font 13.3333330154419px font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3333339691162px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);/Arial, Helvetica, FreeSans, sans-serif;;#000000;;rgb(0, 0, 0) font-family: Arial, Helvetica, FreeSans, sans-serif; font-size: 13.3333330154419px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 17.3333339691162px; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: rgb(255, 255, 255);>and</font> **root/app/webroot/theme/mytheme** | ||
| - | |||
| - | {{:documentation:b14795f2071a4242a9eb54132fa1b267.png}} | ||
| - | |||
| - | ====== Theme Files ====== | ||
| - | |||
| - | ===== Basic directory structure ===== | ||
| - | |||
| - | {{:documentation:9dd4efafbe15770368fbff0014569847.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 for all pages (header, footer, main content, etc…) | ||
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
