How to add custom class on add-listing page fields

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
November 24, 2016 at 8:23 pm #310289

milettic
Expired Member

Post count: 240

I wish to customise custom Fields on the “add-listing” page, how can I add custom CSS? They all have there ID, but I wish group with custom CSS (not all like now). I need this for a better checkbox+javascript functionality.
Thanks

November 24, 2016 at 8:53 pm #310304

Paolo
Site Admin

Post count: 31206

HI,

I’m not sure if there are new hooks for custom fields in the add listings page, so I asked to the developers to let us know.

Thanks

November 24, 2016 at 9:21 pm #310309

milettic
Expired Member

Post count: 240

I meant css class, i need to add custom css class to all checkboxes, only checkboxes. Now the custom class appear only on detail page, and not on “and-listing” page

November 25, 2016 at 11:26 am #310744

Stiofan O’Connor
Site Admin

Post count: 22956

There is no hook to add a class specifically to a field on the add listing page, you can replace the whole output function or strip replace with a filter. Is there no way to target what you need without it (i would imagine there is). If you can supply links and the script you intend to use i can have a quick look.

Thanks,

Stiofan

November 25, 2016 at 2:09 pm #310872
milettic
Expired Member

Post count: 240
I use this code with some CSS to make parent divs of checkboxes clickable, problem is because class “geodir_form_row” is used in entire page divs.
```
<script>
jQuery(document).ready(function(){

jQuery( ".geodir_form_row" ).click(function() {
jQuery(this).find('input[type=checkbox]').click();

if(jQuery(this).find('input[type=checkbox]').attr('checked')) {
jQuery(this).closest("div").addClass( "checked-class" );

} else {
jQuery(this).closest("div").removeClass( "checked-class" );
}
});

});
</script>
```
November 26, 2016 at 11:50 am #311635
Stiofan O’Connor
Site Admin

Post count: 22956
can you not do something like (not tested)
```
jQuery( "input[type=checkbox]", document.body ).each(function() {
  jQuery( this ).parent().click(function() {
//do code here
  });
});
```
Stiofan
November 28, 2016 at 12:45 pm #312905

milettic
Expired Member

Post count: 240

It works,
thank you

November 28, 2016 at 8:51 pm #313572

milettic
Expired Member

Post count: 240

Update:
Now checkbox itself won’t check. When i click on div everything works well, but click on checkbox not.
i am unable to resolve, please help
Thank you

November 29, 2016 at 12:21 pm #314287

Stiofan O’Connor
Site Admin

Post count: 22956

if you can provide wp-admin i will take a quick look.

Stiofan

November 29, 2016 at 5:57 pm #314572

milettic
Expired Member

Post count: 240

This reply has been marked as private.

November 29, 2016 at 6:33 pm #314580

Stiofan O’Connor
Site Admin

Post count: 22956

This reply has been marked as private.

November 29, 2016 at 6:40 pm #314585

milettic
Expired Member

Post count: 240

This reply has been marked as private.

November 30, 2016 at 11:08 am #315446

Stiofan O’Connor
Site Admin

Post count: 22956

Why not just hide the checkbox? Or even replace it with a fontawesome checkbox (can all be done with CSS only)

Stiofan

November 30, 2016 at 11:14 am #315450

milettic
Expired Member

Post count: 240

I can do it with custom fields checkbox but i have problem with Accept terms checkbox also, how to solve that?
Thank you

December 2, 2016 at 12:11 pm #317347
Stiofan O’Connor
Site Admin

Post count: 22956
OK this is not somewhere that you can have custom work done, this is somewhere you receive support for our products, what you are asking for is not something support should help with but as a one off i have fixed your code.

Thanks,

Stiofan

(below is for reference incase u delete it from your site by accident)
```
<script>
	GDcheckChecking = 0;
	jQuery(document).ready(function () {

		// this takes care of the click states
		jQuery(".geodir_form_row > input[type=checkbox]", document.body).each(function () {
			jQuery(this).parent().click(function (e) {
				// make sure things don't run twice
				if(GDcheckChecking){return;}
				GDcheckChecking = 1;

				if (e.target.localName == "input") {// we are clicking the checkbox
					// correct checkbox value is already set
				}else{// we are clicking the container
					jQuery(this).find('input[type=checkbox]').click();
				}

				// once the check state is set we can set the correct classes
				if (jQuery(this).find('input[type=checkbox]').is(":checked")) {
					jQuery(this).closest("div").addClass("checked-class");
				} else {
					jQuery(this).closest("div").removeClass("checked-class");
				}
				GDcheckChecking = 0;
			});

			// this takes care of the onload states
			// once the check state is set we can set the correct classes
			if (jQuery(this).is(":checked")) {
				jQuery(this).closest("div").addClass("checked-class");
			} else {
				jQuery(this).closest("div").removeClass("checked-class");
			}

		});

	});
</script>
```
Author

Posts