Custom code and styles for CP Addons plugin for ClassiPress

The main idea behind the CP Addons plugin is to highlight some ClassiPress ads over others. Ad owners gladly pay for it and your site makes a profit. Below you will find few insights on how to style featured ads with samples.

Featured Ad Ribbons

A Ribbon is the most popular way to highlight featured ads. Usually, this is colored band with the text adjacent to a featured image or ad block in general.

Different ClassiPress versions and child themes have different styles, what requires different ways to add ribbons. Here we provide some samples for most frequent cases.

Featured Ads ribbon for ClassiPost v1.3.8

ClassiPost is one of the most popular ClassiPress v3 child themes, whose users done a lot of requests for custom CP Addons styles.

How it looks

Code

Add the CSS code to the Additional CSS section of your theme Customizer:

.featured-ad_listing-vip .image-item {
    overflow: hidden;
}
.featured-ad_listing-vip .image-item:before {
    content: 'featured ad';
    position: absolute;
    z-index: 99;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 100px;
    display: block;
    background: #e1e1e1;
    color:#000;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    top: 19px;
    left: -21px;        
}

Notes:

• Replace ‘featured ad‘ with appropriate words.
• Change color and background on your taste.
• Replace ‘.featured-ad_listing-vip‘ with the CSS class of appropriate addon. By default, the standard VIP addon used.
• Tested with ClassiPost child theme version 1.3.8.

Featured Ads ribbon for eClassify v1.7.1

eClassify is another popular ClassiPress child themes compatible with v4.

How it looks

Code

Add the CSS code to the Additional CSS section of your theme Customizer:

.featured-ad_listing-vip .post-block .post-left:before {
    background-image: url('https://example.com/wp-content/themes/eclassify/img/featured.png');
    content: '';
    display: block;
    float: left;
    height: 88px;
    margin: -11px 0 0 -10px;
    padding: 0;
    width: 88px;
    position: absolute;
    z-index: 900;
}


.box .featured-ad_listing-vip .post-block .post-left:before {
    margin: -7px 0 0 -7px;
}

Notes:

• Replace https://example.com with your site address
• Replace ‘.featured-ad_listing-vip‘ with the CSS class of appropriate addon. By default, the standard VIP addon used.
• Tested with eClassify child theme version 1.7.1

Badges

Badges are another great way to highlight featured ads. It allows adding multiple different badges on the ad block, what gives visitors a good idea on what is special in this featured ad.

Badges for vanilla ClassiPress v4+

In example below, an ad item has Highlight and VIP addons enabled, and both addons displayed as badges on the ad. Surely you can use any other addons and badge texts, including font icons.

How it looks

Code

PHP Code:

Add the following PHP code in the Code Snippets plugin or any other way you prefer.
Read comments in the code and edit it according to your needs.

function my_cp_add_listing_item_featured() {

    // Only show on archive pages.
    // Category, Author, Listing Post Types, Listing Search, etc.
    if ( ! is_archive() ) {
        return;
    }

    // Change the list of addons according to your case.
    // NOTE: get the Addon type on the addon page under the Slug box.
    $addons_types = array(
        'ad_listing-highlight'  => __( 'Highlight', 'yourdomain' ),
        'ad_listing-vip'        => __( 'VIP', 'yourdomain' ),
        'ad_listing-urgent'     => __( 'Urgent', 'yourdomain' ),
        'ad_listing-good-price' => __( 'Good Price', 'yourdomain' ),
        'ad_listing-tipp'       => __( 'Tipp', 'yourdomain' ),
        'ad_listing-featured'   => __( 'Featured', 'yourdomain' ),
    );

    $labels = '';

    // Go through all addons above and add a label HTML.
    foreach ( $addons_types as $addon_type => $label ) {
        if ( appthemes_has_addon( get_the_ID(), $addon_type ) ) {
            $labels .= '<span class="featured-label label featured-label-' . $addon_type . '">' . $label . '</span>';
        }
    }

    if ( ! empty( $labels ) ) {
        echo html( 'div class="featured-label-wrap" style="position:absolute;top:0;line-height:0.9;"', $labels );
    }

}
add_filter( 'cp_listing_item_head', 'my_cp_add_listing_item_featured', 8 ); 

CSS Code:

Following CSS code needs for styling badges.

Change ad_listing-highlight to appropriate addon name.
Change background and color on your taste.

Add it to appropriate Addon setting or in the Additional CSS section of the Customizer:

.featured-label.featured-label-ad_listing-highlight {
    position:initial;
    background: #F8AC59;
    color: #FEFEFE;
    margin-right: 5px;
}

Highlighted backgrounds

The highlighted background probably the best way to draw attention to a featured ad. Visitors notice them first.

CP Addons plugin provided with a build-in styles for Highlight addon, which you can use as the base for further styling.

How it looks

Code

Add the CSS code to the Additional CSS section of your theme Customizer:

/* ClassiPress 3 */
.featured-ad_listing-highlight .post-block,
/* ClassiPress 4 */
.listing-item.featured-ad_listing-highlight,
.featured-ad_listing-highlight {
	background-color: #FFF7E7;
}

.listing-item.featured-ad_listing-highlight .entry-content,
.listing-item.featured-ad_listing-highlight .entry-title {
	font-weight: bold;
}

.listing-item.featured-ad_listing-highlight {
	border: 3px #ec5840 solid !important;
}

.featured-label.featured-label-ad_listing-highlight {
    position:initial;
    background: #F8AC59;
    color: #FEFEFE;
    margin-right: 5px;
}

Notes:

• Change color and background on your taste.
• Replace ‘.featured-ad_listing-highlight‘ with the CSS class of appropriate addon. By default, the standard Highlight addon used.