JA Wall Insight #8: Extended Class

1. Extended Class Supported by default

In JA Wall, we use some extended class to style for items. The extended class is used to define width size of item (grid-double, grid-triple) or color (dark, purple ...) ...

Note: the extended class are defined for each style so there are some extended class that can not be used in some styles. Example: the extended class purple is only applied for style: teen_life.

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

Extended ClassStyle
grid-double All
grid-triple All
dark All
no-color teen_life
purple teen_life
blue All
hilite All
item-sticky All
item-sticky2 All
item-sticky3 All
item-hot All
item-new All
item-free All

 

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;
}

Super User

Egestas accumsan risus ipsum tellus porttitor egestas vel est Sed aliquet. In felis leo vel Curabitur volutpat morbi fringilla a Suspendisse semper.

Website: www.joomlart.com Email: This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments