Code Snippets for MyListing

Exactly what it says. Removes the quick action tiles from the front end because there is currently no way to remove it.

/*HIDE QUICK ACTION TILES*/
.quick-listing-actions{
display:none!important;
}
Submitted by: Donald McGuinn

This code changes the color of the placeholder text, focus text color and the input text color of the SHORTCODE search element.

/*PLACEHOLDER COLOR*/
.search-shortcode input::-webkit-input-placeholder { /* Edge */
color: red;
}
.search-shortcode input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
.search-shortcode input::placeholder {
color: red;
}
/*FOCUS COLOR*/
.search-shortcode.is-focused input{
color: red !important;
}
/*INPUT COLOR*/
.search-shortcode input{
color: red !important;
}
Submitted by: Donald McGuinn

Instead of the table of contents being on the left side when adding a listing, it is now at the top.

/*ADD LISTING TABLE OF CONTENTS DESIGN
.add-listing-step {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
}

.add-listing-step .i-section {
order: 2;
}
.add-listing-step .add-listing-nav {
order: 1;
}

.add-listing-nav {
height: fit-content;
width: 100% !important;
background: #fff;
position: sticky !important;
}

.add-listing-nav>ul {
width: unset;
margin: 0px auto !important;
}

.add-listing-nav li {
width: fit-content;
float: left;
}

.add-listing-nav a {
width: fit-content;
}

.cat-card:hover .ac-front-side, .face.ac-front-side{
	transform: none;
}
Submitted by: Donald McGuinn

Using this brings attention to a menu item you want your customers to click on. Add this to your custom css.

Be sure to change the menu item number to match what your menu item number is. Adjust the “top” and the “left” tags as needed on your site.

/*RED PULSING DOT*/
.menu-item-262:before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: -10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0932;
    box-shadow: 0 0 0 0 rgba(255,255,255,.2);
    animation: pulse 2s infinite;
    z-index: 999;
}

@media (max-width: 767px){
	.menu-item-262:before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff0932;
    box-shadow: 0 0 0 0 rgba(255,255,255,.2);
    animation: pulse 2s infinite;
    z-index: 999;
}
}

@keyframes pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
     }
}
Submitted by: Donald McGuinn

This shortcode can show the number of listings on your entire website. This does NOT separate by listing type.

Use the shortcode [total_listings] in an Elementor shortcode element.

Put this code in your child theme functions.php file.

// Display the total number of published listings using the shortcode [total_listings]
function number_of_listings($atts) {
 return wp_count_posts('job_listing')->publish;
}
add_shortcode('total_listings', 'number_of_listings');
Submitted by: Donald McGuinn

This adds borders, shadows and more depth to the quick action tiles.

/*THIS CODE IS THANKS TO Miloš Šaltić*/
/*QUICK ACTION TILE STYLING*/
.quick-listing-actions {
    margin-top: 20px !important;
}

.quick-listing-actions>ul {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.quick-listing-actions>ul>li {
    margin-left: 8px;
    margin-right: 8px;
}

.quick-listing-actions>ul>li>a>i {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    color: #9aa8bd;
}

@media (max-width: 600px) {
  .quick-listing-actions>ul>li>a>i {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
}

.quick-listing-actions>ul>li>a span {
    font-size: 14px;
    font-weight: 500;
    color: #9aa8bd;
    height: 60px;
    transition: .3s ease !important;
}

@media (max-width: 600px) {
  .quick-listing-actions>ul>li>a span {
    font-size: 12px;
  }
}

.quick-listing-actions>ul>li>a {
    padding: 10px 5px !important;
    width: 140px;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 5px !important;
    transition: .3s ease !important;
    box-shadow: 0px 2px 5px 0px rgba(47,61,74,0.2);
}

@media (max-width: 640px) {
  .quick-listing-actions>ul>li>a {
    width: 120px !important;
  }
}

.quick-listing-actions>ul>li>a:hover {
    box-shadow: 0px 8px 16px 0px rgba(47,61,74,0.2);
    margin-top: -5px;
}

.quick-listing-actions>ul>li>a:hover span {
    color: #f2cd41 !important; /* Put your website's Accent Color Here */
}
Submitted by: Donald McGuinn

This removes your past events from the front end of the website. Put this code in your child theme functions.php file.

//AUTO EXPIRE EVENTS
//============================
add_action( 'mylisting/schedule:hourly', function() {
    global $wpdb;
    // Change status to expired.
    $listing_ids = $wpdb->get_col(
        $wpdb->prepare( "
            SELECT postmeta.post_id FROM {$wpdb->postmeta} as postmeta
            LEFT JOIN {$wpdb->posts} as posts ON postmeta.post_id = posts.ID
            WHERE postmeta.meta_key = '_job_date'
            AND postmeta.meta_value > 0
            AND postmeta.meta_value < %s
            AND posts.post_status = 'publish'
            AND posts.post_type = 'job_listing'",
            date( 'Y-m-d', current_time( 'timestamp' ) )
        )
    );
    if ( $listing_ids ) {
        foreach ( $listing_ids as $listing_id ) {
            $data                = [];
            $data['ID']          = $listing_id;
            $data['post_status'] = 'expired';
            wp_update_post( $data );
        }
    }
} );
Submitted by: Donald McGuinn

This code allows you to display the message icon found in the default MyListing header, anywhere on the site.

Add this to an HTML elementor element.

<div class="messaging-center inbox-header-icon" style="margin-left: 0px;">
  <a href="#" id="messages-modal-toggle" class="icon-btn" data-toggle="modal" data-target="#ml-messages-modal">
    <i class="material-icons" style="color: black;">inbox</i>
      <div class="chat-counter-container" id="ml-chat-activities"></div>
	</a>
</div>
Submitted by: Donald McGuinn

This code will round the corners of all listing preview cards on the site.

/*ROUNDED CORNERS FOR LISTING PREVIEW CARD*/
.lf-item{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.listing-preview .c27-footer-section:last-child{
	border-bottom-right-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}
Submitted by: Donald McGuinn

Use this code to remove the flipping of the listing types on the add listing page.

/*REMOVE HOVER EFFECT FROM ADD LISTING CARD*/
.cat-card:hover .ac-front-side, .face.ac-front-side{
transform: none;
}
.ac-back-side{
display: none !important;
}
Submitted by: Donald McGuinn

Place this code in an HTML Elementor widget in order to show the messages toggle popup anywhere on your site.

<div class="messaging-center inbox-header-icon" style="margin-left: 0px;">
  <a href="#" id="messages-modal-toggle" class="icon-btn" data-toggle="modal" data-target="#ml-messages-modal">
    <i class="material-icons" style="color: black;">inbox</i>
      <div class="chat-counter-container" id="ml-chat-activities"></div>
	</a>
</div>
Submitted by: Donald McGuinn