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

  • Published by
    George Papadakis
  • Last modified
    07 January 2019
  • Up to date
    Yes
  • Profile concerned
    Webdesigner
  • Concerns
    Modules Template
  • Since Version
    1.5.6
  • Voting
    Average rating
    11 votes
  • Favourites

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

Besides using the folder of the module, you can also override layouts by
  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

also override module HEADER AND FOOTER for this template



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