Marketing Flags – Colour
-
Hey, how can i colour marketing flags based on status
Let – Red
To Let – Green
For Sale – Green
Sold – Red
The page I need help with: [log in to see the link]
-
@ecomprosk You’ll see here (https://docs.wp-property-hive.com/add-ons/template-assistant/flags/) a bit about the classes applied to the flags.
As such you can add some custom CSS like so to colour these accordingly:
.flag-let { background: red !important } .flag-to-let { background: green !important } ... etc
Thanks,
SteveHey Steve Apologies but this doesnt seem to work for me.
Can you give me step by steps sorry to be a pain.
Best regards
How are you adding the flags out of interest? Are you using a bespoke snippet somewhere or using our free Template Assistant add on? If the latter, which version?
The only reason I ask is that from looking at the site, the flags don’t have the unique class on that I mentioned previously so at present you won’t be able to colour them separately.
Thanks,
SteveBespoke snippet,
.properties li.property .thumbnail a { display:block; height:100%; position:relative; } .properties li.property .thumbnail .flag { position:absolute; top:0; left:0; padding: 5px; background:#000; color:#FFF; } .columns-2 ul.properties li.property .thumbnail img, .columns-3 ul.properties li.property .thumbnail img, .columns-4 ul.properties li.property .thumbnail img, .columns-5 ul.properties li.property .thumbnail img, .columns-6 ul.properties li.property .thumbnail img { width: 500px; height: 200px; }
@ecomprosk Do you have the bespoke snippet of PHP? That code provided is CSS and isn’t relevant.
Thanks,
SteveSorry mate, please see below
add_action( ‘propertyhive_before_search_results_loop_item_title’, ‘add_flag’, 5 );
function add_flag()
{
global $property;$flag = $property->availability;
if ( $property->marketing_flag != ” )
{
$flag = $property->marketing_flag;
}if ( $flag != ” )
{
echo ‘<div class=”flag”>’ . $flag . ‘</div>’;
}
}Thanks. Change this line:
echo ‘<div class=”flag”>’ . $flag . ‘</div>’;
to:
echo ‘<div class=”flag flag-‘ . sanitize_title($flag) . ‘”>’ . $flag . ‘</div>’;
Once that’s done the original CSS I provided will work accordingly.
Steve
So sorry Steve, i don’t know what i’ve done but seem to have broken the site
<?php /** * Honeycomb functions.php * * @package honeycomb */ /** * Assign the Honeycomb version to a var */ $theme = wp_get_theme( 'honeycomb' ); $honeycomb_version = $theme['Version']; /** * Set the content width based on the theme's design and stylesheet. */ if ( ! isset( $content_width ) ) { $content_width = 980; /* pixels */ } $honeycomb = (object) array( 'version' => $honeycomb_version, /** * Initialize all the things. */ 'main' => require 'inc/class-honeycomb.php', 'customizer' => require 'inc/customizer/class-honeycomb-customizer.php', ); require 'inc/honeycomb-functions.php'; require 'inc/honeycomb-template-hooks.php'; require 'inc/honeycomb-template-functions.php'; if ( class_exists( 'Jetpack' ) ) { $honeycomb->jetpack = require 'inc/jetpack/class-honeycomb-jetpack.php'; } if ( honeycomb_is_propertyhive_activated() ) { $honeycomb->propertyhive = require 'inc/propertyhive/class-honeycomb-propertyhive.php'; require 'inc/propertyhive/honeycomb-propertyhive-template-hooks.php'; require 'inc/propertyhive/honeycomb-propertyhive-template-functions.php'; } if ( is_admin() ) { $honeycomb->admin = require 'inc/admin/class-honeycomb-admin.php'; } if( is_admin() && file_exists( dirname( __FILE__ ) . '/inc/honeycomb-update.php' ) ) { include_once( dirname( __FILE__ ) . '/inc/honeycomb-update.php' ); } add_action( ‘propertyhive_before_search_results_loop_item_title’, ‘add_flag’, 5 ); function add_flag() { global $property; $flag = $property->availability; if ( $property->marketing_flag != ” ) { $flag = $property->marketing_flag; } if ( $flag != ” ) { ‘<div class=”flag flag-‘ . sanitize_title($flag) . ‘”>’ . $flag . ‘</div>’; } } // Setup two separate URLs add_action( 'init', 'ph_add_rewrite_rules' ); function ph_add_rewrite_rules() { global $wp_rewrite; // Setup Sales URL '/sales/' add_rewrite_rule( "sales/?$", "index.php?post_type=property&department=residential-sales", 'top' ); add_rewrite_rule( "sales/{$wp_rewrite->pagination_base}/([0-9]{1,})/?$", "index.php?post_type=property&department=residential-sales" . '&paged=$matches[1]', 'top' ); // Setup Lettings URL '/lettings/' add_rewrite_rule( "lettings/?$", "index.php?post_type=property&department=residential-lettings", 'top' ); add_rewrite_rule( "lettings/{$wp_rewrite->pagination_base}/([0-9]{1,})/?$", "index.php?post_type=property&department=residential-lettings" . '&paged=$matches[1]', 'top' ); // Setup Commercial URL '/commercial/' add_rewrite_rule( "commercial/?$", "index.php?post_type=property&department=commercial", 'top' ); add_rewrite_rule( "commercial/{$wp_rewrite->pagination_base}/([0-9]{1,})/?$", "index.php?post_type=property&department=commercial" . '&paged=$matches[1]', 'top' ); } // Add support for Property Hive custom query_vars add_filter( 'query_vars', 'add_query_vars' ); function add_query_vars( $query_vars ) { $query_vars[] = 'department'; $query_vars[] = 'address_keyword'; $query_vars[] = 'marketing_flag'; $query_vars[] = 'minimum_price'; $query_vars[] = 'maximum_price'; $query_vars[] = 'minimum_rent'; $query_vars[] = 'maximum_rent'; $query_vars[] = 'minimum_bedrooms'; $query_vars[] = 'minimum_floor_area'; $query_vars[] = 'maximum_floor_area'; $query_vars[] = 'property_type'; $query_vars[] = 'commercial_property_type'; $query_vars[] = 'office'; $query_vars[] = 'view'; $query_vars[] = 'radius'; $query_vars[] = 'pgp'; // append here any other query string parameters you might be using return $query_vars; } // Convert all query_vars found to $_GET and $_REQUEST parameters as this is what the search form and main property query are based off add_action( 'parse_request', 'setup_get' ); function setup_get($wp_query) { foreach ($wp_query->query_vars as $name => $value) { if (!empty($value) && $name != 'name') { $_GET[$name] = $value; $_REQUEST[$name] = $value; } } } /** * Note: Do not add any custom code here. Please use a custom plugin or child theme so that your customizations aren't lost during updates. */
I think it’s the apostrophes. The WP forums converts them. Make sure the code you copied from my latest reply uses normal quotes and double quotes.
That should sort it.
Thanks,
SteveHey Steve,
sorry man it’s really not working for me, neither is the marketing flag options on the plugin under custom fields.
Is there any chance you can just send me the exact code via email if needed or something?
Sending the snippet via a gist below to avoid any issues with quotes etc:
https://gist.github.com/propertyhive/e5899fbc2a75bfe3b5dde00146a2ae79
That works perfectly well, what would be the CSS required to achieve the initial goal, the one provided doesnt work.
Thank you for all your help.
“what would be the CSS required to achieve the initial goal”
The CSS provided initially is still valid and will work. Where have you added it as I can’t see it anywhere on the site?Steve
https://snipboard.io/wquMIL.jpg
Added now
That link doesn’t show me anything, just a white cross.
- The topic ‘Marketing Flags – Colour’ is closed to new replies.