How to create a custom layout for Universal content module and other FLEXIcontent modules

For CSS/HTML developers, it is easy to create a NEW custom layout for the FLEXIcontent module

1.  Create new layout files/folders, by
   
   • duplicating:
     news.php
     news.xml
     /news/

     
     as:
     mynews.php
     mynews.xml
     /mynews/

   • renaming:
     /mynews/news.css
     to
     /mynews/mynews.css
   
   
   
2. Edit /mynews/mynews.css and do a global replace of ".news." to ".mynews." (please notice the 2 fullstops
   
   
3. Edit mynews.php and replace (near the top)

   <div class="news mod_flexicontent_wrapper ..." ...

     with

   <div class="mynews mod_flexicontent_wrapper ..." ...

4. Edit mynews.xml and replace
   name="news_
   with
   name="mynews_
5. Edit /mynews/mynews.css to customize the CSS rules that you need or to add more

1. Copying the layout files inside your Joomla template folder
2. Then editing module configuration and selecting the layout override

For example, to customize layouts
  tmpl/news.php,  tmpl/carousel.php,  tmpl/select.php,  tmpl/default.php,  ETC

copy the above to your Joomla template folder
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/news.php  (news.xml)
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/carousel.php(carousel.xml)
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/select.php  (select.xml)
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/default.php  (default.xml)

and override them with customized code

To

For example, header/footer of news template
  tmpl/news/header.php
  tmpl/news/footer.php

copy the above to your Joomla template folder
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/news/header.php
   /templates/JOOMLA_TEMPLATE_NAME/html/mod_flexicontent/news/footer.php

and override them with customized code