See Getting started: How to create a Website
- Basic Options
- Primary Node
- Menu Structure
- Homepage sub-menu
- Special Nodes
- Personal Design
- Personal Domain
- Music & Video
- Add Live Chat
- One-page Wonders
- Extra Footers
These can be accessed by right-clicking the "S" in the top-right next to the sharing icon .
The primary node serves as the homepage. It's title is the website's title, and its content is homepage content. Simple.
Anything not attached to the primary node will not be visible in the menu, but may still be linked to. Make personal notes this way.
Menus are ordered based on the distance of each item from its parent - closest first. To reorder them, move them closer or further from their parent.
Children of the primary base node will serve as pages and be ordered on the menu. Their children will make up sub-menus.
To create a sub-menu on the homepage, attach a node titled "/" (no quotes) to the primary node and any of its children will be used for the sub-menu of the homepage. Because children of the base node are used to formulate the menu. Easier done than said.
Using this node the browser title (not the title visible on the page, but the text visible on a browser's tab) of a website will be the text contained within it.
Adds a subtitle element at the top of the page.
Place an @ at the beginning of a node to place an email popup in your menu along with your pages. See "Contact" at the top of this page for a working example.
Place a search box in your menu. "Text" (optional) is the placeholder text.
FontAwesome classes will automatically be converted to icons. For example, fa-rocket will be replaced with , a rocket.
On your menu it would appear as Text.
Here's a List of FontAwesome classes. (Prefix them with fa-.)
Surround with parentheses to create a pill or call-to-action button.
(@Text) for an email pill.
Any nodes that begin with these titles (i.e. "[css]" or "[css] 1" or "[css] stars") will insert the code of this node into the head tag of the website. So you can store <script>some code</script> that you wish to include or <style>custom style</style> (in addition to the main CSS).
[bdiv] ID Experimental
Creates a persistent <div> injected at the bottom of the main #b <div>. This is useful for certain advanced scenarios. "ID" will be id of the <div> for applying CSS and practical visual organization.
Shortcode is used in the content of notes to create special elements.
Spaces_in_text need to be replaced with an underscore _.
Most parameters are optional.
[mail title=t class=t email=t header=t]
Display a button to open a form for sending you e-mail.
Class may be used to apply custom css classes to the button.
Email sends to another email address.
Header changes the title on the form. See example.
See advanced forms for more options.
[feed url=t limit=n]
Display an rss feed.
[calendar id=t limit=n title=t]
A feed of Google Calendar entries. (calendar must be made public)
To find an id, See: Get your calendar address. ID will be contained within the address and will look like: jiaqbf8ajdf5g%40group.calendar.google.com
[tagcloud title=t s=date e=date nodate=1 maxsize=n nosize=1 list=1 hideuntagged=1 url=t]
Display a "tag cloud" based on currently set tags. Optional parameters:
s = start date.
e = end date.
nodate = hide date range text if specifying a date.
maxsize = maximum font size.
nosize = no automatic font size variation.
list = display as a list instead of a cloud.
hideuntagged = hide "untagged" if set.
url = direct links to a specific page, where /?tag=elf becomes /url?tag=elf) Useful in some instances.
Include another node (e.g. contents or scripts).
(Shift+right-click > "Copy ID" to find a node's id.)
[list id=node_id class=t,t]
List all children (2 levels) of node_id. If no id is provided, children of that page will be listed.
class = Apply additional classes to the UL element. (comma separated)
[random id=node_id class=t,t]
Display a random paragraph (<p> or <div>) from the specified node's content.
Or, if the node is empty, display the title of a random child node.
This can be used to show a random quote, or "tip of the day", for example.
class = Apply additional classes to the base element. (comma separated)
Show a search box.
title = placeholder text.
If you need to exclude a published node from search results for whatever reason (e.g. includes, ajax data), it can be prefixed with an exclamation (e.g. !Title).
Embed Google translate on your site (as on top of this page). Place in a [footer] node so it will show on every page, and position with CSS. Show example css
lang = optional 2 letter language code if original site is not English.
Personal Design & CSS Customization
Nearly all aspects of design can be customized via CSS, and edited from within the website (Click Styler hidden in the top-right corner, or press Ctrl+F12.), or start with a pre-made template. Must be signed in and owner.
With the Style Editor open, hold shift to show element path, id, and classes. Ctrl-click path to hide them.
Web Address & Domains
There are several options when it comes to domains.
- myname.com – Use your own. Send an email to get that setup.
- myname.mind.im – Your own sub-domain, just like sky.mind.im.
- 1234.mind.im – Numeric. This is default and always exists. It can also be useful when want something short even if you're using one of the others.
Individual page addresses, such as sky.mind.im/mypage can be set in Publisher.
Create a one-page, multi-section website (like this) by adding child nodes that start with a #number sign. (Order is determined by distance from parent.) Example:
Insert <script>$('body').addClass('ajax');</script> into the HTML of a homepage or a footer. This feature is experimental and the method may change or be simplified in the future.
Want to add unique footers to specific pages? Title nodes in the following way...
Contents of this node are added to the foot of the page mysite.mind.im/about-us.
This node would be added to mysite.mind.im/2689.
This would added to the foot of a page where someone has searched for Unicorns.
Contents of this node are added to the homepage only.
(Others... footer?cat= footer?item= footer?brand=)