Extension Documentation

Chapter 10. CSS Styling
Prev Part I. Macrotone Issue Tracker Next

Chapter 10. CSS Styling

Table of Contents

Blue theme CSS styling
Alternative 'greenish' theme CSS styling
Spearmint flavoured style.
List Row colouring
Front End form
Back End styling
Bootstrap CSS

This section which was/is also part of the Design guide is reproduced here since modification of the CSS is something that is often desire/required for a site front end. As supplied the component displays correctly upon sites using the Joomla supplied Protostar and Beez templates so will display in an acceptable form without modifications on sites using these or templates derived from these templates. Most sites however choose to use a template from a third party and it is this that often necessitates the need to modify or tweak the CSS rules supplied.

It is possible by tweaking the CSS to change the 'look and feel' of the front end of the site. It is not the purpose of this document to describe all of the possible CSS configuration options that can be used, but instead to describe a few of the more commonly used options.

[Note]Note

It is beyond the scope of this document to go into the details of CSS styling as there are a number of resources available on the web providing details.

It is possible to change the CSS styling used on your site by using a media override. When installed the CSS stylesheets for the Issue Tracker Component are installed in the 'media/com_issuetracker' directory. Release 1.3.0 allows the site administrator to create a site override by creating a directory named media/com_issuetracker under the site template directory. One then copies the folders and files that it is desired to override in this location. Then almost like magic, Issue Tracker will now load which ever files are under the template instead of that contained in the media directory under the site's root directory.

The following specific class names are supplied in the Issue Tracker list displays (Issues, People and Projects):

  • itstyle : A copy of the standard adminlist table styles. This replicates very closely the default theme used in versions 1.2.2 and earlier of Issue Tracker.

  • itbluestyle : A blue themed table style.

  • italtstyle : A greenish table theme.

There are also other class names available on the row and data definitions - fieldDiv fieldLabel, and fieldDiv fieldValue which are also present upon the list views and are present to permit additional styling if it should be desired.

An example of using these fields is given below. This simple example changes the 'legend' and the colour and weight of the displayed text. The classes are provided to enable a designer to modify the form to match site styling requirements.

/***************************************/
/* Sample style for front end FieldDev */
/***************************************/
.fieldDiv body {
        font-family:arial, verdana, sans-serif;
        font-size:0.8em;
        background:#8be;
        color:#fff;
}
.fieldDiv legend  {
        font-size:14px; 
        background:#FAFAFA; 
        border:1px solid #C3C3C3; 
        border-radius:0 0 3px 3px; 
        position:relative; 
        width:auto; 
        padding:2px 10px;
}
.fieldDiv dl {
        font-weight: bold;
}
.fieldDiv dt {
        font-weight: bold;
        letter-spacing: 2px;
        color: #bf2c22;
}
.fieldDiv dd {
        color: #5454d4;
}

The figures below shows the results of the CSS fieldDiv styling on a simple item display with and without styling.

Figure 10.1. Item without fieldDiv styling.

Item without fieldDiv styling.

Figure 10.2. Item with fieldDiv styling.

Item with fieldDiv styling.

Change the fieldDiv styling in the template override file to suit the site standards. This ensures that your changes are not lost when the component is updated.

The name of the CSS style sheet file used in the front end of your site is named 'issuetracker.CSS'. The supplied file contents are shown below and presents a blue theme to the listing display.

To retain the style of existing sites the default 'adminlist' remains as it was in release 1.2.2 and earlier. This style will have been defined in the site default system template.

The three themes are provided as examples of what can be achieved and all that is necessary is to specify the desired theme in the menu configuration option from the 'Advanced' tab.

If one is creating their own theme then one can either edit one of the existing themes and introduce your own settings, or create a completely new theme with its own unique name, and specify that in the menu option Advanced settings.

[Caution]Caution

The supplied CSS styling examples below may change between releases and is provided as a guide only. For the version installed with your version of the component please inspect the CSS files supplied within the installation zip file.

Blue theme CSS styling

The details settings employed in the 'blue theme' are displayed below. Recent changes may not be reflected in the documentation and one is advised to view the settings directly in the CSS file for the latest version.

/*************************/
/* Table look and feel   */
/* Blue theme            */
/*************************/
/*
table.itbluestyle table, 
table.itbluestyle td, 
table.itbluestyle th {
   border-collapse:collapse;
   margin:0;
   padding:0;
}

table.itbluestyle {
   border: none;
   font-family: Garamond, Georgia, "Times New Roman", Times, serif;
}

table.itbluestyle table caption {
   background-color: transparent;
   background-repeat: repeat-x;
   background-position: bottom left;
   text-align:left;
   font-size:150%;
   text-transform:uppercase;
   line-height: 30px;
   letter-spacing:0px;  
}

table.itbluestyle td, 
table.itbluestyle th{  
   vertical-align:top;
   font-weight:normal;  
}

table.itbluestyle thead {
   border-left:1px solid #2293FF;   
}

table.itbluestyle thead th {
   background: #bddfff;
   color: #FFFFFF;
   font-size: 125%;
   font-weight: bold;
   border-top:1px solid #2293FF;
   border-right:1px solid #2293FF;
   padding: 4px 0.4em 4px 0.4em; 
}

table.itbluestyle tfoot td, 
table.itbluestyle tfoot th {
   border-top:1px solid #2293FF;
   border-right: none;
   font-weight: bolder;
   font-size: 110%;
   padding: 0.4em 0.5em 0.4em 0.5em;
}

table.itbluestyle tbody tr.row0 td,
table.itbluestyle tbody th {
   background-color: #D9ECFF;
   border-right:1px solid #2293FF;
   border-left:1px solid #2293FF;
   padding: 0.4em 0.5em 0.4em 0.5em;
        word-wrap: break-word;
}

table.itbluestyle tbody tr th, 
table.itbluestyle tbody tr.row1 td{
   background-color: #BDDFFF;
   border-right:1px solid #2293FF;
   border-left:1px solid #2293FF;
   padding: 0.4em 0.5em 0.4em 0.5em;
        word-wrap: break-word;
}

table.itbluestyle tbody th{  
   font-weight: bold;   
   border-left:1px solid #2293FF
}

table.itbluestyle a:link, 
table.itbluestyle a:visited, 
table.itbluestyle a:active { 
   color:#444F66;
   background-color: transparent;
   text-decoration: underline;
}

table.itbluestyle a:hover {
   text-decoration:none;
   background-color: #1E90FF;
   color: #FFFFFF;
}

The figure below shows the results of the blue theme styling.

Figure 10.3. Blue theme CSS styling

Blue theme CSS styling

Prev Up Next
Chapter 9. Custom Fields Home Alternative 'greenish' theme CSS styling
Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries