Customize Call to Action Heart

[4bservices]

I found this thread: https://archived.seventhqueen.com/forums/topic/call-to-action-hover-on-img_rounded

That shows how to turn off the circle transparent with the heart but I’d like to change that image to a custom one. Where is the original image so I can match the dimensions and how would I change it to call the one I create?

[Catalin]

Hello,

Take a look at this:

http://fontawesome.io/3.2.1/cheatsheet/

here you have a list with the icons you can use. To change it you need to add this code:

COPY CODE

.icon-heart:before 
{
content: "\xxxx";
}

u need to replace \xxx with the code corespondent to the icon you chose. As an example:

COPY CODE

icon-play -> content: "\f04b"; 

Let me know if this works.

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[4bservices]

Okay this worked great however I am using your code found here: https://archived.seventhqueen.com/forums/topic/removereplace-the-love-hearts-in-site

and now the dashboard icons I had are gone.

Also, I don’t want to remove the matching but just change to a different icon instead of the two little hearts.

IN MY child functions.php

add_action(‘after_setup_theme’,’kleo_my_hearts_actions’);

function kleo_my_hearts_actions()
{
/* disable matching on member profile */
remove_action(‘kleo_bp_before_profile_name’, ‘kleo_bp_compatibility_match’);

/* Replace the heart over images */
add_filter(‘kleo_img_rounded_icon’, ‘my_custom_icon’);

/* Replace the heart from register modal */
add_filter(‘kleo_register_button_icon’, ‘my_custom_icon_register’);

/* Replace the heart from About us widget */
add_filter(‘kleo_widget_aboutus_icon’, ‘my_custom_icon_about_widget’);
}

/* Replace the heart with a camera icon function */
function my_custom_icon () {
return ‘tachometer’;
}

/* Replace the heart from register modal with a user icon function */
function my_custom_icon_register () {
return ‘tachometer’;
}
/* Replace the heart from about us widget with a user icon function */
function my_custom_icon_about_widget () {
return ‘tachometer’;
}
?>

IN THE QUICK CSS

.icon-heart:before
{
content: “\f0e4”;
}

[Catalin]

please send me credentials to your website.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[4bservices]

This reply has been set as private.

[Catalin]

what dashboard icons are you referring to?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[4bservices]

.icon-heart:before
{
content: “\f0e4″;
}

It replaced the heart that appeared when you say moused over an image. It’s a dashboard icon. Now nothing shows just a semi-transparent circle with now icon in it at all.

[4bservices]

I was trying to remove all the hearts but keep the matching as well if you read the post earlier I gave all of that code that I’m replacing with the “trachometer” icon.

[4bservices]

Any ideas?

[4bservices]

I’m wondering if the code I used to remove the matching did something and it removed ALL the hearts instead of replacing some of those icons with the dashboard/trachometer icon.

Any suggestions on this code where we might have it wrong and it’s not calling the icon correctly?

[Catalin]

Hello,

Sorry for late reply.

The credentials you provided earlier don’t work anymore…

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[4bservices]

This reply has been set as private.

[kingadrian43]

Any solution on this? I am also trying to remove the hearts but keep the matching function.

[Catalin]

Hello,

@4services: please deactivate easy-facebook-likebox, it adds an “!important rule” to the Css and this why on hover the images look bad.

@kingadrian:

here is an example on how you can change the icon… add this in functions.php from your child theme folder. read comments between “/* … */” from the function to understand what every line does.

COPY CODE

add_action(‘after_setup_theme’,’kleo_my_hearts_actions’);

function kleo_my_hearts_actions()
{
/* Replace the heart over images */
add_filter(‘kleo_img_rounded_icon’, ‘my_custom_icon’);

/* Replace the heart from register modal */
add_filter(‘kleo_register_button_icon’, ‘my_custom_icon_register’);

/* Replace the heart from About us widget */
add_filter(‘kleo_widget_aboutus_icon’, ‘my_custom_icon_about_widget’);
}

/* Replace the heart with a camera icon function */
function my_custom_icon () {
return ‘tachometer’;
}

/* Replace the heart from register modal with a user icon function */
function my_custom_icon_register () {
return ‘tachometer’;
}
/* Replace the heart from about us widget with a user icon function */
function my_custom_icon_about_widget () {
return ‘tachometer’;
}
?>

IN THE QUICK CSS

COPY CODE

.icon-heart:before
{
content: “\f0e4″;
}

Thank you,
Catalin

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[kingadrian43]

Thanks @Catalin,

I actually just added this to my quick css file and it worked:

.circular-item .hearts {background:none;}

[4bservices]

Catlin I’m getting an error on all the pages…

PHP Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘kleo_my_hearts_actions’ not found or invalid function name in /home/srhart/public_html/wp-includes/plugin.php on line 470

[4bservices]

That error that I copied above I have pages and pages and pages of it.

[4bservices]

I removed the following from the functions.php file in the child theme.

COPY CODE

add_action(‘after_setup_theme’,’kleo_my_hearts_actions’);
 
function kleo_my_hearts_actions()
{
/* Replace the heart over images */
add_filter(‘kleo_img_rounded_icon’, ‘my_custom_icon’);
 
/* Replace the heart from register modal */
add_filter(‘kleo_register_button_icon’, ‘my_custom_icon_register’);
 
/* Replace the heart from About us widget */
add_filter(‘kleo_widget_aboutus_icon’, ‘my_custom_icon_about_widget’);
}
 
/* Replace the heart with a camera icon function */
function my_custom_icon () {
return ‘tachometer’;
}
 
/* Replace the heart from register modal with a user icon function */
function my_custom_icon_register () {
return ‘tachometer’;
}
/* Replace the heart from about us widget with a user icon function */
function my_custom_icon_about_widget () {
return ‘tachometer’;
}

However things are still not working. It’s all sorts of a mess. So far it’s been 12 hours I’ve been combing through all the pages and all the errors. Oh and the darn hearts are back too…. of course since I removed the code 🙁

[4bservices]

I am not getting the error anymore… I don’t think. But now getting new errors and it’s just a mess.

[4bservices]

child functions.php

COPY CODE

                                <?php
/**
 * @package WordPress
 * @subpackage Sweetdate
 * @author SeventhQueen <themesupport@seventhqueen.com>
 * @since Sweetdate 1.0
 */

/**
 * Sweetdate Child Theme Functions
 * Add extra code or replace existing functions
*/ 

function kleo_copyright_text()
{
  echo '<p>'. __("Copyright", 'kleo_framework').' © '.date("Y").' '. get_bloginfo('name').'. <br class="hide-for-large show-for-small"/>'. get_bloginfo( 'description' ).'   <a href="http://jeepedin.com/tos/">TOS</a>  - <a href="http://jeepedin.com/privacy/">Privacy</a><br/><font size="1.3">JeepedIn is not in any way associated with Jeep or the Chrysler Corporation. <br/>Jeep, Wrangler, Cherokee and Grand Cherokee are copyrighted and trademarked to the Jeep/Chrysler Corporation.</font></p>';        
}

/* These restrictions will appear to be configured in Sweetdate - Memberships */

add_filter('kleo_pmpro_level_restrictions', 'kleo_my_levels_checkmarks');

function kleo_my_levels_checkmarks($settings) {
 
    $settings = array (
		//NEW RESTRICTION MESSAGES page with name: message
        array(
            'title' => __('Access exclusive forums','kleo_framework'),
            'front' => __('Access exclusive forums','kleo_framework'),
            'name' => 'message'
        ),
		//NEW RESTRICTION SHOP page with name: shop
        array(
            'title' => __('Eligible for special giveaways','kleo_framework'),
            'front' => __('Eligible for special giveaways','kleo_framework'),
            'name' => 'shop'
        ),
//NEW RESTRICTION MESSAGES page with name: credits
        array(
            'title' => __('Credits to Place Classified Ads','kleo_framework'),
            'front' => __('Credits to Place Classified Ads','kleo_framework'),
            'name' => 'credits'
        ),
        array(
            'title' => __('Restrict members directory','kleo_framework'),
            'front' => __('View members directory','kleo_framework'),
            'name' => 'members_dir'
        ),
        array(
            'title' => __('Restrict viewing other profiles','kleo_framework'),
            'front' => __('View members profile','kleo_framework'),
            'name' => 'view_profiles'
        ),
        array(
            'title' => __('Restrict access to groups directory','kleo_framework'),
            'front' => __('Access group directory','kleo_framework'),
            'name' => 'groups_dir'
        ),
        array(
            'title' => __('Restrict access to single group page','kleo_framework'),
            'front' => __('Access to groups','kleo_framework'),
            'name' => 'view_groups'
        ),
        array(
            'title' => __('Restrict users from viewing site activity','kleo_framework'),
            'front' => __('View site activity','kleo_framework'),
            'name' => 'show_activity'
        ),
        array(
            'title' => __('Restrict users from sending private messages','kleo_framework'),
            'front' => __('Send Private messages','kleo_framework'),
            'name' => 'pm'
        ),
        array(
            'title' => __('Restrict users from adding media to their profile using rtMedia or bpAlbum','kleo_framework'),
            'front' => __('Add media to your profile','kleo_framework'),
            'name' => 'add_media'
        )
    );
    return $settings;
}

// restrict profile area - Messages page
//add_action('kleo_pmro_extra_restriction_before_my_profile','kleo_my_custom_restrict1');

function kleo_my_custom_restrict1()
{
	//full current url
	$actual_link = kleo_full_url();
	//our request uri
	$uri = str_replace(untrailingslashit(home_url()),"",$actual_link);

	//restrict messaging page url
	if(preg_match("/^\/".bp_get_members_root_slug()."\/". bp_get_loggedin_user_username()."\/messages\/?/", $uri))
	{
		
		$my_restrictions =  array('message' => array(
				//2 - restrict certain levels. 0 -restrict none; 1 - restrict all
				'type' => 2,
				//levels that you apply the restrictions to
				'levels' => array(2,-1),
				//'not_member' => 1, //restrict users without a membership level
				//'guest' => 1 // restrict not logged in users
			)
		);
		//We use the name "message" from the new restriction added above
		kleo_check_access('message',$my_restrictions);
	}
}

//Restrict Shop page
//add_filter('kleo_pmpro_match_rules', 'kleo_my_custom_restrict2');

function kleo_my_custom_restrict2($restrictions) {
	//regular expression for shop page
	$restrictions["/^\/shop\/?$/"] = array('name' => 'shop');
	return $restrictions;
}
function my_reg_page( $register_url ) {
    return pmpro_url("levels");
  }
 
add_filter( 'register_url','my_reg_page',9999);
 
add_filter( 'bp_get_signup_page','my_reg_page',9999);
?>

                            

I am now getting tons and tons of errors referencing this page. Do you see anything that isn’t right? I don’t see anything that stands out. Things saying that the header is already called elsewhere and just tons of errors. Also when people click the login button and enter their information it then loads jeepedin.com/wp-admin as a blank white page. I thought it went to the profile?

[Abe]

@4bservices Catalin gave you clear instructions. You need basic editing and basic PHP knowledge to accomplish this kind of customizations. Please try to contact a developer and help you with this kind of changes.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[4bservices]

@Abe it was all fine then it started giving out random errors. I have basic editing and PHP knowledge.

[4bservices]

As soon as I add the following to the child functions.php before the closing ?> The entire site messes up.

What is wrong with this code??? I’m trying to make it so the tracometer/dashboard icon shows up instead of the hearts.

code>add_action(‘after_setup_theme’,’kleo_my_hearts_actions’);
function kleo_my_hearts_actions()
{
/* Replace the heart over images */
add_filter(‘kleo_img_rounded_icon’, ‘my_custom_icon’);
/* Replace the heart from register modal */
add_filter(‘kleo_register_button_icon’, ‘my_custom_icon_register’);
/* Replace the heart from About us widget */
add_filter(‘kleo_widget_aboutus_icon’, ‘my_custom_icon_about_widget’);
}
/* Replace the heart with a camera icon function */
function my_custom_icon () {
return ‘tachometer’;
}
/* Replace the heart from register modal with a user icon function */
function my_custom_icon_register () {
return ‘tachometer’;
}
/* Replace the heart from about us widget with a user icon function */
function my_custom_icon_about_widget () {
return ‘tachometer’;
}

[4bservices]

@Catalin Hello. So I know that the code works as when I add the code the hearts go away and where I want it replaced it is showing a dashboard instead. The issue is however that when I add the above code to the child functions then the wp-admin area no longer works due to errors. What is wrong with our functions.php code? Why when we try to remove/replace the hearts does it break the site?

COPY CODE

function kleo_copyright_text()
{
  echo '<p>'. __("Copyright", 'kleo_framework').' © '.date("Y").' '. get_bloginfo('name').'. <br class="hide-for-large show-for-small"/>'. get_bloginfo( 'description' ).'   <a href="http://jeepedin.com/tos/">TOS</a>  - <a href="http://jeepedin.com/privacy/">Privacy</a><br/><font size="1.3">JeepedIn is not in any way associated with Jeep or the Chrysler Corporation. <br/>Jeep, Wrangler, Cherokee and Grand Cherokee are copyrighted and trademarked to the Jeep/Chrysler Corporation.</font></p>';        
}

/* These restrictions will appear to be configured in Sweetdate - Memberships */

add_filter('kleo_pmpro_level_restrictions', 'kleo_my_levels_checkmarks');

function kleo_my_levels_checkmarks($settings) {
 
    $settings = array (
		//NEW RESTRICTION MESSAGES page with name: message
        array(
            'title' => __('Access exclusive forums','kleo_framework'),
            'front' => __('Access exclusive forums','kleo_framework'),
            'name' => 'message'
        ),
		//NEW RESTRICTION SHOP page with name: shop
        array(
            'title' => __('Eligible for special giveaways','kleo_framework'),
            'front' => __('Eligible for special giveaways','kleo_framework'),
            'name' => 'shop'
        ),
//NEW RESTRICTION MESSAGES page with name: credits
        array(
            'title' => __('Credits to Place Classified Ads','kleo_framework'),
            'front' => __('Credits to Place Classified Ads','kleo_framework'),
            'name' => 'credits'
        ),
        array(
            'title' => __('Restrict members directory','kleo_framework'),
            'front' => __('View members directory','kleo_framework'),
            'name' => 'members_dir'
        ),
        array(
            'title' => __('Restrict viewing other profiles','kleo_framework'),
            'front' => __('View members profile','kleo_framework'),
            'name' => 'view_profiles'
        ),
        array(
            'title' => __('Restrict access to groups directory','kleo_framework'),
            'front' => __('Access group directory','kleo_framework'),
            'name' => 'groups_dir'
        ),
        array(
            'title' => __('Restrict access to single group page','kleo_framework'),
            'front' => __('Access to groups','kleo_framework'),
            'name' => 'view_groups'
        ),
        array(
            'title' => __('Restrict users from viewing site activity','kleo_framework'),
            'front' => __('View site activity','kleo_framework'),
            'name' => 'show_activity'
        ),
        array(
            'title' => __('Restrict users from sending private messages','kleo_framework'),
            'front' => __('Send Private messages','kleo_framework'),
            'name' => 'pm'
        ),
        array(
            'title' => __('Restrict users from adding media to their profile using rtMedia or bpAlbum','kleo_framework'),
            'front' => __('Add media to your profile','kleo_framework'),
            'name' => 'add_media'
        )
    );
    return $settings;
}

// restrict profile area - Messages page
//add_action('kleo_pmro_extra_restriction_before_my_profile','kleo_my_custom_restrict1');

function kleo_my_custom_restrict1()
{
	//full current url
	$actual_link = kleo_full_url();
	//our request uri
	$uri = str_replace(untrailingslashit(home_url()),"",$actual_link);

	//restrict messaging page url
	if(preg_match("/^\/".bp_get_members_root_slug()."\/". bp_get_loggedin_user_username()."\/messages\/?/", $uri))
	{
		
		$my_restrictions =  array('message' => array(
				//2 - restrict certain levels. 0 -restrict none; 1 - restrict all
				'type' => 2,
				//levels that you apply the restrictions to
				'levels' => array(2,-1),
				//'not_member' => 1, //restrict users without a membership level
				//'guest' => 1 // restrict not logged in users
			)
		);
		//We use the name "message" from the new restriction added above
		kleo_check_access('message',$my_restrictions);
	}
}

//Restrict Shop page
//add_filter('kleo_pmpro_match_rules', 'kleo_my_custom_restrict2');

function kleo_my_custom_restrict2($restrictions) {
	//regular expression for shop page
	$restrictions["/^\/shop\/?$/"] = array('name' => 'shop');
	return $restrictions;
}
function my_reg_page( $register_url ) {
    return pmpro_url("levels");
  }
 
add_filter( 'register_url','my_reg_page',9999);
 
add_filter( 'bp_get_signup_page','my_reg_page',9999);

add_action('after_setup_theme','kleo_my_hearts_actions');
 
function kleo_my_hearts_actions()
{
   /* disable matching on member profile */
    remove_action('kleo_bp_before_profile_name', 'kleo_bp_compatibility_match');      
 
    /* Replace the heart over images */
    add_filter('kleo_img_rounded_icon', 'my_custom_icon');
 
    /* Replace the heart from register modal */
    add_filter('kleo_register_button_icon', 'my_custom_icon_register');
 
    /* Replace the heart from About us widget */
    add_filter('kleo_widget_aboutus_icon', 'my_custom_icon_about_widget');
}
 
/* Replace the heart with a camera icon function */
function my_custom_icon () {
    return 'dashboard';
}
 
/* Replace the heart from register modal with a user icon function */
function my_custom_icon_register () {
    return 'dashboard';
}
/* Replace the heart from about us widget with a user icon function */
function my_custom_icon_about_widget () {
    return 'dashboard';
}

[Abe]

@4bservices you should set WP_DEBUG to TRUE in wp-config.php to see if any errors occur. Please talk to a developer to help you with this kind of customizations that imply adding code since you require basic PHP knowledge

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts