mooWiki - Everything mooSocial

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

<h1>Creating A Basic Theme</h1> <div class="level1"> <hr /> </div> <h1>Understanding mooSocial Theme</h1> <div class="level1"> <ul> <li class="level1"> A theme has a template and styles.</li> <li class="level1"> A theme is a set of Views. In this way, you can develop any themes you want but not affected the main process.</li> <li class="level1"> A style is a set of images and css.</li> </ul> </div> <h1>Creating a Theme</h1> <div class="level1"> </div> <h2>How to create theme</h2> <div class="level2"> <p> Now lets go to <b>Admin</b>→<b>Home</b><b> > Site Manager > Themes Manager > Create a New Theme</b> (See image) and fill the fields there shown. The only really important fields are the <b>name</b> and the <b>based on</b>, but it doesnt hurt to fill in the others too. </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:f98758bbbfc0c89d3206da5b53849363.png" class="media" title="documentation:f98758bbbfc0c89d3206da5b53849363.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:f98758bbbfc0c89d3206da5b53849363.png" class="media" alt="" /></a> </p> <ul> <li class="level1"> <b>Name</b>: the name will be displayed in Theme Manager</li> <li class="level1"> <b>Key</b>: it &lt;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&lt;/font></li> <li class="level1"> &lt;font 9pt/arial;;#000000;;#ffffff>Based on : it is the theme that the created theme is inherited all layouts and styles.&lt;/font></li> <li class="level1"> Others field are optional</li> </ul> <p> After that, the theme is created and all theme's files will be auto generated. </p> <p> Example: Lets fill the fields like this: </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:fb3019efa4fe77557fe7b24579a59aad.png" class="media" title="documentation:fb3019efa4fe77557fe7b24579a59aad.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:fb3019efa4fe77557fe7b24579a59aad.png" class="media" alt="" /></a> </p> <p> &lt;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&lt;/font> <b> root/app/View/Themed/Mytheme </b> &lt;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&lt;/font> <b>root/app/webroot/theme/mytheme</b> </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:b14795f2071a4242a9eb54132fa1b267.png" class="media" title="documentation:b14795f2071a4242a9eb54132fa1b267.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:b14795f2071a4242a9eb54132fa1b267.png" class="media" alt="" /></a> </p> </div> <h1>Theme Files</h1> <div class="level1"> </div> <h2>Basic directory structure</h2> <div class="level2"> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:9dd4efafbe15770368fbff0014569847.png" class="media" title="documentation:9dd4efafbe15770368fbff0014569847.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:9dd4efafbe15770368fbff0014569847.png" class="media" alt="" /></a> </p> <ul> <li class="level1"> <b>Themed</b></li> </ul> <p> All available themes are stored in <b>View > Themed</b> </p> <p> 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. </p> <p> 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. </p> <p> <b>default.ctp</b>: This template file defines the general layout for all pages (header, footer, main content, etc…) </p> <pre class="code php">< ?php <span class="co4">/** * mooSocial - The Web 2.0 Social Network Software * @website: http://www.moosocial.com */</span> <span class="sy1">?></span> < <span class="sy0">!</span>DOCTYPE html<span class="sy0">></span> < html ng<span class="sy0">-</span>app<span class="sy0">=</span>"mooApp"<span class="sy0">></span> < head<span class="sy0">></span> < meta charset<span class="sy0">=</span>"utf<span class="sy0">-</span><span class="nu0">8</span>"<span class="sy0">></span> < title<span class="sy0">></span> < ?php <span class="kw1">if</span> <span class="br0">(</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_offline'</span><span class="br0">)</span> <span class="br0">)</span> <span class="kw1">echo</span> __<span class="br0">(</span><span class="st_h">'[OFFLINE]'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">if</span> <span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$title_for_layout</span><span class="br0">)</span> <span class="sy0">&&</span> <span class="re0">$title_for_layout</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">echo</span> <span class="re0">$title_for_layout</span><span class="sy0">;</span> <span class="br0">}</span> <span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$mooPageTitle</span><span class="br0">)</span> <span class="sy0">&&</span> <span class="re0">$mooPageTitle</span><span class="br0">)</span> <span class="br0">{</span> <span class="kw1">echo</span> <span class="re0">$mooPageTitle</span><span class="sy0">;</span> <span class="br0">}</span> <span class="sy1">?></span> <span class="sy0">|</span> < ?php <span class="kw1">echo</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_name'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < <span class="sy0">/</span>title<span class="sy0">></span> < meta name<span class="sy0">=</span>"description" content<span class="sy0">=</span>"< ?php <span class="kw1">if</span> <span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$description_for_layout</span><span class="br0">)</span> <span class="sy0">&&</span> <span class="re0">$description_for_layout</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">echo</span> <span class="re0">$description_for_layout</span><span class="sy0">;</span> <span class="br0">}</span><span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$mooPageDescription</span><span class="br0">)</span> <span class="sy0">&&</span> <span class="re0">$mooPageDescription</span><span class="br0">)</span> <span class="br0">{</span><span class="kw1">echo</span> <span class="re0">$mooPageDescription</span><span class="sy0">;</span><span class="br0">}</span><span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span>Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_description'</span><span class="br0">)</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">echo</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_description'</span><span class="br0">)</span><span class="sy0">;</span><span class="br0">}</span><span class="sy1">?></span>"<span class="sy0">/></span> < meta name<span class="sy0">=</span>"keywords" content<span class="sy0">=</span>"< ?php <span class="kw1">if</span><span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$mooPageKeyword</span><span class="br0">)</span> <span class="sy0">&&</span> <span class="re0">$mooPageKeyword</span><span class="br0">)</span><span class="br0">{</span><span class="kw1">echo</span> <span class="re0">$mooPageKeyword</span><span class="sy0">;</span><span class="br0">}</span><span class="kw1">else</span> <span class="kw1">if</span><span class="br0">(</span>Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_keywords'</span><span class="br0">)</span><span class="br0">)</span><span class="br0">{</span> <span class="kw1">echo</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.site_keywords'</span><span class="br0">)</span><span class="sy0">;</span><span class="br0">}</span><span class="sy1">?></span>"<span class="sy0">/></span> < meta name<span class="sy0">=</span>"viewport" content<span class="sy0">=</span>"width<span class="sy0">=</span>device<span class="sy0">-</span>width<span class="sy0">,</span> initial<span class="sy0">-</span>scale<span class="sy0">=</span><span class="nu19">1.0</span><span class="sy0">,</span> maximum<span class="sy0">-</span>scale<span class="sy0">=</span><span class="nu19">1.0</span><span class="sy0">,</span> user<span class="sy0">-</span>scalable<span class="sy0">=</span><span class="nu0">0</span>" <span class="sy0">/></span>   < ?php <span class="kw1">if</span><span class="br0">(</span><a href="http://www.php.net/isset"><span class="kw3">isset</span></a><span class="br0">(</span><span class="re0">$og_image</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">:</span> <span class="sy1">?></span> < meta property<span class="sy0">=</span>"og<span class="sy0">:</span>image" content<span class="sy0">=</span>"< ?<span class="sy0">=</span><span class="re0">$og_image</span><span class="sy1">?></span>" <span class="sy0">/></span> < ?php <span class="kw1">else</span><span class="sy0">:</span> <span class="sy1">?></span> < meta property<span class="sy0">=</span>"og<span class="sy0">:</span>image" content<span class="sy0">=</span>"< ?<span class="sy0">=</span>FULL_BASE_URL <span class="sy0">.</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">request</span><span class="sy0">-></span><span class="me1">webroot</span><span class="sy1">?></span>img<span class="sy0">/</span>og<span class="sy0">-</span>image<span class="sy0">.</span>png" <span class="sy0">/></span> < ?php <span class="kw1">endif</span><span class="sy0">;</span> <span class="sy1">?></span>   < script<span class="sy0">></span> <span class="kw2">var</span> baseUrl <span class="sy0">=</span> <span class="st_h">'< ?=$this->request->base?>'</span><span class="sy0">;</span> <span class="kw2">var</span> root <span class="sy0">=</span> <span class="st_h">'< ?=$this->request->webroot?>'</span><span class="sy0">;</span> < <span class="sy0">/</span>script<span class="sy0">></span> < ?<span class="sy0">=</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Html</span><span class="sy0">-></span><span class="me1">css</span><span class="br0">(</span><span class="st_h">'http://fonts.googleapis.com/css?family=Roboto:400,300,500,700'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Html</span><span class="sy0">-></span><span class="me1">meta</span><span class="br0">(</span><span class="st_h">'icon'</span><span class="br0">)</span><span class="sy0">;</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">loadLibarary</span><span class="br0">(</span><span class="st_h">'mooCore'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'meta'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'css'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span>   < <span class="sy0">/</span>head<span class="sy0">></span> < body <span class="kw2">class</span><span class="sy0">=</span>"default<span class="sy0">-</span>body" id<span class="sy0">=</span>"< ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">getPageId</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span>"<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">element</span><span class="br0">(</span><span class="st_h">'misc/fb_include'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'header'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < div <span class="kw2">class</span><span class="sy0">=</span>"navbar navbar<span class="sy0">-</span>fixed<span class="sy0">-</span>top sl<span class="sy0">-</span>navbar" role<span class="sy0">=</span>"navigation" id<span class="sy0">=</span>"header"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"header<span class="sy0">-</span>bg"<span class="sy0">></span>< <span class="sy0">/</span>div<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"container full_header"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"hidden<span class="sy0">-</span>xs hidden<span class="sy0">-</span>sm"<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">element</span><span class="br0">(</span><span class="st_h">'misc/logo'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < <span class="sy0">/</span>div<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">element</span><span class="br0">(</span><span class="st_h">'main_menu'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"navbar navbar<span class="sy0">-</span>fixed<span class="sy0">-</span>top sl<span class="sy0">-</span>navbar" role<span class="sy0">=</span>"navigation" id<span class="sy0">=</span>"header_mobi"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"container<span class="sy0">-</span>fluid"<span class="sy0">></span> < a id<span class="sy0">=</span>"openMenu" href<span class="sy0">=</span>"<span class="co2">#" data-toggle="modal" data-target="#mobi_menu"> </span> < span <span class="kw2">class</span><span class="sy0">=</span><span class="st_h">'arr-menu'</span><span class="sy0">></span>< <span class="sy0">/</span>span<span class="sy0">></span> < span <span class="kw2">class</span><span class="sy0">=</span><span class="st_h">'line'</span><span class="sy0">></span>< <span class="sy0">/</span>span<span class="sy0">></span> < span <span class="kw2">class</span><span class="sy0">=</span><span class="st_h">'line'</span><span class="sy0">></span>< <span class="sy0">/</span>span<span class="sy0">></span> < span <span class="kw2">class</span><span class="sy0">=</span><span class="st_h">'line'</span><span class="sy0">></span>< <span class="sy0">/</span>span<span class="sy0">></span> < <span class="sy0">/</span>a<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">element</span><span class="br0">(</span><span class="st_h">'misc/logo'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">if</span> <span class="br0">(</span><span class="sy0">!</span><a href="http://www.php.net/empty"><span class="kw3">empty</span></a><span class="br0">(</span><span class="re0">$uid</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">:</span> <span class="sy1">?></span> < a href<span class="sy0">=</span>"< ?<span class="sy0">=</span><span class="re0">$this</span><span class="sy0">-></span><span class="me1">Moo</span><span class="sy0">-></span><span class="me1">getProfileUrl</span><span class="br0">(</span> <span class="re0">$cuser</span> <span class="br0">)</span><span class="sy1">?></span>" <span class="kw2">class</span><span class="sy0">=</span><span class="st_h">'ava_mobi'</span><span class="sy0">></span> < ?<span class="sy0">=</span><span class="re0">$this</span><span class="sy0">-></span><span class="me1">Moo</span><span class="sy0">-></span><span class="me1">getUserImage</span><span class="br0">(</span><span class="re0">$cuser</span><span class="sy0">,</span><span class="st_h">'avatar'</span><span class="sy0">,</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">(</span>"width" <span class="sy0">=></span>"45px" <span class="sy0">,</span>"alt" <span class="sy0">=></span> <span class="re0">$cuser</span><span class="br0">[</span><span class="st_h">'name'</span><span class="br0">]</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw4">false</span><span class="br0">)</span><span class="sy1">?></span> < <span class="sy0">/</span>a<span class="sy0">></span> < ?php <span class="kw1">endif</span><span class="sy0">;</span> <span class="sy1">?></span>   < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"container" < ?php <span class="re0">$this</span><span class="sy0">-></span><span class="me1">getNgController</span><span class="br0">(</span><span class="br0">)</span> ?>> < ?<span class="sy0">=</span><a href="http://www.php.net/html_entity_decode"><span class="kw3">html_entity_decode</span></a><span class="br0">(</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.header_code'</span><span class="br0">)</span> <span class="br0">)</span><span class="sy1">?></span>   < div <span class="kw2">class</span><span class="sy0">=</span>"row"<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Session</span><span class="sy0">-></span><span class="me1">flash</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'content'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">!--</span> Modal <span class="sy0">--></span> < section <span class="kw2">class</span><span class="sy0">=</span>"modal fade" id<span class="sy0">=</span>"themeModal" role<span class="sy0">=</span>"basic" aria<span class="sy0">-</span>labelledby<span class="sy0">=</span>"myModalLabel" aria<span class="sy0">-</span>hidden<span class="sy0">=</span>"true"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>dialog"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>content"<span class="sy0">></span>< <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>section<span class="sy0">></span> < section <span class="kw2">class</span><span class="sy0">=</span>"modal fade" id<span class="sy0">=</span>"langModal" role<span class="sy0">=</span>"basic" aria<span class="sy0">-</span>labelledby<span class="sy0">=</span>"myModalLabel" aria<span class="sy0">-</span>hidden<span class="sy0">=</span>"true"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>dialog"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>content"<span class="sy0">></span>< <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>section<span class="sy0">></span> < <span class="sy0">!--</span> BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM<span class="sy0">--></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal fade" id<span class="sy0">=</span>"portlet<span class="sy0">-</span>config" tabindex<span class="sy0">=</span>"<span class="sy0">-</span><span class="nu0">1</span>" role<span class="sy0">=</span>"dialog" aria<span class="sy0">-</span>labelledby<span class="sy0">=</span>"myModalLabel" aria<span class="sy0">-</span>hidden<span class="sy0">=</span>"true"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>dialog"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>content"<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>header"<span class="sy0">></span> < button type<span class="sy0">=</span>"button" <span class="kw2">class</span><span class="sy0">=</span>"close" data<span class="sy0">-</span>dismiss<span class="sy0">=</span>"modal" aria<span class="sy0">-</span>hidden<span class="sy0">=</span>"true"<span class="sy0">></span>< <span class="sy0">/</span>button<span class="sy0">></span> < h4 <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>title"<span class="sy0">></span>Modal title< <span class="sy0">/</span>h4<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>body"<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < div <span class="kw2">class</span><span class="sy0">=</span>"modal<span class="sy0">-</span>footer"<span class="sy0">></span> < <span class="sy0">!--</span> Config <span class="sy0">--></span> < button type<span class="sy0">=</span>"button" <span class="kw2">class</span><span class="sy0">=</span>"btn blue ok"<span class="sy0">></span>< ?<span class="sy0">=</span>__<span class="br0">(</span><span class="st_h">'OK'</span><span class="br0">)</span><span class="sy1">?></span>< <span class="sy0">/</span>button<span class="sy0">></span> < button type<span class="sy0">=</span>"button" <span class="kw2">class</span><span class="sy0">=</span>"btn default" data<span class="sy0">-</span>dismiss<span class="sy0">=</span>"modal"<span class="sy0">></span>< ?<span class="sy0">=</span>__<span class="br0">(</span><span class="st_h">'Close'</span><span class="br0">)</span><span class="sy1">?></span>< <span class="sy0">/</span>button<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">!--</span> <span class="sy0">/.</span>modal<span class="sy0">-</span>content <span class="sy0">--></span> < <span class="sy0">/</span>div<span class="sy0">></span> < <span class="sy0">!--</span> <span class="sy0">/.</span>modal<span class="sy0">-</span>dialog <span class="sy0">--></span> < <span class="sy0">/</span>div<span class="sy0">></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'footer'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < <span class="sy0">/</span>div<span class="sy0">></span>   < script src<span class="sy0">=</span>"https<span class="sy0">:</span><span class="co1">//maps.google.com/maps/api/js?sensor=false">< /script></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'mooPhrase'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'mooScript'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'mooInit'</span><span class="br0">)</span><span class="sy0">;</span> <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">fetch</span><span class="br0">(</span><span class="st_h">'script'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">element</span><span class="br0">(</span><span class="st_h">'sql_dump'</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> < ?php <span class="kw1">echo</span> <a href="http://www.php.net/html_entity_decode"><span class="kw3">html_entity_decode</span></a><span class="br0">(</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.analytics_code'</span><span class="br0">)</span> <span class="br0">)</span><span class="sy1">?></span> < <span class="sy0">/</span>body<span class="sy0">></span> < <span class="sy0">/</span>html<span class="sy0">></span>   </pre><p> </p> <ul> <li class="level1"> <b>Webroot</b></li> </ul> <p> All style files are stored in <b>Webroot > theme</b> </p> <p> You can style your theme by editing main.css in <b>webroot > theme > yourtheme > css</b> </p> <p> 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 </p> <ul> <li class="level1"> <b>info.xml </b> file is essential. Without it, your template won't be seen by Joomla!. The file holds key metadata about the template.</li> </ul> <pre class="code xml">< ?xml version="1.0" encoding="utf-8"?> < info> < name>Red Theme< /name> < key>red< /key> < version>2.0< /version> < description>mooSocial red theme< /description> < author>mooSocial< /author> < website>http://www.moosocial.com< /website> < /info>   </pre><p> </p> </div> <h1>Making Layout Customization</h1> <div class="level1"> </div> <h2>Customize Layout</h2> <div class="level2"> <p> If you want to change the layout of the special page, there are 2 options: </p> </div> <h3>Option 1: Change layout in file</h3> <div class="level3"> <p> You can copy this file from default to <b>View > Themed > Structure file</b>. 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 ⇒ &lt;Your theme directory> ⇒ Activities ⇒ajax_share.ctp (see image) </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:9546eee075df176a8dfa2f4bcda21aa5.png" class="media" title="documentation:9546eee075df176a8dfa2f4bcda21aa5.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:9546eee075df176a8dfa2f4bcda21aa5.png" class="media" alt="" /></a> </p> <p> <b>Example: </b> To add the new text to the homepage, let go to <b>root/app/View/Elements/ajax </b> then copy the home_activity<b>.ctp</b> file and paste it to <b>root/View/Themed/Mytheme/Home/ </b> </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:dc9dd0be2e09d8fe7d5a04d8106fb3e8.png" class="media" title="documentation:dc9dd0be2e09d8fe7d5a04d8106fb3e8.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:dc9dd0be2e09d8fe7d5a04d8106fb3e8.png" class="media" alt="" /></a> </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:e8af5aeb5394d75b9b5d90531ef7e225.png" class="media" title="documentation:e8af5aeb5394d75b9b5d90531ef7e225.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:e8af5aeb5394d75b9b5d90531ef7e225.png" class="media" alt="" /></a> </p> <p> &lt;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);>Lets open this file and add the below code to line 43&lt;/font> </p> <p> &lt;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);>*&lt;/font> </p> <pre class="code php">< div <span class="kw2">class</span><span class="sy0">=</span>"welcome_text"<span class="sy0">></span> < ?php <span class="kw1">echo</span> __<span class="br0">(</span>"Welcome to my site"<span class="br0">)</span> <span class="sy1">?></span> < <span class="sy0">/</span>div<span class="sy0">></span>   </pre><p> </p> <p> Save it then refresh your site, you will see the text changed already. </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:87c4a40e45528af238b7a8c66f13c7dc.png" class="media" title="documentation:87c4a40e45528af238b7a8c66f13c7dc.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:87c4a40e45528af238b7a8c66f13c7dc.png" class="media" alt="" /></a> </p> </div> <h3>Option 2: Change layout in Admin</h3> <div class="level3"> <p> 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) </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:bc64278948213d08654c6d3eb8d6171d.png" class="media" title="documentation:bc64278948213d08654c6d3eb8d6171d.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:bc64278948213d08654c6d3eb8d6171d.png" class="media" alt="" /></a> </p> <p> 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. </p> <p> 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. </p> </div> <h3>Custom layout general</h3> <div class="level3"> </div> <h4>Head</h4> <div class="level4"> <p> header.php - This file will contain the code for the header section of the theme; It includes all header blocks that were added at Admincp > Site Manager > Themes Manager > Layout Editor </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:f1412f1c778589e30724c1715dbfcdfc.png" class="media" title="documentation:f1412f1c778589e30724c1715dbfcdfc.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:f1412f1c778589e30724c1715dbfcdfc.png" class="media" alt="" /></a> </p> <p> To add new block to header section, we can go to Admincp > </p> <p> Site Manager > Themes Manager > Layout Editor </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:3a186e965e748f88c354cd6db7affb47.png" class="media" title="documentation:3a186e965e748f88c354cd6db7affb47.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:3a186e965e748f88c354cd6db7affb47.png" class="media" alt="" /></a> </p> </div> <h4>Body Section</h4> <div class="level4"> <p> The main layout u se the Layout Editor to decide what content appears on specific pages or in your site-wide header and footer. </p> <p> It decides the overall layout by deciding how many columns you want to have on this page by clicking on the “Edit Columns” button. </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:bf7d45b2f2e53d9334dc5477406e0833.png" class="media" title="documentation:bf7d45b2f2e53d9334dc5477406e0833.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:bf7d45b2f2e53d9334dc5477406e0833.png" class="media" alt="" /></a> </p> <p> Choose a template by clicking on the template that fits your page best. The horizontal blocks on the top and the bottom represent the Site Header page and the Site Footer page, which do not need to be displayed. </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:cc7f69a1dddad1854294d1471aff40a3.png" class="media" title="documentation:cc7f69a1dddad1854294d1471aff40a3.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:cc7f69a1dddad1854294d1471aff40a3.png" class="media" alt="" /></a> </p> </div> <h4>Footer</h4> <div class="level4"> <p> footer.php - This file will handle your footer. It includes all header blocks that were added at Admincp > </p> <p> Site Manager > Themes Manager > Layout Editor </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:5a89c49d9ea5b5d697ac9e14aa55e32f.png" class="media" title="documentation:5a89c49d9ea5b5d697ac9e14aa55e32f.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:5a89c49d9ea5b5d697ac9e14aa55e32f.png" class="media" alt="" /></a> </p> <p> To add new block to header section, we can go to Admincp > Site Manager > Themes Manager > Layout Editor </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:3a186e965e748f88c354cd6db7affb47.png" class="media" title="documentation:3a186e965e748f88c354cd6db7affb47.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:3a186e965e748f88c354cd6db7affb47.png" class="media" alt="" /></a> </p> </div> <h2>Customize CSS</h2> <div class="level2"> <p> Themes can contain static assets as well as view files. A theme can include any necessary assets in its webroot directory. This allows for easy packaging and distribution of themes. </p> <p> To improve performance for production environments, it’s recommended that you either symlink or copy theme assets into the application’s webroot. </p> <p> To use the new theme webroot: </p> <pre class="code"> app/webroot/theme/&lt;theme_name&gt;/css/name_file.css </pre><p> </p> <p> For example: To change style theme from blue to red </p> <ul> <li class="level1"> Go to app/webroot/theme/redtheme/css and create custom.css file</li> <li class="level1"> Go to app/View/Themed/redtheme/ , copy Layouts/defaults.tpl from default to redtheme folder, then include custom.css</li> </ul> <pre class="code php">< ?php <span class="kw1">echo</span> <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Html</span><span class="sy0">-></span><span class="me1">css</span><span class="br0">(</span> <a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">(</span> <span class="st_h">'custom.css?'</span> <span class="sy0">.</span> Configure<span class="sy0">::</span><span class="me2">read</span><span class="br0">(</span><span class="st_h">'core.version'</span><span class="br0">)</span> <span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span>   </pre><p> </p> <ul> <li class="level1"> Open custom.css file then apply the new style:</li> </ul> <pre class="code"> #header{ background: #B90000; } .header-bg{ background: #E60000; } </pre><p> </p> <ul> <li class="level1"> Open browser and check:</li> </ul> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:896a9f0b758a971018bc66675e801672.png" class="media" title="documentation:896a9f0b758a971018bc66675e801672.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:896a9f0b758a971018bc66675e801672.png" class="media" alt="" /></a> </p> </div> <h2>Customize JS</h2> <div class="level2"> </div> <h3>JavaScript in Template Files</h3> <div class="level3"> <p> To use JavaScript repeatedly within your site, you can either set the call for the JavaScript, or the script itself, in the head of your <b>layout.ctp</b> template file, between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page. </p> <p> To "load" the JavaScript file into your site, in the head, add something like this: </p> <pre class="code html4strict">echo $this->Html->script( array( 'file_name.js?' . Configure::read('core.version') ) );   </pre><p> </p> </div> <h3>JavaScript in single page</h3> <div class="level3"> <p> 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: </p> <pre class="code php">  < ?php <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Html</span><span class="sy0">-></span><span class="me1">scriptStart</span><span class="br0">(</span><a href="http://www.php.net/array"><span class="kw3">array</span></a><span class="br0">(</span><span class="st_h">'inline'</span> <span class="sy0">=></span> <span class="kw4">false</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span> <span class="co1">// Your code here</span> < ?php <span class="re0">$this</span><span class="sy0">-></span><span class="me1">Html</span><span class="sy0">-></span><span class="me1">scriptEnd</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> <span class="sy1">?></span>   </pre><p> </p> </div> <h1>Export the theme</h1> <div class="level1"> <p> To export the plugin, go to Admin > Home > Site Manager > Theme Manager, click download icon to export (See image) </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:1072ef2faf224d5a45b4ecef6a1f219a.png" class="media" title="documentation:1072ef2faf224d5a45b4ecef6a1f219a.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:1072ef2faf224d5a45b4ecef6a1f219a.png" class="media" alt="" /></a> </p> </div> <h1>How to uninstall theme</h1> <div class="level1"> <p> To uninstall the plugin, go to Admin > Home > Site Manager > Theme Manager, click recycle bin icon to uninstall (See image) </p> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:5218b868a8a4866310f781b4c419102f.png" class="media" title="documentation:5218b868a8a4866310f781b4c419102f.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:5218b868a8a4866310f781b4c419102f.png" class="media" alt="" /></a> </p> </div> <h1>How to install theme</h1> <div class="level1"> <ul> <li class="level1"> Copy theme source code into /app/</li> <li class="level1"> Go to Admin > Home > Site Manager > Theme Manager, select tab "not uninstalled themes" and click install (See image).</li> </ul> <p> <a href="/wiki/lib/exe/detail.php?id=documentation%3Acreate_first_theme&media=documentation:7ccc0d3367f6ef178cc7c7ca638ff0cd.png" class="media" title="documentation:7ccc0d3367f6ef178cc7c7ca638ff0cd.png"><img src="/wiki/lib/exe/fetch.php?media=documentation:7ccc0d3367f6ef178cc7c7ca638ff0cd.png" class="media" alt="" /></a> </p> <p> <em>SAMPLE THEME:</em> <a href="https://www.moosocial.com//wiki/lib/plugins/ckgedit/fckeditor/userfiles/file/mytheme.zip" class="urlextern" title="https://www.moosocial.com//wiki/lib/plugins/ckgedit/fckeditor/userfiles/file/mytheme.zip" rel="nofollow">https://www.moosocial.com//wiki/lib/plugins/ckgedit/fckeditor/userfiles/file/mytheme.zip</a> </p> </div>