Adding CSS

You might remember that in the preview view in the backend, we added some CSS directly to our view. It's a good idea to separate the CSS code and put it in its own file, and the best place to put it is in the media folder. So create the folders /media/com_folio/css and put an index.html in each new folder. Then create a file named site.stylesheet.css under /media/com_folio/css/ and add the following code:

.folio_title{
   color: #555555;
   font-family: 'Titillium Maps',Arial;
   font-size: 14pt;
}
.myfolio{
   padding-bottom: 20px;
   float: left;
   padding-right: 20px;
}
.folio_element{
   width: 150px;
   padding-top: 2px;
}

These are the same CSS styles that we used in the backend preview view. To load this file in our component, add the highlighted code in the following code snippet to /components/com_folio/folio.php:

<?php
defined('_JEXEC') or die;

$document = JFactory::getDocument();
$cssFile = "./media/com_folio/css/site.stylesheet.css";
$document->addStyleSheet(...