Changing Authorize.net Form font size
Permalink
Is there any way I can change the font size and spaces in between boxes to make the Authorize.net block look better? I tried using Design to change the font size, but it did not work. I want our clients to be able to donate without scrolling top to bottom throughout the process.
The following link shows how the form looks:https://www.liveunitedhudson.org/Main/index.php/donate1/
The following link shows how the form looks:https://www.liveunitedhudson.org/Main/index.php/donate1/
See attached. Looks like you have an empty label tag as well as line 469 of your main.css file where it sets your bottom margin. Currently set to 20px. I would try reducing this to a lower number.
Is it possible to change that in Customization under Themes by adding CSS?
The margin...maybe. Not sure if the block css will override it though.
The empty label tag, I don't think so, but I could be wrong. Only because there is nothing distinguishing its class from the other label tags in that fieldset. Either way I think you would have to modify the the block's view.php.
The empty label tag, I don't think so, but I could be wrong. Only because there is nothing distinguishing its class from the other label tags in that fieldset. Either way I think you would have to modify the the block's view.php.
How would I be able to do that?
To modify the view of the block, go to rootinstallfolder/packages/packagename/view.php. For specifics, I would post your question in the support forum of that package here:http://www.concrete5.org/marketplace/addons/authorize-net-payment-a...
How would I get into those files and change them?
FTP or a online file editor I am guessing. Do you have access to the files on the website?
No I do not.
Did you try clicking of the block, clicking Design and then adding some css properties in there?
I would do that if I knew what properties to type down.
Do you have an idea if what I could try?
Maybe put this in the Design - > CSS - > Additional CSS field (of course modifying it for aesthetics)
#WebInstinctAuthorizenetFormWebInstinctAuthorizenetFormContainer1482 { font-size: 16px; } #WebInstinctAuthorizenetFormContainer1482 input[type='text'], #WebInstinctAuthorizenetFormContainer1482 input[type='password'], #WebInstinctAuthorizenetFormContainer1482 input[type='email'], #WebInstinctAuthorizenetFormContainer1482 input[type='tel'], #WebInstinctAuthorizenetFormContainer1482 textarea, #WebInstinctAuthorizenetFormContainer1482 select { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } #WebInstinctAuthorizenetFormContainer1482 label { font-size: 18px; } #WebInstinctAuthorizenetFormContainer1482 legend { font-size: 18px; }
That did not seem to work.
I see the form id changes, so perhaps try:
.WebInstinctAuthorizenetFormContainer { font-size: 16px; } .WebInstinctAuthorizenetFormContainer input[type='text'], .WebInstinctAuthorizenetFormContainer input[type='password'], .WebInstinctAuthorizenetFormContainer input[type='email'], .WebInstinctAuthorizenetFormContainer input[type='tel'], .WebInstinctAuthorizenetFormContainer textarea, .WebInstinctAuthorizenetFormContainer select { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } .WebInstinctAuthorizenetFormContainer label { font-size: 18px; } .WebInstinctAuthorizenetFormContainer legend { font-size: 18px; }
Still nothing.
And you are editing the design of the form? Clicking on the form (like you would do to edit the form) and click design, then clicking the css tab and putting the code there?
Yes, under additional CSS.
Are you clearing your cache after you make the change?
Yes, still no change.
hmmm...
try
try
#content .WebInstinctAuthorizenetFormContainer { font-size: 16px; } #content .WebInstinctAuthorizenetFormContainer input[type='text'], #content .WebInstinctAuthorizenetFormContainer input[type='password'], #content .WebInstinctAuthorizenetFormContainer input[type='email'], #content .WebInstinctAuthorizenetFormContainer input[type='tel'], #content .WebInstinctAuthorizenetFormContainer textarea, #content .WebInstinctAuthorizenetFormContainer select { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } #content .WebInstinctAuthorizenetFormContainer label { font-size: 18px; } #content .WebInstinctAuthorizenetFormContainer legend { font-size: 18px; }
That did not work either.
Alright, let's try this: take a look at the attached screen shot.
The code to put in the CSS ID file is and the code to put in the Additional CSS field is
I did this on a sample form and it looked like it took the code correctly. If it does work, then you can try to change the parameters above to suit your needs.
The code to put in the CSS ID file is
content .fieldsetfont-size: 30px;} #container .fieldset input[type='text'], #container .fieldset input[type='password'], #container .fieldset input[type='email'], #container .fieldset input[type='tel'], #container .fieldset textarea, #container .fieldset select {margin: 2px 2px; padding:2px 2px;
I did this on a sample form and it looked like it took the code correctly. If it does work, then you can try to change the parameters above to suit your needs.
Still, no changes.
Let's try adding the !important at the end, like this:
The code to put in the CSS ID file is and the code to put in the Additional CSS field is
The code to put in the CSS ID file is
content .fieldsetfont-size: 30px !important;} #container .fieldset input[type='text'], #container .fieldset input[type='password'], #container .fieldset input[type='email'], #container .fieldset input[type='tel'], #container .fieldset textarea, #container .fieldset select {margin: 2px 2px !important; padding:2px 2px !important;
The font changed, but only for 2 sections.
The United Way of Hudson County
This form is in test mode. Your card will not be charged.
Those were the only things that changed fonts. Everything else is the same.
The United Way of Hudson County
This form is in test mode. Your card will not be charged.
Those were the only things that changed fonts. Everything else is the same.
I don't see any of the !important items in the css. Did you clear the site cache?
Yes. I cleared the cache.
Try:
The code to put in the CSS ID file is
and the code to put in the Additional CSS field is
The code to put in the CSS ID file is
content .fieldsetand the code to put in the Additional CSS field is
} #container fieldset legend{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset label{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset span{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset input[type="text"] {font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset input[type="password"] {font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset input[type="email"]{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset input[type="tel"]{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset textarea{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset select{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;} #container fieldset button{font-size:14px !imporant; margin:2px 2px 2px 2px !important; padding:2px 2px 2px 2px !important;
It worked. Thank you very much!
Excellent. Make sure to mark the best answer so other looking will find it. :)
