WordPress.org

Ready to get started?Download WordPress

Forums

BP Profile Search
[resolved] Styling the search form/page ? (6 posts)

  1. boblebad
    Member
    Posted 3 months ago #

    Hi

    I'm trying to figure out the structure and styling of the search form/page (php/css).

    I have a lot of check boxes, sorted into different groups, and would like to have them displayed like this:
    http://s18.postimg.org/yb2ubzpex/Advanced_Search02.png

    The only reason why it looks so nice at the moment, is be course i managed to set the width on the check boxes, and as it looks to me they control the width of the label(purple) above them.

    What i would like, is to have control over the layout like in columns, so i can maybe have 4 and center them on the page, and also have them displayed in rows like on the picture, the only reason they are in place now, is be course of the right check box column, it is the longest.

    When trying to control the width of the label(purple) and float:left, then it's like the check boxes ends up behind the labels.

    Also i have some drop down choices i would like to have ordered the same way, that i can't figure out at all, when doing a float:left on them, the first one is right with the label on top, but the next three stack up below with the label to the right of them. (i don't have a picture of it)

    Here is the picture of the drop down selections, it would be nice to be able to control them columns like too:

    http://s17.postimg.org/6iqbwf48f/Advanced_Search01.png

    I have just cut them down to 50% width.

    EDIT: And is it possible to have a range on height and age ?

    EDIT-2: The check boxes could also be float:left, and the label(purple) 100% width, so the search page is divided into sections of rows.

    All the best
    Carsten

    https://wordpress.org/plugins/bp-profile-search/

  2. Andrea Tarantini
    Member
    Plugin Author

    Posted 3 months ago #

    Hi Carsten,

    I'm not a CSS expert, so I'm not sure how you can achieve the results you need.

    On the other hand, BP Profile Search is able to process manually written search forms. That means that, if you can write the HTML and the CSS for a form that suits your needs, I can explain how to make it work with BP Profile Search. Please let me know!

  3. boblebad
    Member
    Posted 3 months ago #

    Hi Andrea

    Thanks for your answer :)

    I'm not a code-wiz, but i can see patterns and hack around to fit existing code to my needs.

    Can you guide me to how the form you made is build, and how much you made yourself and what you used from Buddypress, e.g. functions and css, i can't seam to figure it out completely ?

  4. Andrea Tarantini
    Member
    Plugin Author

    Posted 3 months ago #

    It's not difficult. Open bps-form.php and look at all the echo statements within the function bps_display_form.

    These statements print out the HTML for the different parts of the search form, so you can modify them to suit your needs.

    No CSS is provided by BP Profile Search, it uses the CSS provided by BuddyPress and by the active theme.

  5. boblebad
    Member
    Posted 3 months ago #

    Thanks for your answer again @Andrea :)

    I found out that the styling and order is controlled by Buddypress, i was working on the profile details section an saw that it was the same css that was used.

    The worst is that the styles are shared with other elements on the page, so i need to split it up. I ran in to the same problem with some other changes i needed.

    For now it works well enough to go into beta testing with the site, then i'll figure it out over the next days or so :)

  6. Andrea Tarantini
    Member
    Plugin Author

    Posted 3 months ago #

    Sounds good. Best luck with your project!

Reply

You must log in to post.

About this Plugin

About this Topic