In our Hello World Joomla 2.5 content plugin, we only had the most necessary files - helloworld.php, helloworld.xml, and index.html. If you want to include css files within your plugin, you can easily do that using the addStyleSheet function. In this tutorial, we'll show you how to add css stylesheet files to your plugin.

Step 1: Create the CSS Stylesheet

The first thing to do is to actually create the css stylesheet. In our example, we created a css file named mystyle.css

Step 2: Reference your css file in your XML file

After you've created your css file, you need to update your plugin's XML file to include the css file. In our example, we need to add mystyle.css to our helloworld.xml file. Here is the section of code we used to accomplish this:

<files>
    <filename plugin="helloworld">helloworld.php</filename>
    <filename>index.html</filename>
    <filename>mystyle.css</filename>
</files>

In this example, we used <filename> to include mystyle.css.

Step 3: Load the stylesheet using addStyleSheet

The last thing we need to do is load the stylesheet using addStyleSheet. We can do this within the onContentPrepare function, as in:

public function onContentPrepare($context, &$row, &$params, $page = 0)
{
    $document = JFactory::getDocument();
    $document->addStyleSheet(JURI::base(). "plugins/content/helloworld/mystyle.css");
}

As you can see, we first declared $document, and then we used the $document->addStyleSheet to add the URL of the stylesheet to the document. As this css file is now included within the plugin, we can get the absolute URL of the plugin using a combination of JURI::base() along with the path to the file starting with plugins/content.

The above lines of code add the following reference in the head of our Joomla 2.5 page:

<link rel="stylesheet" href="http://YourDomain.com/plugins/content/helloworld/mystyle.css" type="text/css" />

If you have any trouble with adding css files to a Joomla 2.5 plugin, post a question in the comments at the bottom of this page and we'll more than happy to help!

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?
2013-11-20 11:04 am
Thanks for this helpful tutorial. FYI, & JFactory throws strict warning (if it is enabled) "Strict Standards: Only variables should be assigned by reference". Following works flawlessly without warnings.
$document = JFactory::getDocument();

Same thing applies here http://www.inmotionhosting.com/support/edu/joomla-25/create-plugin/add-javascript
Staff
9,521 Points
2013-11-20 5:48 pm
Hello hassanz,

Thank you for the information, I did some quick searching and confirmed from the PHP manual about PHP assignment by reference:

"As of PHP 5, the new operator returns a reference automatically, so assigning the result of new by reference results in an E_DEPRECATED message in PHP 5.3 and later, and an E_STRICT message in earlier versions."

I've gone ahead and updated both articles. Thanks again for the input!

- Jacob

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

2 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!