[Plugin: Participants Database] CSS Help

  • Sages

    (@sages)


    11 years, 11 months ago

    Hello there, I’m looking for some assistance in coding the CSS for a plugin I installed called Participants Database. It’s excatly what I need to record a survey for buyers.

    However I’m not very savvy in CSS, in fact I had someone else style my website. However I’m trying to add a page and make it look identical to one of my existing pages.

    This page has the correct style:
    http://monkeybreadbooks.com/contact/

    This page is the new database page that is not styled:
    http://monkeybreadbooks.com/about/survey/

    Basically I’m trying to mimic the appearance of the contact page to match the new survey page. Can someone help me out? Thanks 🙂

    Let me know if you need more information.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Sages

    (@sages)

    11 years, 11 months ago

    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:
    http://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:
    http://monkeybreadbooks.com/contact/

    This page contains the plugin you’ve developed:
    http://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!

    xnau webdesign

    (@xnau)

    11 years, 11 months ago

    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

    Thea G

    (@thea-g)

    11 years, 11 months ago

    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?

    xnau webdesign

    (@xnau)

    11 years, 11 months ago

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Plugin: Participants Database] CSS Help’ is closed to new replies.