How To Style View With CSS

When you are writing HTML markup, the best strategy to use is the simplest HTML possible that's still semantic enough to imply what you're displaying. However, you often need the help of a style sheet to get the basic visual presentation you want.

The Places View is definitely one of those cases. We're going to be displaying images to the left of the Place Descriptions and we don't want to use tables.

Creating places folder

So first, let's get those images into place. Go to your images folder inside your root joomla installation and inside that create a folder called places folder. Then put all the images related to your places in that folder.

So now we have all the images that our places records(from the database) are going to reference. Next, what we want to do is add the style sheet that we're going to use.

Creating Component folder in media

Go into the media folder in your root installation of joomla and create a folder called com_noidacity and inside that create a subfolder called css and then create a file called places.css and add the following code to it.

.place_links{
  font-size: 1.3em;
}
 
.place_image{
  float: left;
  width: 225px;
}
 
.place_description{
}
 
.place{
  overflow: auto;
  margin-bottom: 30px;
}

Here we just have some very basic CSS that's here to add a little bit of visual styling to the HTML that we're going to output. You'll also notice that since we have this css folder here, later on we're going to add other assets that go with our component. But for now, we're just filing this away under css so that we can keep everything clean.

So once we have the CSS file in place, next we need to do some work on the view.

Add Model Component

The first thing we want to do is we need to beef-up the model that is behind the places. So at the moment, if you go to components>com_noidacity>models, you'll notice that we don't have an places model at all. So lets create a file called places in our model and add the following code.

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.modellist');
 
class NoidaCityModelPlaces extends JModelList
{
  public function getListQuery()
  {
    $query = parent::getListQuery();
 
    $query->select('*');
    $query->from('#__noidacity_places');
    $query->where('published = 1');
 
    return $query;
  }
}

You'll notice it's very basic. All we're doing is getting all the published places from the places table and returning that query.

So finally with that model in place, let's go back to the views, and let's replace the places view

view html file for editing

At the moment, we have a view.html.php file and the one that we currently have on the site doesn't really have anything in it, code for the current file is as following:

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewPlaces extends JView
{
}

So let's replace current view.html.php file with the following line of codes.

<?php
defined( '_JEXEC' ) or die;
 
jimport('joomla.application.component.view');
 
class NoidaCityViewPlaces extends JView
{
  protected $items;
 
  public function display($tpl = null)
  {
    $this->items = $this->get('Items');
 
    parent::display($tpl);
  }
}

So now this actually defines the display function and it gets the items from the model and assigns them to the view. So after saving that file, the only thing we have left to do is to update the layout.

So go into the tmpl folder open up default.php and replace its code with the following code.

<?php
defined( '_JEXEC' ) or die;
 
$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/com_noidacity/css/places.css');
?>
<h1><?php echo JText::_('COM_NOIDACITY_PLACES'); ?></h1>
 
<?php foreach($this->items as $item): ?>
  <?php $url = JRoute::_('index.php?option=com_noidacity&view=place&id='.$item->place_id); ?>
  <div class="place">
    <div class="place_image">
      <a href="<?php echo $url; ?>"><img src="<?php echo JURI::base() . $item->place_image; ?>" /></a>
    </div>
    <div class="place_description">
      <?php echo $item->place_description; ?>
    </div>
  </div>
<?php endforeach; ?>
 

So you'll notice just as before in some of the other views, we're cycling over some records and building some URLs and just outputting the descriptions, and then we also have a header that's being translated through JText.

$document = JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'media/com_noidacity/css/places.css');

But in addition to those two things, we also have the document object. We're calling JFactory::getDocument and this returns a document object, and what the document object allows us to do is it allows us to modify the HTML document as a whole that's being generated as Joomla goes through the components and the modules and the plug-ins that are generating the page. And as it's generating that page, it's collecting all the stylesheets, and JavaScripts and other assets that we want to add to the head section of the HTML page. So in this case, we want to add the places.css file that we put in the media folder and we want to display that when this view gets called. So using the addStyleSheet function of the document object we're able to add that CSS file.

JURI::base()

Notice also there is this JURI::base() function, that will always return the base URL of Joomla no matter where it's placed. So even if you have it in a subfolder, or you have it in a different domain, you don't have to worry, just call JURI::base() and you'll always get that base URL, and then we have the path to our CSS file. So we have media/com_noidacity/css/places.css.

display places in frontend of joomla

So now that we have all this in place, let's go to the frontend and load the places view. Let's go to index.php?option=com_noidacity&view=places, and now that we've loaded that, we have the CSS that is moving all the images to the left, while all the descriptions are on the right, and then the images are linked to the places themselves.

So with the JDocument object it's possible to add declarations to the header of the HTML document rather than adding the CSS in line. This makes it possible for Joomla to manage the list of assets and for us to keep our markup clean and regardless of Joomla is installed you can always get the base URL by calling JURI::base().