Customizing Affiliate Plugin Page Layout

I'm trying to change the layout of the Affiliate page here:
http://drgeraldlewis.com/affiliates/ (screenshot attached)

At the moment the writing is all squashed together and looks a bit of a mess - I can't seem to adjust it in Upfront and my efforts to change it in the Affiliate Settings screen (where you can change the actual words/content) haven't worked either.

Ideally:
1. I would like each each sentence to be on a separate line to make it clearer to read.
2. I'd like to fix the indent by 'Enable Affiliate Links'
3. I'd like the Yes/No Drop down box and the email form field to be properly defined
4. If possible, the update link would be better either as a button or even without the grey background? Looks a little odd...

Any suggestions would be much appreciated

    Adam Czajczyk

    Hello Pam,

    I hope you're well today and thank you for your question!

    An "Affiliates" plugin is using what we call a "virtual page" to display that content and these pages doesn't play well with Upfront editor yet. This of course will be fixed and as we're preparing a new (non-beta) Upfront 1.0 version this should be then easy to edit in a "standard WP" way. I'm not able to give you any ETA on this but it should be released soon.

    You can however use custom CSS rules to style that page. To apply custom CSS to your site, please open the page in browser (being logged in as an admin) and then

    - click on "Upfront" in toolbar to enter Upfront editor,
    - click on "Theme settings" inside left Upfront panel
    - click on "add custom CSS rules" link
    - you can add CSS into an editor that pops up at the bottom of the screen.

    That said, here's an example CSS to be added that's addressing most of the issues you mentioned:

    /* content header */
    #affiliateuserdetails .formholder strong {padding:0;margin:0 0 5px 0;display:block;}
    /* content text */
    #affiliateuserdetails form p {padding:0px;margin:0 0 5px 0;}
    
    /* paypal email */
    #affiliateuserdetails form input {
       background:#fff;
    	color:#69A8A6;
    	padding:3px 10px;
    	border:1px solid #69A8A6;
    	margin-left:20px;
    }
    
    /* dropdown list */
    #affiliateuserdetails form select {
       background:#fff;
    	color:#69A8A6;
    	padding:3px 10px;
    	border:1px solid #69A8A6;
    	margin-left:20px;
    	margin-bottom:10px;
    }
    
    /* button "normal" and "on hover" */
    #affiliateuserdetails form .submit input {
      background:#69A8A6;
    	color:#FFF;
    	padding:3px 10px;
    	border:1px solid #69A8A6;
    	margin-left:20px;
    	margin-bottom:10px;
    }
    
    #affiliateuserdetails form .submit input:hover {
      background:#69A8A6;
    	color:#DEDEDE;
    	padding:3px 10px;
    	border:1px solid black;
    	margin-left:20px;
    	margin-bottom:10px;
    }

    You may want to experiment a bit with this code and adjust colors/margins/padding values to suit you needs.

    Please note also, that in order to style text I've enclosed paragraphs in <p> </p> html tags using WP editor in text-mode on your dashboard's "Affiliate -> Settings" page.

    I hope that helps!

    Best regards,
    Adam