How to customize CSS styles of FLEXIcontent

-- Please, do not change FLEXIcontent core CSS files, they will be overwritten when you upgrade

1. If you only want to effect a SPECIFIC flexicontent template that is ASSIGNED to some categories or to some content types, then edit files:
   
   (category layout: multi-category, my-items, author, etc)
   component/com_flexicontent/templates/myCustomTemplate/css/category.css
   
   (item layout)
   component/com_flexicontent/templates/myCustomTemplate/css/itemcss
   
   
2. To custom GENERAL style AND/OR to effect all templates and pages,
   
   then the proper way is to create a CSS file inside your joomla template folder that will be loaded by FLEXIcontent automatically:
   joomla_folder/templates/myJoomlaSiteTemplate/css/flexicontent.css
   NOTE: for FLEXIcontent templates, duplicate the built-in template and edit files item.css or category.css, OR do not duplicate the template and instead place your customization in the above file (also see our FAQ & Tutorial sections for more information on templating)
   

-- So copy the CSS rules (NOT all only those you wish to customize) from components/com_flexicontent/assets/css/flexicontent.css into the above file, and make sure that they are of higher importance befor customizing, to do these follow these instructions:

1. Find (via firebug or other browser plugin), the class name of the HTML tag that you wish to customize.
   The browser plugin will also tell you which CSS rule effect it and also the line number of them inside file components/com_flexicontent/assets/css/flexicontent.css
2. Locate the inside flexicontent CSS file and copy the to the customization file joomla_folder/templates/mytemplate/css/flexicontent.css
3. Change the rule name to make it of higher importance, e.g. add a tag name body + space in front of the rule name
4. Change the CSS styles declaration or add new , e.g. font-weight: bold;
5. Revisit / Refresh frontend FLEXIcontent views to see the effect

To add a new CSS rule of  higher precedence, e.g. for class CSS rule '#flexicontent .desc-title' write any of the following :

#flexicontent .desc-title { ...!important; }
body #flexicontent .desc-title { ... }

Since Joomla 4.1 your need to move or create flexicontent.css in new location

media/templates/site/yourtemplate/css