Editing look of [adverts_add] form

  • Resolved sarahagordon

    (@sarahagordon)


    7 years, 9 months ago

    I would like to make four small edits to the appearance of the form that appears on my page when I use the shortcode [adverts_add], but am not an experienced coder and am not sure how to do this. Can you please point me in the right direction. Here are my goals:

    1. Change the “Contact Information” header at the top to say “Submit an ad”
    2. Omit the ‘Account’ section and check box. I don’t want users to be prompted to create an account.
    3. Change the “Description” text field into a simple text box instead of an HTML editor box
    4. I would like each field label to appear on one line, and the empty fillable field to appear on the next line, taking up 100% of the column width.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Greg Winiarski

    (@gwin)

    Hi, you can do #1, #2 and #3 by adding the code below to your theme functions.php file.

    
add_filter( "adverts_form_load", "customize_adverts_add_sarahagordon" );
function customize_adverts_add_sarahagordon( $form ) {
  if( $form['name'] != "advert" ) {
    return $form;
  }
  foreach( $form["field"] as $key => $field ) {
    if( $field["name"] == "_contact_information" ) {
        $form["field"][$key]["label"] = "Submit an ad";
    }
    if( $field["name"] == "_adverts_account" ) {
        unset($form["field"][$key]);
    }
    if( $field["name"] == "post_content" ) {
        $form["field"][$key]["mode"] = "plain-text";
    }
  }
  return $form;
}

    #4. you should be able to do that by adding the code below in wp-admin / Appeareance / Customize / Additional CSS panel

    
    .adverts-form input[type="text"],
    .adverts-form textarea,
    .adverts-form-aligned #adverts-plupload-upload-ui,
    .adverts-form.adverts-form-aligned .adverts-control-group > div.adverts-multiselect-holder,
    .adverts-form.adverts-form-aligned .adverts-control-group > div.adverts-autocomplete-holder,
    .adverts-form.adverts-form-aligned .adverts-control-group > div {
        width: 100%;
    }
    Thread Starter sarahagordon

    (@sarahagordon)

    Thank you for your help! Solutions 1-3 worked perfectly. I’m still having a little trouble with #4 though if you have any additional advice. I plugged this code into our Additional CSS panel, but the field labels are still breaking into two lines and in some instances the fillable field is appearing on the same line as the label (Category, Gallery, Description). I would like to make it so the field labels stay on one line, and a line break appears between the label and fillable field. You can see the form here: careyinstitute.org/sourceny

    Thank you so much for your help!

    Plugin Author Greg Winiarski

    (@gwin)

    If you add one additional line in Additional CSS panel it should fix this problem

    
body .adverts-form-aligned .adverts-control-group > label {
    width: 100%;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Editing look of [adverts_add] form’ is closed to new replies.