This guide covers the visual customisation options available in the "I Recommend This" plugin, including built-in styles, text customisation, and CSS overrides.

Overview

The plugin offers two built-in visual styles and extensive customisation options through CSS. All text elements can be modified through the plugin settings, and complete visual control is available by disabling the default CSS.

---

Built-in Style Options

The plugin provides two visual styles:

• Default thumbs-up style: Clean, recognisable thumbs-up icon that most users instantly understand
• Heart style alternative: More emotionally engaging heart icon, popular for personal blogs and lifestyle sites

Selecting a style: Change in Settings > I Recommend This > Choose a style

---

Text Label Customisation

All text elements can be customised in the plugin settings:

• Button text options:
  • New recommendation text (default: "Recommend this")
  • Remove recommendation text (default: "Unrecommend this")
• Count text options:
  • Zero count text (e.g., "Be the first to recommend")
  • Single recommendation text (e.g., "Recommendation")
  • Multiple recommendations text (e.g., "Recommendations")
• Visibility options:
  • "Hide Zero Count" setting only to show numbers when greater than zero

---

CSS Control

Disabling Plugin CSS

To completely customise the appearance, check "Disable CSS" in plugin settings. This removes all plugin styles, allowing you to define your own.

Common Customisation Examples

Add these to your theme's stylesheet after disabling plugin CSS:

Basic Button Styling

/* Custom recommendation button */
.irecommendthis {
    background: none;
    padding: 0 0 0 10px;
    border: 0 !important;
    margin-bottom: 10px;
    display: inline-block;
    text-decoration: none;
    color: #333;
}

/* Hover and active states */
.irecommendthis:hover,
.irecommendthis.active {
    color: #F56559 !important;
}

Customising the Counter

/* Counter style */
.irecommendthis-count {
    font-weight: bold;
    font-size: 18px;
    color: #555;
}

/* Text after the counter */
.irecommendthis-suffix {
    font-style: italic;
    font-size: 14px;
    color: #777;
}

Custom Icon Example

/* Replace with custom SVG or icon font */
.irecommendthis::before {
    content: '\f004'; /* Font Awesome heart icon */
    font-family: 'FontAwesome';
    margin-right: 5px;
    color: #ccc;
}

.irecommendthis:hover::before,
.irecommendthis.active::before {
    color: #F56559;
}

Button States

The plugin uses these states that you can target with CSS:

• .irecommendthis - Default state
• .irecommendthis:hover - Mouse hover state
• .irecommendthis.active - Already recommended state
• .irecommendthis.processing - During AJAX processing
• .irecommendthis-count.count-zero - When the count is zero

---

HTML Output Structure

Understanding the plugin's HTML structure is crucial for effective customisation. Here's the exact HTML output generated by the plugin:

Basic Button Output

<div class="irecommendthis-wrapper">
    <a href="#" class="irecommendthis" data-post-id="123" data-like="Recommend this" data-unlike="Unrecommend this" aria-label="Recommend this" title="Recommend this">
        <span class="irecommendthis-count">15</span> 
        <span class="irecommendthis-suffix">Recommendations</span>
    </a>
</div>

Element Breakdown

• Wrapper div: .irecommendthis-wrapper - Container element (can be disabled)
• Button anchor: .irecommendthis - The clickable element with states:
  • .active - Added when the user has already recommended
  • .processing - Added during AJAX processing
  • .irecommendthis-post-123 - Class with post ID
• Count element: .irecommendthis-count - Displays the number of recommendations
  • .count-zero - Added when count is zero
• Suffix element: .irecommendthis-suffix - Text displayed after the count

Data Attributes

The button includes several data attributes that control its behaviour:

• data-post-id - The ID of the post being recommended
• data-like - Text for recommendation action
• data-unlike - Text for unrecommendation action

Accessibility Attributes

For better accessibility, the plugin includes:

• aria-label - Screen reader text describing the button's action
• title - Tooltip text on hover

Variation: Heart Style

When the Heart style is selected, the same HTML structure is used, but different CSS is applied to show a heart icon instead of a thumb.

Variation: Without Wrapper

When the wrapper parameter is set to false:

<a href="#" class="irecommendthis" data-post-id="123" data-like="Recommend this" data-unlike="Unrecommend this" aria-label="Recommend this" title="Recommend this">
    <span class="irecommendthis-count">15</span> 
    <span class="irecommendthis-suffix">Recommendations</span>
</a>

---

Summary

The "I Recommend This" plugin provides flexible visual customisation through built-in styles and CSS overrides. The plugin's HTML structure and CSS classes allow for comprehensive customisation while maintaining functionality.

Test customisations across different browsers and devices to ensure compatibility. Always maintain accessibility standards when implementing custom styles.