Changes to the USU template making it responsive
======
-
Upload the following files to the server:
- js/responsive.script.js
- style/responsive.css
- style/responsive/* (all files)
- responsiveHeader.cfm
-
Include the CSS file
responsive.cssin the<head>section, after includingmaster.css. It's recommended to include this before any custom CSS file(s) so you can make changes through your own custom file. Make sure and swap out/admissions/for your own directory. Also, ensure theviewportmeta tag is included somewhere in this section.<head> ... <link href="/style/master.css" rel="stylesheet" type="text/css" media="screen" /> <!--Make the template responsive--> <meta name="viewport" content="initial-scale=1, minimum-scale=1, user-scalable=1"> <link href="/admissions/style/responsive.css" rel="stylesheet" type="text/css" media="screen" /> <link href="/admissions/style/custom.css" rel="stylesheet" type="text/css" media="screen" /> ... </head>
-
Include the JavaScript file in the
<head>section, after includingjQuery. It's recommended to include this before any custom JavaScript file(s) so you can make changes through your own custom file. Make sure and swap out "admissions" for your own directory.<head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="/admissions/js/responsive.script.js"></script> <script type="text/javascript" src="/admissions/js/custom.js"></script> ... </head>
-
Include the
responsiveHeader.cfmfile in your template on all pages just after including the mainsub-headerand before themain-container-global... <!-- Start Sub-Header --> <cfinclude template="/includes/sub-header.cfm" /> <!-- End Sub-Header --> <cfinclude template="/admissions/includes/responsiveHeader.cfm" /> <!-- Start Main Container --> <div id="main-container-global"> ...
That's it! Revew all your paths, make sure they are pointing to the right place. If you have any custom CSS, you should make responsive adaptations to it in your own custom CSS file. That way, if this global template code ever changes, you can simply replace your file to get the most recent version.
If you're new to responsive CSS, here's a great tutorial.