Learning Joomla! 3 Extension Development - Third Edition

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 ...