System Location: Web / Member Portal
Although the Appearance Settings and Appearance Images pages allow for extensive cosmetic customization of the entire member portal, more granular and more specific alterations can be made using CSS code.
Depending on the desired end result and specificity, CSS (and supporting) code can be included in a variety of locations.
The most notable are:
- Appearance Settings - "Custom Styles"
- Portal Text - Particularly in the "Banner" or "Footer", but any HTML-based portal text is an option.
- Module Code (HTML)
Class References
In many cases, class references and fixed object references are available to make targeted alterations easier.
.DefaultButton:hover {
background: #b49364;
color: #ffffff;
}
The above CSS code sets a custom background and text color upon mouse cursor hover for any object with the class DefaultButton.
However, dynamic characteristics in many areas of the member portal often times come without static references. This particular case requires additional work to make changes to specific objects.
Hierarchical References
In the example portal code below, the desire is to change the characteristics of the highlighted row. In this case, there is a class reference, but it is shared with other elements in a close vicinity. Referencing it would cause unwanted changes.
<table border="0" cellpadding="0" cellspacing="0" class="ModuleTable" role="presentation">
<tbody><tr>
<td align="left" valign="top" class="ModuleCell">
<table border="0" cellpadding="1" cellspacing="1" style="width: 100%" role="presentation">
<tbody><tr>
<td align="center" colspan="2">
<span id="ctl05_txtLoyaltyProgram" class="SmallModuleText">Loyalty Program</span>
</td>
</tr>
<tr>
<td align="right" style="width: 160px">
<span id="ctl05_lblPointsAvailable" class="SmallModuleText">Your current balance</span>
</td>
<td align="left">
<span id="ctl05_txtPointsAvailable" class="NormalModuleText">0</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
Although the object above has an identifier of ctl05_lblPointsAvailable, this particular object has an identifier that is automatically generated upon application compile and is subject to change with every Kognitiv Loyalty release. The prefix of "ctlXX" denotes this characteristic and as such, it should not be specifically referenced unless absolutely necessary.
Given the above, modifying the above can be performed by inserting the following CSS code in a HTML module placed above this one, for the sole purpose of acting as a CSS container.
table.ModuleTable tr td.ModuleCell table[cellpadding=�1�] tr td[style=�width: 160px�] span.SmallModuleText{font-size:15px;}
jQuery
Although the hierarchical reference method explained above will suffice, there may be cases where the targeted code is buried very deep. In this case, jQuery can be used to inject a class using a wildcard and subsequently referenced using typical CSS.
$(document).ready(function() {
$('[id*="_lblPointsAvailable"]').addClass("points-available-label");
});
Again, inserting the above code in a HTML module placed above the targeted module for the sole purpose of acting as a code container is the recommended course of action. This would then need to be followed up by CSS in which case, the injected class can be referenced.
As the jQuery example above adds the class on document load, any related elements being styled will be briefly displayed in their original condition first and then inherit the styles from the class that�s being applied to it. In other words, the end-user may see a slight flicker of that element in its original state before the CSS is applied to it. Placing this in the "Custom Styles" section (as explained above) will circumvent this, but it has the potential side effect of global propagation.
