Compatible with DokuWiki

2013-12-08,2014-05-05

• Download
• Report bugs

Responsive, mobile-first template

Last updated on

2014-05-29

Repository

Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Tagged with clean, fixedheader, flat, minimal, mobile, responsive

By EricH

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 SIDR JQuery plugin and 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.

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.

I am writing this assuming you have some basic CSS/HTML knowledge. There are two main css files you will need to pay attention to; m1-screen.css is the main css file and has all of the style changes I made to the starter template, m1-mobile.css is the responsive css changes as the screen size increases. There is also another file called sidr.css which has all of the css for the side panels that display below 900px/768px.

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

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:

<!-- ********** 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>

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-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.

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:

<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 -->

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.

 <div class="m1-sidebox">
   <h3>Sidebar Title</h3>
   <p>Content here</p>
 </div>

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 fontawesome Plugin. Font Awesome is included in this template using this line of code:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

For the mobile menu I use a JQuery plugin called 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.

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.

I built the site using a mobile-first design ideology. What this means is that I built it so the styles are progressively enhanced as the screen size increases.

These are the base styles contained in m1-screen.css

This is for some large smartphones and smaller tablets. Increases the logo size and adjusts the spacing across the fixed header. Displays the section edit buttons again, these are set to display: none; on screen sizes less than 480px.

This is for most tablets in portrait mode. Turns off the left hand mobile menu and displays the basic tablet menu that is contained in m1-header.php. A menu item will NOT be displayed if it is tagged with a class “m1-desktop”. Be careful with the number of menu items you have that are not flagged with “m1-desktop” class as they could overflow the fixed header. Ideally you will have 3-5 items here.

This is for desktops, laptops, tablets in landscape. Turns off the right hand mobile menu and turns on the sidebar, breadcrumbs and menu items flagged “m1-desktop” class. Slightly adjusts search bar size.

I did not use the style.ini very much for this template so if you really want to customize the colours you will need to get your hands dirty in the CSS. All of the colour changes are contained in the files m1-screen.css and sidr.css. The two colours you most likely will want to change are the “bright green” (#00CB3D) h1 styles and the “dark blue” (#008BB3) used everywhere else on the site. The easiest way to do this will just be to do a search within the CSS file and replace these colours with ones you want.

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.

• http://www.paddlingabc.com/ – This is a heavily modified version of the template, I built the template specifically for this site

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…

It turned out this template messed with a file (local.php) in /conf. Restoring that file from a recent backup restored my starter template.

I am not a techie, but it seems this template doesn't play nice with my (basic) installation of dokuwiki.