how to customize site-layout in alfresco share

[malliswar]

hi everyone,

           i am using alfresco-5.0.a and i want a customized layout for a site

           by default we have 5-different layouts in alfresco, 1-column,two 2columns,3-column,4-column.


    but i want a complete cutomized layout: consider i took 3-column layout here i can drag drop

3-dashlets side by side ,now i want to sub-divide the middle column of the layout into two columns

so now there can be 5 dashlets side by side


is it possible to achevie this requirement ,please help me   


Thanks in advance

[malliswar]

hi all


After doing some research i found the solution by myself

i don't know whether  what i followed is the standard approach to achieve the requirement

but i will just share the solution so that it may help someone else

i created new file in this directory

home/malliswarreddyb/alfresco-5.0.a/tomcat/shared/classes/alfresco/web-extension/site-data/template-instances/dashboard-my.xml

<?xml version='1.0' encoding='UTF-8'?>
<template-instance>
<template-type>org/alfresco/mydashboard</template-type>
<description>custom no.of columns</description>
<properties>
      <gridClass>yui-custom</gridClass>
      <gridColumn1>5</gridColumn1>
      <gridColumn2>5</gridColumn2>
      <gridColumn3>5</gridColumn3>
      <gridColumn4>5</gridColumn4>
      <gridColumn5>5</gridColumn5>
      <gridColumn6>5</gridColumn6>
   </properties>
</template-instance>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

then i created following file which contains template-layout in below directory

/home/malliswarreddyb/alfresco-5.0.a/tomcat/shared/classes/alfresco/web-extension/templates/org/alfresco/mydashboard.ftl

<#include "include/alfresco-template.ftl" />
<@templateHeader />

<@templateBody>
  
<@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>

<@markup id="bd">
<div id="bd">
     <div class="yui-custom">
         <div class="column1">
         <@region id="component-1-1" scope="page"/>
    <@region id="component-1-2" scope="page"/>
               <div class="yui-g subcolumn1-1"> 
                  <@region id="component-1-3" scope="page" />
       </div>
                 <div class="yui-g subcolumn1-2"> 
                  <@region id="component-2-3" scope="page" />
               </div>
         </div>
         <div class="column2">
         <@region id="component-2-1" scope="page"/>
    <@region id="component-2-2" scope="page"/>
                 <div class="yui-g subcolumn2-1">
                  <@region id="component-3-3" scope="page" />
             </div>  
       <div class="yui-g subcolumn2-2">
                    <@region id="component-4-3" scope="page" />
             </div>     
         </div>
         <div class="column3">
         <@region id="component-3-1" scope="page"/>
    <@region id="component-3-2" scope="page"/>
                   <div class="yui-g subcolumn3-1"> 
                  <@region id="component-5-3" scope="page" />
                 </div>
         <div class="yui-g subcolumn3-2"> 
          <@region id="component-6-3" scope="page" />
                 </div>
         </div>
      
      </div>
</div>
   </@>

</@>

<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global"/>
   </div>
   </@>
</@>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

then added below css code in file

/home/malliswarreddyb/alfresco-5.0.a/tomcat/webapps/share/css/yui-fonts-grids.css

.yui-custom .column1 .yui-g,
.yui-custom .column2 .yui-g,
.yui-custom .column3 .yui-g{
        
        margin: 1.03%;
   width: 47.9%;
        float: left;
        margin-top: -4%;
}

.yui-custom .column1,
.yui-custom .column3{
         
   width: 25%;
   margin-left: 0.99%;
        float: left;
}
.yui-custom .column2{
         
   width: 46%;
   margin-left: 0.99%;
        float: left;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and then extended below two files in directory

/home/malliswarreddyb/alfresco-5.0.a/tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/dashboard/

customise-dashlets.get.js

customise-layout.get.js


the above two files can be found in alfresco directory "search for them"


then in customise-dashlets.get.js file changed below line

   var columns = [[], [], [], []];  

   as
      var columns = [[], [], [], [], [], [], [], []];

and then in customise-layout.get.js file

added below code

"dashboard-my" : {
         templateId: "dashboard-my",
         noOfColumns: 6, 
         description: msg.get("custom template"), 
          //custom-dashboard.png is a png file that created and placed in below directory
         icon: url.context + "/res/components/dashboard/images/custom-dashboard.png"}
   };
‍‍‍‍‍‍‍‍‍

after this line icon: url.context + "/res/components/dashboard/images/dashboard-4-columns.png"},


restart the server you should see layout changes  some thing like

_______    _________   ________
_______    _________   ________     // 3 columns

_______    _________   _________
_______    _________   _________    //3 columns

__  __        __  __         __   __
__  __        __  __         __   __     //6 columns

[riyasoni42]

I want to add custom layout which contains only 2 columns of same size in user dashboard page, so can anyone provide ftl for the same?