New home › Forums › Pro Add-on › General queries › Carousel Background Dependent upon Category
- This topic has 9 replies, 4 voices, and was last updated 5 years, 3 months ago by Ferhat.
-
AuthorPosts
-
February 9, 2018 at 9:21 pm #34584panattoniMember
I have two different categories and am using specific coloured markers for them. If I use the carousel option, is there a way to have the backgrounds match those colours? Right now it is set so odd marker backgrounds are one colour and even are another. Is there a way to make it specific to category instead?
February 12, 2018 at 9:12 am #34600DylanModeratorHi there,
Thank you so much for getting in touch.
Unfortunately this is not supported by default, however it could be achieved by making some changes to the core code of the plugin.
Are you open to applying code changes from your side? I would be happy to guide you through the process.
I look forward to hearing back from you.
February 12, 2018 at 4:11 pm #34632PerryModeratorHi Ryan
Perry here, I’m one of the Lead Developers on this project, pleased to meet you!
Can you please link me to your map page and I’ll outline the code for you, I can provide you with the specific code as well if needs be.
Please let me know?
Kind regards
– PerryFebruary 13, 2018 at 10:12 am #34651PerryModeratorHi Ryan
Can you please uncheck “Hide the Category column” in Maps -> Settings -> Marker listing,
We will need the category data to establish which category the carousel items are in,
I can add CSS to hide these but I will need the elements to be there in order to carry this out.
Please let me know when that’s done?
Kind regards
– PerryFebruary 14, 2018 at 9:54 am #34674PerryModeratorHi Ryan
Please install a 3rd party custom JS plugin, such as “Simple Custom CSS & JS” and add the following custom JS:
(function($) { $(document).ready(function() { // Loop through the marker data for each map for(var map_id in wpgmaps_localize_marker_data) { // Get the marker listing var carousel = $("#wpgmza_marker_list_" + map_id); // Loop through each marker data element on this map for(var marker_id in wpgmaps_localize_marker_data[map_id]) { // Get the marker categories var categories = wpgmaps_localize_marker_data[map_id][marker_id].category; // Store the marker categories in the data-categories attribute carousel.find("[mid='" + marker_id + "']").attr("data-categories", categories); } } }); })(jQuery);
You can then apply CSS to your carousel items based on the
data-categories
attribute, for instance[data-categories="1"] { background: green !important; } [data-categories="2"] { background: yellow !important; color: black !important; }
If you need any of that explained, or you need specific CSS code please let me know?
Kind regards
– Perry- This reply was modified 5 years, 7 months ago by Perry.
February 15, 2018 at 4:48 pm #34736PerryModeratorHi Ryan
No that should do it, this worked in my development environment with the exact same code.
Can you please give me temporary access to your dashboard so I can tweak this without further inconveniencing you?
Kind regards
– PerryFebruary 15, 2018 at 5:27 pm #34744PerryModeratorHi Ryan
You’d enclosed the Javascripts in tildes (`) and added CSS to the bottom which would break it,
I’ve removed the tildes and put the CSS in a CSS block using Simple Custom CSS & JS.
I checked the map page and can confirm that is now working.
Is there anything else I can help you with?
Kind regards
– PerryFebruary 16, 2018 at 9:30 am #34762PerryModeratorHi Ryan
What exactly did you want to change? There should be an option to change the link text, and you can use CSS to change the links appearance.
If you want to alter the existing CSS then yes, that’s where you would go to.
Kind regards
– Perry -
AuthorPosts
- You must be logged in to reply to this topic.