Topic RSS
11:29 am
Please replace the ??? with your data!
- Your URL: http://johannesjonker.com/contact
- The browser used: ???
- cforms version: 6.41
- Your Wordpress version: 2.3.1
Hi!
First off: great plugin! I'm very impressed with how feature-rich cforms is and I enjoy the fact that you can customize nearly everything. There is, however, one little problem that I currently struggle with: I would like the whole form to be left aligned. I dug around in the CSS stylesheet (using wide_open_no_border.css), but I couldn't get it right. Also checked the contact page with Firebug but couldn't find the align property of the form.
This question probably has a very simple answer, but this is really a last resort. If anyone could provide me with a little help here, I would really appreciate it.
Thanks in advance!
7:21 pm
March 6, 2005
OfflineYou need to adjust the class .cforms in your cforms CSS theme file. Simply remove the auto from margin and replace it with whatever suits you.
Also, check out the CSS guide and webcast in this forum (stick posts at the top!)
5:41 am
1st and foremost – GREAT JOB w/ the scripts Guys and Gals…. Very Clean!!!! A CLASS ACT!!!!
I too have a positioning problem… this is a fresh install, with the latest updates.
Here's a link to view: http://mobilecompmedic.com/seopro/
.cform was the 1st place that I went to make this adjustment but after several trys I decided to bring it here… my apologies. I've come to the conclusion that the .cform code is correct and that it is the Wordpress CSS that is keeping this module confined to the right column, thus pushing the form off the page – or better spoken, making the page width expand off screen the number of pixels I set for margin-right (in the example below: 600px)
.cform {
margin:0 0 600px 0;
width: 410px;
}
Any advice for a quick fix? If so please be specific, I'm pretty slow :>)
Thanks, "K"
7:17 am
March 6, 2005
OfflineI too have a positioning problem… this is a fresh install, with the latest updates.
A positioning problem is always relative, it depends on what you're trying to achieve, which you haven't explained.
Looking at your page, I see you added the form via the widget control to your sidebar, so this worked ok, although it looks broken (can't squeeze a 400px wide form in a 200px wide sidebar!).
Two options:
- Either choose the proper cforms CSS theme for the sidebar position: "sidebar layout"
- Or remove the widget, and include your contact form in a post / page (see HELP! page for detailed instructions)
7:59 am
I thought that might be the case, Thank you for that quick reply Oliver… if there is a way I can help spread the good word for the cause, please let me know. i.e.- a link back to (?)
Best regards, "K"
5:26 pm
NP Oliver, will do. In the meantime… in case anyone else is interested in having the Shiny Style contact form in their WordPress sidebar, the following is the altered CSS stylesheet I used.
1.) Resize the top and bottom images width to 180px (../images/customform_shiny_bg.jpg) & (../images/customform_shiny_bg_bottom.jpg)
Cut, Copy & Paste the following to replace the existing stylesheet: shiny_style.css
That's It!!!! Good Luck, and thanks again Oliver
/* */
/* custom code on top the default style sheet */
/* */
/* ** if you want this to apply to a different */
/* ** form than to just the 2nd form change the '2' */
/* ** (or remove for your 1st, default form) */
@import "calendar.css";
.cform fieldset.cf-fs1 {
background: url(../images/customform_shiny_bg.jpg) no-repeat;
padding-bottom:0;
}
.cform fieldset.cf-fs1 ol.cf-ol {
margin:50px 0 0 0!important;
}
/* */
/* main 'top-level' form elements */
/* */
.cform {
margin:0 0 0 0;
width: 180px;
}
.cform fieldset {
margin:10px 0 0 0;
padding:5px 0 15px 0;
border:none;
background:white;
}
.cform .cf_hidden {
display:none;
border:none!important;
background:none!important;
padding:0!important;
margin:0!important;
}
.cform legend {
display:none;
}
ol.cf-ol {
margin:0!important;
padding:0!important;
}
ol.cf-ol li {
background:none!important;
margin:5px 0!important; /*some themes may interfere otherwise*/
padding:0;
list-style:none!important;
text-align:left;
line-height:1.3em;
}
/* */
/* just for text-only fields (no input) */
/* */
ol.cf-ol li.textonly {
color:#a2a2a2;
padding:4px 0;
text-align:center;
}
/* */
/* global definitions for field labels */
/* */
.cform label {
color:#666666;
width:90px;
margin:4px 10px 0 0;
display:-moz-inline-box; /*for mozilla*/
display:inline-block; /*for Opera & IE*/
text-align:left;
vertical-align:top;
}
.cform label span {
color:#666666;
width:90px; /* must be the same as above!*/
display:block;
}
label.cf-before {
margin:4px 10px 0 0;
}
label.cf-after {
margin:4px 2px 0 6px;
width:70px;
text-align:left;
}
label.cf-after span {
width:70px;
display:block;
}
label.cf-group-after {
margin:4px 4px 0 2px;
width:125px;
text-align:left;
}
label.cf-group-after span {
width:125px;
display:block;
}
/* */
/* FORM FIELDS general formatting */
/* */
.cform input,
.cform textarea,
.cform select {
color:#333;
padding:3px;
background: #fefefe;
border: 1px solid #ddd;
vertical-align:top;
letter-spacing:1px;
line-height:normal;
padding:4px 3px;
vertical-align:top;
font:bold 9px Arial;
}
.cform input:hover,
.cform textarea:hover,
.cform select:hover {
background:#f2f2f2;
}
.cform input:focus,
.cform textarea:focus,
.cform select:focus {
background:#fefefe;
}
.cform textarea,
.cform input {
width:175px;
}
.cform select {
width:183 px; /* attempt to have equal length */
}
.cform select.cfselectmulti {
height:7.5em;
}
.cform textarea {
overflow:auto;
}
/* */
/* formatting for text: "(required)" & other */
/* */
span.reqtxt,
span.emailreqtxt {
color:#a2a2a2;
margin:3px 0 0 5px;
font:normal 9px Tahoma;
display: -moz-inline-box;
vertical-align:top;
letter-spacing:1px;
}
/* */
/* radio button title */
/* */
ol.cf-ol li.cf-box-title {
color:#a2a2a2;
padding-left:100px; /* check with label 'width' incl. */
margin:6px 0 0 0!important;
}
/* */
/* check boxes */
/* */
input.cf-box-a,
input.cf-box-b {
margin:2px 0 0 0;
width:16px;
height:22px;
border:none!important;
background:none!important;
}
input.cf-box-a {
margin-left:100px; /* check with label 'width' incl. */
}
/* */
/* check box groups */
/* */
ol.cf-ol li.cf-box-group {
margin:0pt !important;
padding: 0 0 5px 100px;
}
/* */
/* FORM submit button */
/* */
p.cf-sb {
text-align:center;
padding:0!important;
margin:0;
background: url(../images/customform_shiny_bg_bottom.jpg) no-repeat bottom left;
}
.cform input.sendbutton {
color:#FFFFFF;
cursor:pointer;
font:14px Arial;
height:31px;
line-height:31px;
margin: 0px 10px 10px 0px;
padding: 0 0 5px;
width:120px;
background: white url(../images/customform_shiny_submit.jpg) no-repeat;
border:none;
}
.cform input.sendbutton:hover {
background-position:0 -31px;
}
/* */
/* FORM FIELDS enhanced error display */
/* */
ol.cf-ol li.cf_li_err {
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
padding:5px 0!important;
margin:5px 0!important;
}
ol.cf-ol li ul.cf_li_text_err {
margin:0 0 0 100px;
padding:0;
color:#333;
}
ol.cf-ol ul.cf_li_text_err li {
background:url(icon-alert.png) no-repeat left 1px!important;
list-style:none!important;
font-weight:bold;
text-indent:0;
margin:0 0 2px!important;
padding-left:15px;
}
ol.cf-ol ul.cf_li_text_err li:before {
content:'';
}
/* */
/* 'visitor verification' related styles */
/* */
label.secq,
label.seccap {
vertical-align:text-bottom;
margin-bottom:4px;
margin-right:20px;
}
input.secinput {
vertical-align:text-bottom;
}
#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
height:15px;
width:50px;
padding: 4px 4px;
margin: 10;
vertical-align:text-bottom;
}
img.captcha {
vertical-align:text-bottom;
margin:0 0 0 30px!important;
padding:0!important;
border:none!important;
float:none!important;
}
img.captcha-reset {
vertical-align:text-bottom;
background: url(captcha_reset_silver.gif) no-repeat;
margin:0 0 2px 3px;
width:21px;
height:21px;
border:none;
}
img.imgcalendar {
border:none;
}
/* */
/* change formatting of response msgs here */
/* */
div.cf_info {
color:#333;
display:none;
padding:0 0 0 0!important;
width:180px;
line-height:1.3em;
margin:auto;
align:center;
}
div.cf_info ol {
margin:0;
padding:5px 15px 0 30px;
}
div.cf_info ol li {
padding:1px 0;
margin:2px 0;
}
div.cf_info a {
color:#ad2929!important;
text-decoration:underline!important;
}
div.success {
background:white none repeat scroll 0%;
color:#AAAAAA;
display:block;
letter-spacing:3px;
}
div.failure {
display:block;
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
}
/* */
/* formatting for invalid user inputs */
/* */
.cform .cf_error {
color:#ad2929;
border:1px solid #ad2929;
}
div.mailerr {
display:block;
}
.mailerr,
.cform .cf_errortxt {
color:#ad2929;
}
/* */
/* disabled fields [disabled] does not work on IE! */
/* */
[disabled] {
color:#dddddd;
border-color:#dddddd!important;
background:none!important;
}
.disabled {
border-color:#dddddd!important;
}
/* */
/* upload box styling */
/* */
.cform input.cf_upload {
width:220px;
background: #f9f9f9;
border:1px solid #888888;
}
/* */
/* Other: link love */
/* */
.linklove {
width:180px;
margin:0 auto 10px!important;
padding:0!important;
text-align:center!important;
}
.linklove a,
.linklove a:visited {
font-size: 0.8em;
font-family: Tahoma;
color:#aaaaaa!important;
}
/* */
/* Other: browser hacks */
/* */
* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt {
display: inline-block; /*for ie6*/
}
*+html ol.cf-ol,
*+html ol.cf-ol li,
*+html .cform label,
*+html span.reqtxt,
*+html span.emailreqtxt {
display: inline-block; /*for ie7*/
}
*+html img.captcha {
margin-bottom:1px!important;
}
* html img.captcha {
margin-bottom:1px!important;
}
* html select {
margin-top:3px!important;
}
6:34 am
Hi. Great plugin. Thank you!
I have been searching for hours and still don't have my answer.
I am using Suffusion Theme 4.4.0, Wordpress 3.5, and Cforms version 14.6 and the Dark-rounded.css
http://radioroompress.com/contact/
chrome browser.
I am not great at CSS. I find people who have the same problem and then try the solutions that were offered to them. I tried the advice above, changing the Margin settings to my desired position, but nothing is happening. Am I doing it in the right place?
I am trying to change
/* */
/* main 'top-level' form elements */
/* */
.cform {
width: 410px;
padding-bottom:8px;
margin:10px auto 0 auto;
background: url(../images/customform_dark_bg_bottom.jpg) no-repeat bottom left;
}
to anything that will make it left align.
I have tried
/* */
/* main 'top-level' form elements */
/* */
.cform {
width: 410px;
padding-bottom:8px;
margin:10px 270px 0 0px;
background: url(../images/customform_dark_bg_bottom.jpg) no-repeat bottom left;
}
to see what would happen, but nothing happens at all! In fact, I've changed the width: 410px; to other values to see what would happen, but, again, nothing changed.
Any advice at all on how to get this to left align would be greatly appreciated.
Thank you!
Donovan
Most Users Ever Online: 959
Currently Online:
97 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
tracedef: 43
mores: 21
Gyrus: 20
frozenwaste: 18
asuffredini: 15
photoworks: 14
Member Stats:
Guest Posters: 3549
Members: 1464
Moderators: 3
Admins: 1
Forum Stats:
Groups: 1
Forums: 4
Topics: 5157
Posts: 18387
Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass
Moderators: Paul (421), cnymike (8), sonika (95)
Administrators: Oliver (6398)
FAQs
Home
Add Reply
Add Topic
Quote











