T5 and T7 differences on navigation and forms

 

NAVIGATION

T5 NAVIGATION

T5 websites do not use bootstrap mobile nav but may instead use meanmenu or select nav which works differently.

Screenshot of T5 navigation. Bootstrap classes on navigation does not exist.

01-T5-nav.png

 

 Screenshot shows the T5 CSS styles.  

02-T5-theme-styles.png

 

T7 NAVIGATION 

T7 websites use bootstrap mobile nav so the classes that are found throughout the nav are different from the start.

Screenshot of T7 of navigation with bootstrap mobile nav classes.

03-t7-nav.png 

 

Screenshot below shows the style CSS.  

04-t7-theme-styles.png

 

 

The .dropdown-menu below shows all the the styles it calls. You only need to choose the ones you want to change then copy and paste those into your custom style sheets. 

.dropdown-menu {

position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip:padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);

}

 

 

Screenshot below shows the .dropdown-menu class.

05-t7-dropdown-menu.png

 

 

 

FORMS

T5 FORMS

T5 forms do not have bootstrap styles or format.

Screenshot of form without bootstrap classes.

05-t5-forms.png 

 

Screenshot below shows the CSS styles. 

06-t5-forms-styles.png 

 

The grey colored text inside input boxes inherit's its styles from global_tendenci.css:

div.forms .form-field .field input[type="text"] {

padding: 3px;
font-size: 16px;
width: 70%;
color: #777;

}

 

T7 FORMS 

T7 forms take the bootstrap styles and gives the label one column width and the input filed another columns width.

Screenshot of Bootstrap forms.

07-a-t7-forms.png 

 

Made few adjustments to have the code make the labels hide

The code changed from: 

#home #newsletter .id_field_9 .required {display: none;}

     to 

#home #newsletter label[for=“id_field_9”] {display: none;}

 08-t7-forms-styles.png

  

Input forms have a class of .col-sm-9 which all .col-$$-$ have a left and right padding of 15px. To get rid of it I called .col-sm-9 and made it a padding of 0px. I also forced the widths to 100%.

Code: #home #newsletter .form-group .col-sm-9 {width: 100%; padding-left: 0px; padding-right: 0px;} 

 

Screenshot of .col-sm-9 padding.

09-t7-forms-padding.png 

 

The grey text inside input fields inherits .form-control class from bootstrap.css or bootstrap.min.css. Simply make copy and paste to those styles that you made changes for into your custom stylesheet. 

.form-control{

display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;

}

 

Screenshot of T5 vs T7 input text differences.

10-forms-comparison.png 

 

 

Code where .form-control is found: 

<input class="form-control blur" id="id_field_9_0" maxlength="75" name="field_9_0" placeholder="Email" title="Email" type="text">

 

Screenshot of .form-control class:

11-form-control-class.png