• I have tried multiple classifieds plugins and found yours to suite my needs the best. However after spending hours attempting to modify the CSS through SEVERAL methods I have decided to give up.
    There are major css issues with this plug in out of the box, my images are cropped horribly (I upload a whole chair photo from 6 feet away and only can see the cushion? it looks horrible) there are a few random lines across the screen that need to be removed, colors need to be modified etc. I am unable to even do the most remedial changes with your code.

    Second, I am using a bootstrap theme and would rather update the text fields, buttons, glyphicons, etc to be the ones provided in bootstraps documentation which most people with eyes would agree are aesthetically superior. I was able to change the “search” button to a bootstrap button, however, updating the text fields has taken me to the depths of hell.

    After a solid day of trying everything under the sun I unfortunately have to give up.
    I am baffled by your excessive CSS, you have by far more files in this plug-in than are necessary. It feels as though you have broken each plug-in screen down into multiple files which has been a massive pain for me to attempt to figure out.

    Let me know when you update this plug-in so people can finally have a say in the css…

    https://ww.wp.xz.cn/plugins/wpadverts/

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

    (@gwin)

    Hi,
    1. the image sizes won’t work for everyone out of box, if you do not like how they look by default you can change their sizes or how the images are cropped with basic WP API
    http://wpadverts.com/documentation/custom-image-sizes/

    2. if you are using bootstrap theme then you can unload all default WPAdverts scripts (wp_deregister_script() and wp_deregister_style()) and replace templates with bootstrap compatible templates http://wpadverts.com/documentation/child-themes-and-templates/

    I am not planning to make the plugin compatible with bootstrap any time soon as i am not familiar with it, but like i wrote replacing the templates with your own is possible and you can do it on your own like explained in article i linked to.

    3. the plugin has ~35 core PHP files, 24 PHP files in the modules and 24 assets files, sorry but i do not agree this is excessive amount, more over i do this to load files and function only when needed.

    4. i am no expert in CSS i am afraid, so feel free to suggest changes to the plugin i will be happy to implement them.

    Thread Starter JerrySeinfeld

    (@jerryseinfeld)

    I have read your documentation and honestly I get very little from it.

    All I need to do is replace all of your text field classes with…. class=”form-control” placeholder=”text field name (required)”….

    I shouldn’t have to override anything to do this. Replacing text fields is typically quite simple. What file houses all of the fields for the “Add” page? I simply need to update the classes and remove the unappealing field names off to the left “contact person, email, phone number” etc. Placeholder text can take their place and makes for a cleaner looking site.

    The documentation mentions overriding it with your current theme, however this only over rides the css and will not change your code over to bootstrap elements. Bootstraps documentation could not be any easier to understand, take a look at this link and you’ll see why I went with bootstrap. I am sure I will not be the last person to inquire about changing these fields and elements to achieve a more modern look.
    http://getbootstrap.com/css/#forms

    Changing your buttons out for bootstraps was as easy as changing the class to “btn btn-default”…I can make the buttons smaller, larger, change colors etc with out ever touching a line of CSS.

    You mention in the documentation “Loading Templates from current Theme directory” which I did successfully only to realize that it had zero effect…again as I mentioned, I need to change physical classes to bootstrap integrated classes in order to change text fields over to default bootstrap fields.

    If you go to this link you will see that boostrap forms are far different from what you have in this plugin and if I dont alter them, they will not match the fields on the rest of my site.
    http://getbootstrap.com/css/#forms-example

    Thread Starter JerrySeinfeld

    (@jerryseinfeld)

    I apologize for soundings like an annoying jerk lol, the plugin honestly does exactly what I want it to do, for the most part it looks great, I just got frustrated yesterday and wanted to pull my hair out. I acknowledge that it is free and I genuinely want to say thanks for making something so awesome and for providing me your time.

    Like I said I will likely not be the last person to ask about boostrap. I know once I update the fields and adjust the image sizes to be square crops it will look phenomenal.

    Thread Starter JerrySeinfeld

    (@jerryseinfeld)

    I managed to add the classes that I needed to the proper arrays in the defaults.php file.
    Below is an example for anyone else looking to add bootstrap fields to this plugin. By adding the “class” => “form-control”, and “placeholder” => “Name ( Required )”, I now have attractive and simple bootstrap text fields.

    Also your documentation for custom image sizes appears to be missing the entire section regarding which file you are to replace / add additional code..that could be useful.

    Thread Starter JerrySeinfeld

    (@jerryseinfeld)

    I just checked again, it is not in the documentation at all.

    Plugin Author Greg Winiarski

    (@gwin)

    Hi,
    do not worry about the first message, i sometimes need to troubleshot some third party plugins and i understand it can be frustrating when code appears seemingly out of nowhere, and the fact is i do not have the forms API documented properly yet, there are only some code snippets related to this in Custom Fields article http://wpadverts.com/documentation/custom-fields/.

    Either way in WPAdverts the forms are generated dynamically using Adverts_Form class, this makes them hard to modify directly, but easy to customize via API, the code below will add class “form-control” to each input[type=”text”] in the frontend (you can add it to your theme functions.php or create a new plugin and paste it there)

    add_filter( "adverts_form_load", "add_form_control_class" );
    function add_form_control_class( $form ) {
        if( is_admin() ) {
            return $form;
        }
        foreach( $form["field"] as $k => $field ) {
            if( $field["type"] == "adverts_field_text" ) {
                if( isset( $field["class"] ) ) {
                    $field["class"] = trim( $field["class"] . "form-control" );
                } else {
                    $field["class"] = "form-control";
                }
    
                $form["field"][$k] = $field;
            }
        }
        return $form;
    }

    The default form labels you can hide by adding following CSS to your theme CSS file

    .adverts-form .adverts-control-group > label {
        display: none;
    }

    Setting placeholders for each field can also be done using adverts_form_load filter although you might need to customize the code a bit to set placeholders you wish to use

    add_filter( "adverts_form_load", "add_form_set_placeholders" );
    function add_form_set_placeholders( $form ) {
        if( is_admin() ) {
            return $form;
        }
    
        $pholders = array(
            "adverts_person" => __( "Contact Person", "adverts" ),
            "adverts_email" => __( "Email", "adverts" ),
            "adverts_phone" => __( "Phone Number", "adverts"),
            "post_title" => __( "Title", "adverts" ),
            "adverts_price" => __( "Price", "adverts" ),
            "adverts_location" => __( "Location", "adverts" )
        );
    
        foreach( $form["field"] as $k => $field ) {
            if( array_key_exists( $field["name"], $pholders ) ) {
                $form["field"][$k]["placeholder"] = $pholders[ $field["name"] ];
            }
        }
    
        return $form;
    }

    The form schemes used in the frontend are defined in wpadverts/includes/defaults.php ( look for Adverts::instance()->set( … ) ).

    The code in Custom Image Sizes document you can add either into your theme functions.php or even better create a new WP plugin and paste it there.

    Ok i hope this covers everything you asked about.

    I will take a look at integrating WPAdverts completely with Bootstrap when i will find some free time to learn it, as i think about it this might be an opportunity to make WPAdverts always look pixel perfect good with all themes using Bootstrap.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Override the CSS’ is closed to new replies.