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:42] mooeditor |
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** | ||