Adjusting the component's look and feel

The look and feel of RSBlog! can be adjusted through several methods depending on the Joomla! versions you are using.

For Joomla! 3.x:

This Joomla! version does not incorporate frontend blog themes, the look and feel is adjusted through template overrides.

Though RSBlog! comes with a well organized display, there may be times when you would like to improve / adjust the look and feel of a certain area. The team thought this through and designed RSBlog! in such a way that almost every view can be adjusted via template overrides.

Template overrides offer tremendous flexibility in terms of content look and feel. Basically you can control any aspect - HTML output and CSS, without affecting the component's update process (changes to the source code would have been lost if an update occurred). As a drawback, this method requires a basic understanding of PHP, HTML and CSS.

This technique consists in duplicating the component's (this works for modules too) view files into the template's HTML folder. A complete list of what file controls what view can be found below:

  • a blog article page (through the Single Post menu item) - \components\com_rsblog\views\post\tmpl\default.php
  • creating a new blog post page (through the Create Post menu item) - \components\com_rsblog\views\form\tmpl\edit.php
  • subscribing for new blog posts form - \components\com_rsblog\views\subscribe\tmpl\default.php
  • tags listing page - \components\com_rsblog\views\tags\tmpl\default.php
The Blog Listing Page

The Blog View menu item is more flexible in terms of customization. This was made possible by the inclusion, in Version 1.8.0, of 7 themes. They are being controlled by the following files:

  • Default: - \components\com_rsblog\views\posts\tmpl\default_item_default
  • Theme 1: - \components\com_rsblog\views\posts\tmpl\default_item_theme1
  • Theme 2: - \components\com_rsblog\views\posts\tmpl\default_item_theme2
  • Theme 3: - \components\com_rsblog\views\posts\tmpl\default_item_theme3
  • Theme 4: - \components\com_rsblog\views\posts\tmpl\default_item_theme4
  • Theme 5: - \components\com_rsblog\views\posts\tmpl\default_item_theme5
  • Theme 6: - \components\com_rsblog\views\posts\tmpl\default_item_theme6

If you are new to Joomla! development, then it is probably easiest to start with an existing view, and try modifying it to achieve the desired result. To do this, you should make a copy of the existing view in the html directory of your template, and then modify the copy. The directory structure would be similar to this:


For example, if you wish to change the way how the blog listing page is displayed, then you should copy default_item_themeNumber.php file, maintaining the directory structure within the template's HTML folder:

copy: PATH_TO_JOOMLA/components/com_rsblog/views/posts/tmpl/default_item_themeNumber.php
to: TEMPLATE_NAME/html/com_rsblog/posts/default_item_themeNumber.php

Template overwrites can also be used for the modules available for the component. Complete list of what files control each module below:

  • Archive module - \modules\mod_rsblog_archive\tmpl\default.php
  • Calendar module - \modules\mod_rsblog_calendar\tmpl\default.php
  • Categories module - \modules\mod_rsblog_categories\tmpl\default.php
  • Popular Posts module - \modules\mod_rsblog_popular\tmpl\default.php
  • Recent Posts module - \modules\mod_rsblog_recent\tmpl\default.php
  • Tag Cloud module - \modules\mod_rsblog_tags\tmpl\default.php

Assuming you want to remove the "written by" and the avatar from the header part of the single post view page. You will have to perform template overrides for the following file, located under this path:


Open the duplicate and remove the following code:

    <?php echo JHtml::_('icon.avatar', $this->item, $this->config); ?>
        <?php echo JText::sprintf('COM_RSBLOG_WRITTEN_BY', JHtml::_('', $this->item, $this->config)); ?>

To help get your way around while creating template overrides, code comments have been added within the common RSEvents!Pro PHP files.

A template folder will contain:

/css folder - The CSS folder contains the default.css file. All your CSS adjustments will take place here.

/images folder - This is simply used to store some of the icons that are used through the front-end part of the component.

index.html file - Used for security reasons. There is no need for any modification here.

      echo $post->title;

single.php file - This file controls the layout and information displayed on the full article page. For example, if you don't want to display the author, you would have to remove the following syntax:

      <p class="rsb_info rsb_author">
      <?php echo JText::_('RSB_GENERAL_CREATED_BY'); ?>: <span><?php echo JHTML::_('rsblog.owner',$post); ?></span>

Just the content of the files can be altered. The file and folder naming should be kept as they are.

4 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

How to remove the hovering style from the front-end post adding form?

How can i alter the footer from the post listing?