[WIP] Responsive CSS for Default Template

[Ezra prakasa]

Hello this is my CSS to make WHMCS default template as a responsive template. You can save below script to css file or append in header.tpl file.

 

And add this tag in your header.tpl file.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

Please keep in mind this script is still in development, I write in my spare time.

 

If you have suggestions or would like to help to develop it, please reply in this thread.

 

For copyrights, you can use it freely, just attach a link to this thread.

 

Current bugs:

• Table style is messy
  
• Nav bar is messy
  

 

Useful reference:

• http://elvery.net/demo/responsive-tables/
  

 

CSS

@media screen and (max-width: 999px) {
.navbar .navbar-inner, .footerdivider {
	width: 100%;
	padding: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}
}

@media screen and (max-width: 959px) {
.navbar .navbar-inner .nav-collapse {
	/* display: none; */
}

.navbar .navbar-inner .container {
	width: 100%;
}
}

@media screen and (max-width: 799px) {
.navbar .navbar-inner {
	height: auto;
}

.form-horizontal .col2half {
	width: 100%;
	clear: both;
}

.whmcscontainer fieldset.onecol label.control-label {
	width: 140px;
}

.whmcscontainer fieldset.onecol div.controls {
	margin-left: 160px;
}

.well .textcenter .bigfield {
	width: 80%;
}
}

@media screen and (max-width: 639px) {
.well .textcenter .bigfield, .well.textcenter .bigfield {
	width: 100%;
}

.well .textcenter .captchainput, .well.textcenter .captchainput {
	width: 90%;
}

.well .textcenter .internalpadding, .well.textcenter .internalpadding {
	text-align: center;
}

.well .textcenter .internalpadding .btn:last-child, .well.textcenter .internalpadding .btn:last-child {
	margin-top: 10px;
}

.row .col2half, .row .col60, .row .col40 , .row .col70, .row .col30 {
	clear: both;
	width: 100%;
}

.form-inline .btn-primary {
	margin-top: 10px;
}

.whmcscontainer .col2half label.control-label, .whmcscontainer fieldset.onecol label.control-label {
	 width: 100px;
}

.whmcscontainer .col2half div.controls, .whmcscontainer fieldset.onecol div.controls {
	margin-left: 110px;
}

.contentpadded .halfwidthcontainer, .whmcscontainer .logincontainer {
	width: 100%;
}

.logincontainer label.control-label, .logincontainer div.controls {
	width: 100%;
	margin-left: 0px;
}

.logincontainer div.controls input.input-xlarge {
	width: 98%;
}

/** Flip scroll table style **/
/*
table:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html table, *:first-child+html table {
	zoom: 1;
}

table {
	width: 100%;
	border-collapse:
	collapse;
	border-spacing: 0;
}

th, td {
	margin: 0;
	vertical-align: top;
}

th {
	text-align: left;
}

table {
	display: block;
	position: relative;
	width: 100%;
}
thead {
	display: block;
	float: left;
}

tbody {
	display: block;
	width: auto;
	position: relative;
	overflow-x: auto;
	white-space: nowrap;
}

thead tr {
	display: block;
}

th {
	display: block;
	text-align: right;
}

tbody tr {
	display: inline-block;
	vertical-align: top;
}

td {
	display: block;
	min-height: 1.25em;
	text-align: left;
}

th {
	border-bottom: 0;
	border-left: 0;
}

td {
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

tbody tr {
	border-left: 1px solid #babcbf;
}

th:last-child, td:last-child {
	border-bottom: 1px solid #babcbf;
}
*/
/** End of Flip scroll table style **/

/** No more table style **/
table, thead, tbody, th, td, tr {
	display: block;
}

table thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

table tr {
	border: 1px solid #ccc;
}

table td {
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-left: 50%;
	white-space: normal;
	text-align:left;
}

table td:before {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	white-space: nowrap;
	text-align:left;
	font-weight: bold;
}

table td:before {
	content: attr(data-title);
}
/** End of No more table style **/

.footer {
	text-align: center;
}

.footer #languagechooser, .footer #copyright {
	clear: both;
	width: 100%;
}
}

Edited May 31, 2013 by Ezra prakasa
Add meta tag for viewport

[altomarketing]

It works fine for me !! Thanks !!

Edited June 3, 2013 by altomarketing

[NSIS-vlad]

Lovely, thank you.

[Iniz]

Works perfectly indeed, thanks!