Thursday, 03 December 2015 19:32

JSN-UniForm

Written by

Positioning

/* Uniform - set max width and center*/
.jsn-uniform {max-width: 450px; margin: auto auto;}

 

/* Uniform - centers the secureimage block within the uniform column */
.jsn-uniform .controls{text-align: center;}

 

/* Uniform - securimage going outside the container */
.form-horizontal .controls {margin-left: 0px !important;}

 

/* Correct position of the capture */
.jsn-uniform .controls img {
    margin-bottom: 20px;
    padding-right: 20px;
}

 

Other

Disable Pence Field

/* Uniform - Disable Pence on form */
.jsn-master .jsn-bootstrap .currency-cents .controls-inner input,
.jsn-master .jsn-bootstrap .jsn-narrow .control-group .currency-cents {
	display:none;
}

 

/* Disable the '.' and Pence on contact form - normal */
.jsn-master .jsn-bootstrap .currency-cents .controls-inner input,
.jsn-master .jsn-bootstrap .jsn-narrow .control-group .currency-cents,
.jsn-master .jsn-bootstrap .jsn-narrow .control-group .currency-cents::before {
	display:none;
}

 

/* Disable the '.' and Pence in modals - possibly normal forms aswell */
.jsn-master .jsn-bootstrap .currency-cents,
.jsn-master .jsn-bootstrap .currency-cents::before {
    display:none !important;
}

When disabling fields or other elements on a Uniform when it is in a modal, you need to add the CSS rule into CSS field in the admin section of that form so it is placed inline. The !important statement seems mandatory aswell. This code might work for normal Uniforms but note that it is not form specific.

Styling

/* Uniform - Form Labels */
#jsn_form_1.jsn-master .jsn-bootstrap .jsn-form-content .control-group .control-label,
#jsn_form_2.jsn-master .jsn-bootstrap .jsn-form-content .control-group .control-label
{
	font-family:Arial;
	font-size:18px;
	font-weight:normal;
	color:#ff972f;
}

 

/* Uniform - Button Styling */
button.jsn-form-submit {
	height: 49px;
	width: 187px;
	background: url(../../../images/pages/contact-us/Submit-Button.jpg);
}
/* line 9 - bootstrap-min.css) */
button.jsn-form-submit:hover, button.jsn-form-submit:focus {
  background-position: 0px 0px;
}

 

/* CSS Button Styling */
#jsn-master .btn.btn-primary.jsn-form-submit {
    background: transparent;
    color: #464646;
    border: 1px solid #777;
    text-transform: uppercase;
    text-shadow: none;
    padding: 10px 30px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

In the following templates custom.css has a fully styled contact form

  • joomlashine time
  • mini

Other

cannot disable the uniform editor button

  • Plugin Manager -> Search Uniform -> Disable JSN UniForm - Button Form - Doesnt work because it is a protected button
  • I disabled the button by editing the phpmyadmin entry for this extension and changed the field 'protected' from 1 to 0 for the uniform button this worked
  • ideal resolutions of images
    • 1920 x 600
    • 960 x 400

Complete Example

This is a more complete example of where I use many fot he snippets above to fix JSN-Uniform in JSN-Blank (for lamb ino)

/*-- Uniform --*/

/* Desktop */
.jsn-master .jsn-input-xlarge-fluid {
    width: 50% !important;
}

/*input#jsn-captcha {
 	width: 50% !important;
    max-width: 215px;    
}*/

/* Uniform - securimage going outside the container */
.form-horizontal .controls {margin-left: 0px !important;}


button.btn.btn-primary.jsn-form-submit {
    float: left;
    margin-left: 180px !important;
}

/* Tablet mode break point */
@media only all and (min-width: 30.062rem) and (max-width: 47.938rem) {
    .jsn-master .jsn-input-medium-fluid,
    .jsn-master .jsn-input-xlarge-fluid {
        width: 95% !important;
    }
    
    .form-horizontal .controls {
        margin-left: 0px;
    }
    
    button.btn.btn-primary.jsn-form-submit {
        float: left;
        margin-left: 0 !important;
    }    
}

/* Mobile Single Column */
@media only screen and (max-width: 480px), (max-device-width: 480px) {    
    .jsn-uniform #jsn-captcha {
        width: 215px !important;
    }    
}

@media only all and (max-width: 30rem) {     
    .jsn-master .jsn-input-xlarge-fluid {
        width: 95% !important;
    }
    
    button.btn.btn-primary.jsn-form-submit {        
        margin-left: 0 !important;
    }
}

/*-- --*/

 

Read 2037 times Last modified on Saturday, 09 December 2017 13:03