Quick and basic edit to make and begin converting your default theme responsive

Now there are plenty of more time consuming ways/extensive edits and better say more lengthly routes to converting your theme to responsiveness, but for this particular quick edit the goal was to simple quickly get the basic default theme started responsive in as few template and css edits as possible without any usage of inc/libraries/frameworks etc, etc and without spending more than a few minutes ( took approx like 10 or so minutes) to throw this basic tutorial together simply to help anyone that wants a starting point to continue on editing from but may say as not have the time or knowledge for say other more extensible and time consuming routes. This does not focus on say things I may have shared in tutorials for in the past like custom responsive menus or any other such things, etc, etc, as I stated this goal for this simple tutorial was basic, take the default theme and within 10 minutes make it responsive enough to use on the mobile....


ok, as stated already that this was simply done in a few minutes, it is not perfect and is simply meant as an aide or starting point for anyone interested in say spending more than the few minutes i spent to put this basic tutorial together for thier own usages.



Let us get started. ok, open the default theme headerinclude template and find:

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

Add this before it:

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

Now open and edit > Smilie Inserter Templates > smilieinsert


Find:

<div style="margin:auto; width: 170px; margin-top: 20px;">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" width="150">

Replace with:

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">

then find at the end:

</div>

and replace with:

<br />

and that is the only template edits..... simple enough huh?!


Now quickly start the simple css edits:

... now in your default theme go into global.css stylesheet and find:

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	min-width: 990px;
}

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#content {
	background: #fff;
	width: auto !important;
	padding: 20px 10px;
	overflow: hidden;
}

Comment out as follows:

#container {
	color: #333;
	text-align: left;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
/*	min-width: 990px;*/
}

.wrapper {
/*	width: 85%;
	min-width: 970px;
	max-width: 1500px;*/
	margin: auto auto;
}

#content {
	background: #fff;
/*	width: auto !important; */
	padding: 20px 10px;
	overflow: hidden;
}

Now add the following to your css and continue editing this simple edit further to your needs:

@media only screen and (max-width: 868px) {
body {
	overflow-x: hidden !important;
    overflow-y: scroll !important;
}

/* modal */

.modal {
    width: 300px !important;
}

/* content */
	
#content  {
  float:left !important;
  display: block !important;
  width: 95% !important;	
  padding: 5px 5px;
  margin: 0;
  margin-left: 0px !important; 
}
	
/* logo */
	
#logo {
	margin-top: 30px !important;
    padding-bottom: 10px !important;	
	text-align: center !important;
    float: none !important;
}
	
#logo img {
	padding-bottom: 15px;
}
	
/* table */
	
table td {
    background: transparent;
    padding: 3px;
    text-align: left !important;
    float: none !important;
	border-top: 0px !important;
	border-left: 0px !important;
	border-bottom: 1px solid: #DDDDDD;
    display: block !important;	
	width: auto !important;
	font-size: 13px !important;	
}
	
/* new post/reply smilies */
	
html > body > div#container > div#content > div.wrapper > form > table.tborder > tbody > tr > td.trow2 > table.tborder > tbody > tr > td.trow1 > table#clickable_smilies.clickable_smilies > tbody > tr > td {
	text-align: center !important;
	padding: 20px;
    display: inline-block !important;	
}

/* edit  post/reply smilies */
	
html > body > div#container > div#content > div.wrapper > form#editpost > table.tborder > tbody > tr > td.trow2 > div > table.tborder > tbody > tr > td.trow1 > table#clickable_smilies > tbody > tr > td {
	text-align: center !important;
	padding: 20px;
    display: inline-block !important;	
}	

/* post announcement smilies */
	
html > body > div#container >div#content> div.wrapper > form > table > tbody > tr > td > table.tborder > tbody > tr > td.trow1 > table.tborder > tbody > tr > td.trow1 > table#clickable_smilies.clickable_smilies > tbody > tr > td {
	text-align: center !important;
	padding: 20px;
    display: inline-block !important;	
}

/* pm compose */
	
html > body > div#container > div#content > div.wrapper > form  > table > tbody > tr > td > table.tborder > tbody > tr > td.trow2 > table.tborder > tbody > tr > td.trow1 > table#clickable_smilies > tbody > tr > td {
	text-align: center !important;
	padding: 20px;
    display: inline-block !important;	
}
	
html > body > div#container > div#content > div.wrapper > form > table > tbody > tr > td > table.tborder > tbody > tr > td.trow1 > div#s2id_to.select2-container.select2-container-multi > ul.select2-choices {
	width: 305px !important;
}

html > body > div#select2-drop.select2-drop.select2-drop-multi.select2-display-none.select2-drop-active {
	width: 312px !important;	
}	
	
/* index legend */
	
.forum_legend dt {
	 float: unset !important; 
	 padding: 5px !important;	 
}
	
.forum_legend dd {	
	 margin-left: 40px !important;
	 margin-top: -30px !important;	 
}	
	
/* ucp avatar border */
	
.usercp_container {
    width: 101px;
}
	
/* footer links */

#footer .upper ul.bottom_links {
    float: unset !important;
    display: inline-grid !important;	
}	
		
}

* Primarily, this quick edit focuses on the following, setup viewport, remove sizing in a few items to get viewport to work, minor tweaks to css for things like logo img, tables, forum legend, begin with basic portal, ucp and modcp responsiveness, minor other tweaks to bottom menu and minor tweaks to smiliesinsert to sort out the basics to primarily use the default theme on mobile and to then expand upon that as you see fit for your needs. As I said this is not perfect nor did I spend much time on it like I may have on many of my older free in great detail and in length tutorials in the past and as i only spent about ten minutes on this, I did not look at much further or focus on say the calendar (while I did once write and share a free extensive tutorial way back on say full calendar responsiveness but that is another story and not a focus of this basic tutorial here) and any other such things that may still need focus, but for this really simple edit it gets your foot in the door with the default theme basic responsiveness in a few minutes of following this tutorial free of charge...


Now you can carry on and continue from there with expanding upon and improving upon this rather basic quick edit for your own usages.

Best of luck!  

~ V