how to customize site-layout in alfresco share

malliswar — Thu, 30 Apr 2015 08:48:43 GMT

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-dashlet

Re: how to customize site-layout in alfresco share

malliswar — Mon, 11 May 2015 07:43:00 GMT

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

Re: how to customize site-layout in alfresco share

riyasoni42 — Thu, 19 Jan 2017 09:21:56 GMT

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?

topic Re: how to customize site-layout in alfresco share in Alfresco Archive

how to customize site-layout in alfresco share

Re: how to customize site-layout in alfresco share

Re: how to customize site-layout in alfresco share