WordPress.org

Forums

Participants Database
[resolved] Styling Results (8 posts)

  1. rwilki
    Member
    Posted 11 months ago #

    Hey Roland, thanks so much for all your support!

    I'm trying to style the results from the search function. I'm having a heck of a time with it too. Do I have to have a custom template? It seems to be ignoring some of my CSS.

    I'm trying to display something like this and using a div or class to differentiate each record. Could you give me a head start? The problem with columns is that they get too narrow.

    <div id="1">
    Organization Name:
    ABC Organization Name Title

    Organization Phone:
    444-111-2222

    Organization eMail:
    info@email.com

    Summary:
    Lorem ipsum dolores. Lorem ipsum dolores. Lorem ipsum dolores. Lorem ipsum dolores.</div>

    <div id="2">
    Organization Name:
    ABC Organization Name Title

    Organization Phone:
    444-111-2222

    Organization eMail:
    info@email.com

    Summary:
    Lorem ipsum dolores. Lorem ipsum dolores. Lorem ipsum dolores. Lorem ipsum dolores.</div>

    My second question is if you have any more examples for styling the search functionality? Is it possible for the search function to have multiple drop down lists rather than one really deep one?

    Thanks,
    Bob

    https://wordpress.org/plugins/participants-database/

  2. xnau
    Member
    Plugin Author

    Posted 11 months ago #

    Bob,

    I'll try to help, but this is really something that has to be done in the context on your site. First, you can't begin an ID with a numeral, the first character has to be alphabetical. That could account for your CSS getting ignored, but CSS rules can interact in a lot of ways so it's important to understand how selector precedence works so your rules will be active and not overridden by other rules.

    Things like column widths can be complex, and this can be complicated by poorly-written CSS that you all too often find in WP themes. I can only suggest you persevere and take it as an opportunity to learn the skill of using CSS.

    For the search controls, it's not a matter of styling if you want to break up your dropdown search options into smaller sets. This has to be done in HTML. There is no general way to accomplish what you're asking for, it is a matter of user interface design and there are many approaches you could take.

  3. rwilki
    Member
    Posted 11 months ago #

    Thanks Roland, I'm quite comfortable with CSS, I only threw the numbers in there for the purposes of this discussion. You're right numbers don't play well in CSS.

    So this is the code my results are spitting out. I've tried using pseudo classes in my CSS but it's still not displaying the columns as stacking blocks. This is just a small output of my entire single record. I've tried a class for example of "th.name_of" and "th.address" with display:block; etc... but it has no visual effect on my output.

    Just to be clear, I'd prefer stacking results over columns. Columns won't play nice with the amount of data my records contain and for mobile views.

    <tr>
    <th class="name_of" scope="col">Name of</th>
    <th class="address" scope="col">Address</th>
    <th class="city" scope="col">City</th>
    <th class="zip" scope="col">Zip Code</th>
    <th class="county" scope="col">County</th>
    <th class="website_url" scope="col">Website URL</th>
    <th class="phone_number" scope="col">Phone Number</th>
    <th class="fax_number" scope="col">Fax Number</th>
    </tr>

    Regarding the search controls thanks for your advice. I'm keen on doing this in HTML, but if I'm using shortcodes, I have no idea where to begin. Do you have any other examples of search shortcode strings?

    Guess I'm making you work for my small tip...

    Thanks so much!
    Bob

  4. xnau
    Member
    Plugin Author

    Posted 11 months ago #

    OK, well just looking for something that would be helpful, sounds like you've got a handle on it.

    It's not possible to use a table layout to get what you're looking for, so you'll have to completely restructure the template so it places the values into title/value blocks like you have there.

    Regarding the search layout, there isn't any shortcode settings to achieve this, this also requires a custom template that can restructure the search control. You can get some ideas from the "pdb-list-detailed.php" template included in the plugins, but I suspect this would not offer the kind of flexibility you need.

    If you need me to do some custom work for you, contact me via email.

  5. rwilki
    Member
    Posted 11 months ago #

    Thanks Roland! Your information is what I was looking for. I figured that I'd have to create custom templates and that's fine with me.

    For search results templates, do you think I'll need to create a custom one for default view and for detailed view? I know how to edit shortcode to pull in a custom template, but I'm not sure how to create and call a custom detailed template.

    I may be in touch on the customization part. I'll see what I can do first...

    Thanks,
    Bob

  6. xnau
    Member
    Plugin Author

    Posted 11 months ago #

    Basically, the templates provided by the plugin are meant to be starting points. The detailed template does exactly the same thing as the default template, just laying it out with discrete elements rather than using shortcut methods that output a whole bunch of things all at once.

    What I was suggesting is to try using the detailed template as your starting point for creating the custom template. That will give you access to the individual parts of the search control, for instance.

  7. rwilki
    Member
    Posted 11 months ago #

    Gotcha! Thanks...

  8. rwilki
    Member
    Posted 10 months ago #

    works great Thanks!

Reply

You must log in to post.

About this Plugin

  • Participants Database
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.