Simon

Hi Naveen,

Thats perfect thanks! The screenshot looks awesome. I’ll do the css now and put it up. Won’t break anything, its spot on. Great job!

Awesome, thanks Naveen. I’ll just adjust nth numbers once it updates so it keeps looking the same.

ok here is the final css I used. I am sure there is a more elegant way to achieve it, but it works. the “finalview” image is what it produces.

*side note. Learnt that :nth-child includes all the elements so it was counting the BR even though was set to span:nth-child. Strange. which is why ther are numbered 1,3,5,7,9

/* === Begin add listing package CSS === */
#package_id_row label:first-child {float:none;text-align:center; width:100%;font-weight:600;font-size:20px;display:block;}

/* control div around radio group */
#package_id_row div {float:none !important;width:96% !important;padding:15px 2%;margin:10px auto;border:1px solid #cccccc;position:relative;}
#package_id_row div br {display:none;}

#package_id_row div span.gd-radios {vertical-align:top;width:30%;margin:10px 1%;padding:10px 1%;text-align:center;display:inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position:center top;
background-size:40px;}
#package_id_row input.gd-checkbox {width:20px;height:20px;padding:40px;float:none;display:block;margin:0 auto;}
/* child elements for packages */
#package_id_row div span.gd-radios:first-child {
color:#64a410;
border:2px solid #64a410;
background-image: url(“/wp-content/uploads/2020/04/add-listing-green2.png”) ;
}
#package_id_row div span:nth-child(3),#package_id_row div span:nth-child(5) {
color:#2495cd;
border:2px solid #2495cd;
background-image: url(“/wp-content/uploads/2020/04/add-listing-blue.png”) ;
}
#package_id_row div span:nth-child(7),#package_id_row div span:nth-child(9)
{
color:#a81683;
border:2px solid #a81683;
background-image: url(“/wp-content/uploads/2020/04/add-listing-purple.png”) ;
}

Hi Naveen, you’re a bloody legend mate. That did the trick and we can do a LOT from there. Thanks!

Awesome! Thanks Naveen. I’ll try that now. Sorry about the delay, has been a mad time here for a while. But looking forward to trying it now. thanks again for your help. Appreciated!

Hi, thank you for quick replies.
Sorry, that sounded clear in my head at 3am. But after reading….no not at all.

A basic reproduction of what we are doing is this.
<style>
.int-div-prac {
padding:10px 5px;
background-image: url(“THE-LISTING-MAIN-IMAGE-HERE”);
background-repeat: none;
background-size: cover;
}
</style>

<div class=”int-div-prac”>
[gd_post_title tag=’h2′]
[gd_categories post_type=”gd_place” title_tag=”h4″ hide_empty=”1″ hide_count=”1″ sort_by=”az” max_level=”0″ max_count=”1″ max_count_child=”0″]
[gd_post_meta key=’phone’ location=’listing’]
[gd_post_address show=”icon-label-value” address_template=”%%street%%, %%city%%”]
</div>

So the Archive Item Template will show the g_post_title etc within a div that we are using the main (or featured) as a background. I have left all styling of item (and most items) positions etc etc off to focus on the bit I need.

Thanks

Last quick one, is there a way to call a different layout (template) for different gd_listing type. For instance, I would like a different layout for events. Where all we want to show is image, name, date, location. I can change the template in child theme & duplicate it. But cannot see a way to differentiate which one is used.

I have searched through forums and fairly sure the answer is you can’t. But thought I would ask in case I am missing something. Currently my thoughts are to add everything I need for each layout into the one file then just manipulate/hide with css.

Thanks