Themes

Learn how to edit, compile, and over-ride currents themes in EasySocial.
Location Absolute
use with @import
Relative
use with url()
Path
Site current theme @{site_uri} @{site} /components/com_component/themes/current_theme
Site base theme @{site_base} @{site_base_uri} /components/com_component/themes/base_theme
Admin current theme @{admin} @{admin_uri} /administrator/components/com_component/themes/current_theme
Admin base theme @{admin_base} @{admin_base_uri} /administrator/components/com_component/themes/base_theme
User-configured theme @{user} @{user_uri} /media/com_component/admin/themes/theme_name
/media/com_component/site/themes/theme_name
Component media folder @{media} @{media_uri} /media/com_component
Component shared stylesheets @{component} @{component_uri} /media/com_component/styles
Foundry @{foundry} @{foundry_uri} /media/foundry/4.0
Global stylesheets @{global} @{global_uri} /media/foundry/4.0/styles

Import ordering

Foundry LESS compiler has been configured to have the following import seek ordering similar to Joomla's template override system. When importing external stylesheets using @import, the compiler will look for the stylesheet files based on the following order of locations:

  1. user
  2. site / admin
  3. site_base / admin_base
  4. component
  5. global

Path relativity

The relative path of all your stylesheet files, wherever they are located, is always the path of your current template stylesheet folder @{site}\styles. This is because the compiled stylesheet file is created at this location @{site}\styles\style.css.

Therefore, all external assets that is loaded using url() should contain the location variable prefix, e.g.

background: url('@{media}/images/image.png');
background: url('@{foundry}/styles/bootstrap/images/image.png');

Important! For your base theme, you MUST add the path variable prefix in front because the stylesheet may be loaded from another theme, e.g.

background: url('@{site-base}/images/image.png');

Importing absolute path

INTERNAL FEATURE: Foundry LESS compiler has been modified to import absolute paths. To tell the compiler that you are providing an absolute path, add a percent symbol prefix, e.g.

@import "%/home/user/public_html/style.less";
@import "@{site_base}/style"; /* When using one of the preset locations */