MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 14:10, 13 Jul 2012 by Howleyda
MindTouch Community Portal > MindTouch Community Portal > Documentation > MindTouch > Skinning > Beech - Theming/Skinning MindTouch > Step By Step Tutorial to Skin/Theme MindTouch using Beech
Page Notifications Off
Was this page helpful?

Step By Step Tutorial to Skin/Theme MindTouch using Beech

    Views: 

     

     

    developer.mindtouch.com is a community contributed help site for MindTouch Core only. Supported MindTouch TCS documentation can be found at help.mindtouch.us

    Beech has been designed to provide the easiest and most flexible approach to skinning MindTouch.  Here are some basic steps to get you started that should give you the flexibility you've been looking for.

    Requirements for this Tutorial:

    1. Root Access to your MindTouch
    2. HTML experience
    3. CSS experience

     

    Table Of Contents

    1. 1. Changing the Markup (HTML)
    2. 2. Changing the Style (CSS)
    3. 3. Changing the JavaScript

     

    Changing the Markup (HTML)

    The Beech theme comes with a skin called pale which is a really simple base skin to get you started.  Use the following instructions to start modifying the HTML

    1. Go to \var\www\dekiwiki\skins\beechbeta\pale
    2. Open html.php
    3. Start making changes to the HTML
      1. TIP:  Anything inside the <?php     ?> is a Beech PHP function
      2. Get familiar with the Beech PHP function reference
    4. Save your changes and refresh your browser (with MindTouch loaded of course) to test your changes

     

    Changing the Style (CSS)

    In conjunction with Step 2 you may also want to modify the CSS of your skin.  As mentioned earlier, Beech comes with a base skin designed to serve as a starting point for you.  There are two primary CSS files:

    1. _content.css - the css use for the user contributed content and during edit mode
    2. _style.css - the 'chrome' or overall look and feel css (you'll spend a lot more time in this file)

     

    Use the following instructions to modify the CSS. 

    1. Go to \var\www\dekiwiki\skins\beechbeta\pale
    2. Open _style.css
    3. Modify / Add CSS as you see fit
    4. Save your changes and refresh your browser (with MindTouch loaded of course) to test your changes

     

    Changing the JavaScript

    As you start to develop advanced MindTouch designs you will more than likely want to use JavaScript.  JavaScript is great for adding simple form logic, animations, menus, tooltips and more.  If you require numerous JavaScript files you will need to modify head.php (\var\www\dekiwiki\skins\beech\head.php)

    The Beech theme initially references one JavaScript file that you can modify, javascript.js.  Use the following instructions to start making javascript changes.

    1. Go to \var\www\dekiwiki\skins\beechbeta\pale
    2. Open javascript.js
    3. Modify / Add javascript as you see fit
      1. TIP:  Learn JQuery, MindTouch has the JQuery library installed by default.  It will save you time, effort and trouble.
    4. Save your changes and refresh your browser (with MindTouch loaded of course) to test your changes
    Was this page helpful?
    Tag page
    What links here

    Files 0

    Attach file or image
     
    Viewing 6 of 6 comments: view all
    #1
    travellingwithoutmoving says:
    @Howleyda This looks amazing! I could actually see myself wanting to skin MindTouch with this approach. How easy would it be to port the CSS from say the Fiesta PRO olive skin to this skin (as that's the one I'm using for the main site I'm developing at the moment)? How different is the style.css file between the two (I know I could just look, but I'm lazy...)
    Posted 08:22, 12 Dec 2009
    #2
    Howleyda says:
    travellingwithoutmoving, that brings up an excellent idea. I may try to recreate some of the fiesta look & feel in beech. It shouldn't be very challenging. I'll let you know if I make any progress.

    The styles are different but that is not a big issue because of how flexible beech is.
    Posted 16:18, 25 Jan 2010
    #3
    PIersYoung says:
    Hi - looks great . But having problems installing it. Get the following werror (IIS6 and Win 2003)
    "PHP Parse error: syntax error, unexpected $end in C:\Program Files\MindTouch\web\skins\beech\pale\html.php on line 164"

    Am I doing something stupid?
    Posted 03:25, 26 Jan 2010
    #4
    timothy.high says:
    I tried adding the JQuery UI and Deki Ajax API scripts via the Control Panel, and it had no effect. Is there something I need to add to the templates (head.php, etc.) in order for it to recognize control panel scripts?
    Posted 06:46, 27 Jan 2010
    #5
    Howleyda says:
    timothy.high, I added both the Jquery UI and Deki Ajax API successfully to a new VM running beech. Once installed I added the TODO template which uses both extensions. It too worked successfully. When did you download beech.zip? From my tests this doesn't seem to be a skin related issue, although I will continue to help you get it resolved.

    -Damien
    Posted 10:42, 27 Jan 2010
    #6
    yellowshed says:
    I cannot seem to make any changes to the theme.
    i have edited the html.php saved it and refreshed the browser and i still get the same theme.
    I have tried this with all files and still nothing.

    What am i doing wrong?
    Posted 23:54, 20 Oct 2010
    Viewing 6 of 6 comments: view all
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by