DokuWiki

It's better when it's simple

User Tools

Site Tools


template:m1

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
template:m1 [2014-03-22 18:26] EricHtemplate:m1 [2023-06-17 18:43] (current) – screenshot Aleksandr
Line 5: Line 5:
 author        : EricH author        : EricH
 email         : ehowey@gmail.com email         : ehowey@gmail.com
-lastupdate_dt : 2014-03-22 +lastupdate    : 2014-05-29 
-compatible    : Binky+compatible    : 2013-12-08,2014-05-05
 depends       : depends       :
 conflicts     : # prefix templates by template: conflicts     : # prefix templates by template:
 similar       : similar       :
-screenshot_img: https://raw.githubusercontent.com/ehowey/m1/master/m1-ss.png +tags          : responsive, mobile, fixedheader, flat, clean, minimal
-tags          : responsive, mobile+
  
 downloadurl   : https://github.com/ehowey/m1/archive/master.zip downloadurl   : https://github.com/ehowey/m1/archive/master.zip
Line 17: Line 16:
 sourcerepo    : https://github.com/ehowey/m1/ sourcerepo    : https://github.com/ehowey/m1/
 donationurl   : # eg. https://www.paypal.com/... donationurl   : # eg. https://www.paypal.com/...
 +
 +screenshot_img: https://raw.githubusercontent.com/alexwenzel/m1/master/m1-ss.png
 ---- ----
 +
  
 This is a responsive and mobile-first template built with a fixed header and flexible content.  This template is still in development but is functional at this point.  It is built off of the starter template and incorporates the [[http://www.berriart.com/sidr/|SIDR JQuery plugin]] and [[http://fontawesome.io/|Font Awesome Icons]].  In this release version it is setup for one main content panel and a sidebar on the right that appears at screen sizes greater than 900px.  The breakpoints I am using for the content are: 480px, 768px, and 900px.  I know the CSS code isn't perfect at this point, this is my first attempt at a template.  Many thanks to all of the help files on this site and the dedicated developers for Dokuwiki. This is a responsive and mobile-first template built with a fixed header and flexible content.  This template is still in development but is functional at this point.  It is built off of the starter template and incorporates the [[http://www.berriart.com/sidr/|SIDR JQuery plugin]] and [[http://fontawesome.io/|Font Awesome Icons]].  In this release version it is setup for one main content panel and a sidebar on the right that appears at screen sizes greater than 900px.  The breakpoints I am using for the content are: 480px, 768px, and 900px.  I know the CSS code isn't perfect at this point, this is my first attempt at a template.  Many thanks to all of the help files on this site and the dedicated developers for Dokuwiki.
 +
 +===== Download and Install ======
 +
 +Use the following URL to download this template:
 +
 +  * https://github.com/ehowey/m1/archive/master.zip
 +
 +Refer to [[:template]] on how to install and use templates in DokuWiki.
  
 ===== Customizing the Template ===== ===== Customizing the Template =====
Line 26: Line 36:
 Within the template itself there are a few main .php files to pay attention to:\\ Within the template itself there are a few main .php files to pay attention to:\\
 **main.php:** Which has all of the basic php and html and includes the other necessary files in it.  This is the framework for the template\\ **main.php:** Which has all of the basic php and html and includes the other necessary files in it.  This is the framework for the template\\
 +
 +==Google Analytics==
 +There is a Google-Analytics-Script in main.php. If you don't want it: You can remove it by deleting the script under the comment-line completely:
 +
 +<code><!-- ********** GOOGLE ANALYTICS ********** -->
 + <script type="text/javascript">
 +  var _gaq = _gaq || [];
 +  _gaq.push(['_setAccount', 'UA-16741284-1']);
 +  _gaq.push(['_setDomainName', 'paddlingabc.com']);
 +  _gaq.push(['_trackPageview']);
 +  (function() {
 +    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +  })();
 + </script>
 +</code>
 +
 **m1-header.php:**  This contains the html for the fixed header and for the tablet/desktop menus\\ **m1-header.php:**  This contains the html for the fixed header and for the tablet/desktop menus\\
 **m1-mobilemenu.php:**  This file contains the left and right slide panel menus that display when viewed on smaller screen sizes\\ **m1-mobilemenu.php:**  This file contains the left and right slide panel menus that display when viewed on smaller screen sizes\\
 **m1-sidebar-one.php:**  This file contains the sidebar html that displays above 900px, by using an html file you have some more flexibility for what you display in the sidebar.  It is still possible to just have the sidebar in a dokuwiki page which you can setup in the configuration settings for the template.\\ **m1-sidebar-one.php:**  This file contains the sidebar html that displays above 900px, by using an html file you have some more flexibility for what you display in the sidebar.  It is still possible to just have the sidebar in a dokuwiki page which you can setup in the configuration settings for the template.\\
 **m1-footer.php:**  Footer information.\\ **m1-footer.php:**  Footer information.\\
 +
 +==== Sidebars ====
 +This template behaves a bit differently than your typical Dokuwiki template with respect to the sidebar and how it is setup.  If you are using this template you will may need to tweak your sidebar setup.  For examples of adding content to your sidebar see the file **m1-sidebar-one.php**.  This .php file is automatically used to build the sidebar.  The code in main.php for the sidebars looks like this:
 +<code>
 +<div id="dokuwiki__aside">
 +        <?php tpl_includeFile('sidebarheader.html') ?>
 +        <?php tpl_include_page(tpl_getConf('sidebar1'), 1, 1) /* includes the nearest sidebar page */ ?>
 +        <?php tpl_includeFile('m1-sidebar-one.php') ?>
 +        <?php tpl_includeFile('sidebarfooter.html') ?>
 +        <div class="clearer"></div>
 +</div><!-- /aside -->
 +</code>
 +
 +Notice the order of the file inclusions and the default dokuwiki hooks.  In the site configuration you can set a dokuwiki page to include BEFORE m1-sidebar-one.php.  If you want to change the order just switch the order of the includes in the main.php file.
 +
 +Currently the sidebar is set to have a minimum content width of 300px which is a typical sidebar width for any advertising, etc.  You can adjust this easily in the CSS.
 +
 +Note that the sidebar is designed with content blocks.  Any content you add in should be wrapped in the following class "m1-sidebox" You can see this in action when you look at m1-sidebar-one.php.
 +<code>
 + <div class="m1-sidebox">
 +   <h3>Sidebar Title</h3>
 +   <p>Content here</p>
 + </div>
 +</code>
 +
 +==== Font Awesome ====
 +For information on using Font Awesome in the html/php environment see [[http://www.fontawesome.io]].  For using Font Awesome within the Dokuwiki syntax please see the [[plugin:fontawesome|fontawesome Plugin]].  Font Awesome is included in this template using this line of code:
 +<code>
 +<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 +</code>
 +       
 +==== Sidr/Mobile Menus ====
 +
 +For the mobile menu I use a JQuery plugin called [[http://www.berriart.com/sidr/|Sidr]] which provides sliding panel menus reliant on JQuery.  There is a fair amount of help information available on the Sidr website.  I chose this plugin over others as it was simple, straightforward and well maintained.  I am not convinced it is the best implementation of sliding panel menus but it is certainly one of the better ones.  To setup or change your mobile menus you will need to adjust the file **m1-mobilemenu.php**.  It should be fairly self explanatory.  The menu on the left provides actual navigation items and the menu on the right provides the site tools such as login etc.  This menu is ONLY displayed when using the sliding tabs.
 +
 +==== Desktop/Tablet Menu ====
 +You can configure this via **m1-header.php**.  Notice that there is a class "m1-desktop" assigned to one of the <li> items.  If you give a <li> the class "m1-desktop" then it will only be displayed on screen sizes greater than 900px.  The utility of this feature is to ensure that your menu does not become bloated on smaller tablet sized screens.  So for instance your menu may have a "Products", "About", and "Help" link that are always visible on screens 768px and above while the menu items "Contact" and "Blog" only become visible to users at 900px and above due to being assigned the class "m1-desktop".
 +
 +In order to create drop down menus you need to assign the class "has sub" to the containing <li> This will automatically add in a "+" symbol beside the link text.  There is an example of this already included in the base template files.  
  
 ==== Media Query Breakpoints Explained ==== ==== Media Query Breakpoints Explained ====
Line 54: Line 121:
 If you want to add your own logo just place a logo.png or logo.jpg file in the m1/images folder.  This logo should proportional to a 410x60px image.  This is what the CSS is setup to accomodate.  If you deviate from these dimensions I can't make any guarantee about how the fixed header would accomodate it.  If you do want to change the dimensions of the logo you could easily adjust the css sizing of the fixed header portion of the site. If you want to add your own logo just place a logo.png or logo.jpg file in the m1/images folder.  This logo should proportional to a 410x60px image.  This is what the CSS is setup to accomodate.  If you deviate from these dimensions I can't make any guarantee about how the fixed header would accomodate it.  If you do want to change the dimensions of the logo you could easily adjust the css sizing of the fixed header portion of the site.
          
-===== Download and Install ====== 
  
-Use the following URL to download this template:+===== Sites using this Template =====
  
-  * https://github.com/ehowey/m1/archive/master.zip+  * http://www.paddlingabc.com/ -- This is a heavily modified version of the template, I built the template specifically for this site
  
-Refer to [[:template]] on how to install and use templates in DokuWiki.+===== Caution ===== 
 +I tried this template 20170208. This template wasn't for me, so I decided to go back to the starter template. But now the standard template was messed up..
  
-===== Sites using this Template =====+It turned out //this// template messed with a file (local.php) in /conf. Restoring that file from a recent backup restored my starter template.
  
-  * http://www.paddlingabc.com/ -- This is modified version of the templateI built the template specifically for this site+I am not techiebut it seems this template doesn't play nice with my (basic) installation of dokuwiki.
template/m1.1395509217.txt.gz · Last modified: 2014-03-22 18:26 by EricH

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki