{"id":1509,"date":"2012-06-25T17:08:40","date_gmt":"2012-06-25T21:08:40","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2012\/06\/25\/add-stylesheet\/"},"modified":"2021-08-16T23:40:30","modified_gmt":"2021-08-17T03:40:30","slug":"add-stylesheet","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/","title":{"rendered":"How to add a css StyleSheet to a Joomla 2.5 content plugin"},"content":{"rendered":"

Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here<\/a>.<\/p>\n

In our Hello World Joomla 2.5 content plugin<\/a>, 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.<\/p>\n

Step 1: Create the CSS Stylesheet<\/h2>\n

The first thing to do is to actually create the css stylesheet. In our example, we created a css file named mystyle.css<\/p>\n

Step 2: Reference your css file in your XML file<\/h2>\n

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:<\/p>\n

<files>\n    <filename plugin=\"helloworld\">helloworld.php<\/filename>\n    <filename>index.html<\/filename>\n    <filename>mystyle.css<\/filename><\/strong>\n<\/files><\/pre>\n
In this example, we used <filename><\/strong><\/span> to include mystyle.css<\/strong><\/span>.<\/p>\n
Step 3: Load the stylesheet using addStyleSheet<\/h2>\n
The last thing we need to do is load the stylesheet using addStyleSheet. We can do this within the onContentPrepare function, as in:<\/p>\n
public function onContentPrepare($context, &$row, &$params, $page = 0)\n{\n    $document = JFactory::getDocument();\n    $document->addStyleSheet(JURI::base(). \"plugins\/content\/helloworld\/mystyle.css\");<\/strong>\n}<\/pre>\n
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()<\/strong> along with the path to the file starting with plugins\/content<\/strong>.<\/p>\n
The above lines of code add the following reference in the head of our Joomla 2.5 page:<\/p>\n
<link rel=”stylesheet” href=”https:\/\/example.com\/plugins\/content\/helloworld\/mystyle.css” type=”text\/css” \/><\/p>\n
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!<\/p>\n","protected":false},"excerpt":{"rendered":"
Joomla 2.5 has reached its end of life as for 12\/31\/2014. Please be advised this may be a security risk to your website. You can view more information about the end of life here. In our Hello World Joomla 2.5 content plugin, we only had the most necessary files – helloworld.php, helloworld.xml, and index.html. If Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,82],"tags":[2113],"class_list":["post-1509","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-2-5","tag-joomla-v2-5"],"acf":[],"yoast_head":"\nHow to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-25T21:08:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:40:30+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add a css StyleSheet to a Joomla 2.5 content plugin\",\"datePublished\":\"2012-06-25T21:08:40+00:00\",\"dateModified\":\"2021-08-17T03:40:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\"},\"wordCount\":352,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"keywords\":[\"Joomla v2.5\"],\"articleSection\":[\"Joomla\",\"Joomla 2.5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\",\"name\":\"How to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2012-06-25T21:08:40+00:00\",\"dateModified\":\"2021-08-17T03:40:30+00:00\",\"description\":\"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a css StyleSheet to a Joomla 2.5 content plugin\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support & Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting","description":"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/","og_locale":"en_US","og_type":"article","og_title":"How to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting","og_description":"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2012-06-25T21:08:40+00:00","article_modified_time":"2021-08-17T03:40:30+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add a css StyleSheet to a Joomla 2.5 content plugin","datePublished":"2012-06-25T21:08:40+00:00","dateModified":"2021-08-17T03:40:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/"},"wordCount":352,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"keywords":["Joomla v2.5"],"articleSection":["Joomla","Joomla 2.5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/","name":"How to add a css StyleSheet to a Joomla 2.5 content plugin | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2012-06-25T21:08:40+00:00","dateModified":"2021-08-17T03:40:30+00:00","description":"You can use the addStyleSheet document function to add external css stylesheets to your Joomla 2.5 plugin.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-2-5\/add-stylesheet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add a css StyleSheet to a Joomla 2.5 content plugin"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support & Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=1509"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1509\/revisions"}],"predecessor-version":[{"id":85885,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/1509\/revisions\/85885"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=1509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=1509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}