How to add CSS to Joomla articles, plugins, modules or components?

You can actually insert css stylesheets anywhere in your Joomla article, plugin, module or component. The css usually will display fine.

However, if you want you page to be XHTML compliant, then you must place your css stylesheets to the <HEAD> section of your HTML page.


1. Loading External Stylesheets

    Method 1

    1. If your css stylesheet is all contained in a .css file, you can use the following to load the css file. Note: Assume your css file is stored in media/system/css/
    2. JHTML::stylesheet('your_css_file.css');
      

    3. The default location for the css stylesheet is in media/system/css/. If your css stylesheet is stored in another folder, you can use the following to load the css file:
    4. JHTML::stylesheet('your_stylesheet.css', '/full/path/to/the/css/folder');
      

    Method 2

    1. You can also use the following method to load an external css stylesheet:
    2. $document = JFactory::getDocument();
      $document->addStyleSheet(JURI::base(). 'plugins/content/yourplugin/yourplugin.css');
      

    Note: Method 1 uses path. Method 2 uses url

2. Loading inline css styles

  1. Suppose you want to add the following css styles to the <HEAD> section of your HTML page:
  2. <style type="text/css">
    .menu {
    	line-height:1.0;
    	float:left;
    	margin-bottom:1.5em;
    	position: relative;
    }
    </style>
    

  3. Use the following to insert the css styles:
  4. $style = "
    .menu {
    	line-height:1.0;
    	float:left;
    	margin-bottom:1.5em;
    	position: relative;
    }
    ";
    $document->addStyleDeclaration($style);
    

Add comment


Security code
Refresh