[Plugin: Participants Database] CSS Help

Hello Xnau, I love this plugin you’ve developed. I’m using it to record some data from customers who purchase a product. I works great. My only concern is I’m having difficulty matching the stylesheets to what my site currently looks like.

I have also left a comment on your site asking the same question:
https://xnau.com/wordpress-plugins/participants-database/comment-page-5/#comment-1073

Here’s the dilemma:

This page contains the a contact form that is styled appropriately:
https://monkeybreadbooks.com/contact/

This page contains the plugin you’ve developed:
https://monkeybreadbooks.com/about/survey/

I’m attempting to locate the code that controls the sign up form. That’s all I’m really interested in editing. When visiting the plugin editor in WordPress I only have access to 4 CSS files:
participants-db.css
PDb-admin.css
pdb-list.css
PDb-record.css

I’m having great difficulty locating the style for the sign up form, and how I would convert my existing style for this plug-in. If you could help that would be fantastic!

I seem to have isolated the .CSS that controls the look I want:

/*-----------------------------------------------------------------------------------*/
/*	9.  CONTACT
/*-----------------------------------------------------------------------------------*/

#contact-page #post-right.g320 { margin-right: 40px;padding: 0;margin-top: 0;margin-left: 0; width: 450px;background: none;border: none;}
#contact-page #post-right.g320 img { margin-bottom: 0px; }
#contact.g640 { width: 420px; }

#contact-page .textwidget ul li { margin-bottom: 2px; }
#contact-page h3.contact { padding-left: 20px; font-weight: bold;}
form.wpcf7-form p { font-family: "Georgia", sans-serif; text-transform: uppercase;color: #999; margin-top: 20px; }
form.wpcf7-form input { background: url(framework/images/body_bg.gif); width: 300px;font-family: "Georgia", sans-serif;border: 1px solid #ccc; padding: 10px; font-size: 12px; }
form.wpcf7-form textarea { width: 350px;font-family: "Georgia", sans-serif;border: 1px solid #ccc; padding: 10px; font-size: 12px;background: url(framework/images/body_bg.gif);    }
input.wpcf7-submit{width:100px !important;display:inline-block;padding:5px 10px 6px;color:#fff;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.4);text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);border:none !important;width:70px;font-size:13px;font-weight:bold;line-height:1;position:relative;cursor:pointer;background-color:#ff5c00; background-image: none !important; background-color: #d45500 !important;}
input.wpcf7-submit:hover { background-color: #d45500; }

Where Do I enter this into this Plugin, and what changes will I need to make? Please Help!

Sages,

I will say that the best place to make these kinds of changes is in your theme stylesheet. I get a lot of requests for help with CSS and I’m happy to provide specific examples, but what you need is to learn more about CSS and how it works. It’s not too hard, and well worth the effort.

–Roland

Hi Roland,

I think this problem is because you use html tables in your Particpants Database sign-up form where Contact Forms 7 uses div tags, so there is a different look.

Here is a little hack to the code.

open wordpress/wp-content/plugins/particpants-database/classes file name

Signup.class.php

you will find the table output starting on line 238.

And the line to edit is line 263 which is default:

<th><?php echo $column_title?></th>
<td>

change this line to:

<td><?php echo $column_title?>

This will put both the label and the input form inside the same column.

Of course, this change is going to be overwritten the next time I update my plugin, so is there a way to make this a unique form, like prehaps create a new class file called signupform7.php

Is that possible? Or is it bad?

Thea,

Yes, I have included the use of templates in the next update (currently delayed) so the forms output can be structured any way. Tables are not my preferred output for forms, but work reliably on most systems. Anyway, your mod will work for now.