JoomlArt Demo Site

Now we will make a table that show you which extended class goes with which style.

The style of the extended class (the extended class are used for all styles) is included in the template.css file in: templates/ja_wall/css . For the extended class that is used in a specific styles, it will be included in the theme.css file of the style. For example: the style of extended class: no-color (used in teen_life style only) is included in file theme.css in: templates/ja_wall/themes/teen_life/css.

2. How to use extended class

For Joomla content, add the extended class to the field: Extended Classes under the section: Metadata Options

While for K2 content, add the extended class to the field: Extended Classes in the tab: Extra Fields

3. Create new Extended Class

If you want to create an extended class for all styles, you need to defined and style it in the template.css file in: templates/ja_wall/css. And for extended class used in a style, define and style it in the theme.css file of the style.

Follow the code format

.item.[extended class]

Then use css code to style for the extended class

Example

/* Dark Style ---*/
.item.dark .item-inner {
  background: #333;
  border-color: #333;
  color: #FFF;
}

.item.dark .header h2 a {
  color: #FFF;
}

.item.dark:hover h2 a {
  color: #09c;
}

.item.dark .footer {
  background-color: #4b4b4b;
  color: #CCC;
  text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}

.item.dark .footer .article-info,
.item.dark .footer .article-hit,
.item.dark .footer .jac-add-button,
.item.dark .footer a {
  color: #CCC;
}

.item.dark .readmore a {
  border: 1px solid #666;
  color: #CCC;
}

.item.dark:hover .readmore a {
  border-color: #09c;
  color: #FFF;
}

/* ImageView Dark Style */
body.display-imageview .item.dark .item-inner {
  border-color: #333;
}