|
|
| (26 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | ==About MediaWiki Markup== | + | <div class="uk-grid uk-grid-medium" data-uk-grid-margin data-uk-grid-match="{target: '.uk-panel'}"> |
| − | Mediawiki have a very strong markup so try to keep it as simple as possible<br/>
| + | |
| | | | |
| − | ===H2 H3 H4 and H5 tags=== | + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| − | To create headings on the page, you need to use desired numbers of '''=''' character<br/>
| + | <div class="uk-panel uk-panel-box"> |
| − | <nowiki>==This is the H2 Heading==</nowiki><br/> | + | <div class="header header-plain">Wiki Markup</div> |
| − | <nowiki>===This is the H3 Heading===</nowiki><br/> | + | <div class="block"> |
| − | <nowiki>====This is the H4 Heading====</nowiki><br/> | + | * [[H Tags]] |
| − | <nowiki>=====This is the H5 Heading=====</nowiki><br/> | + | * [[Text Formatting]] |
| − | H1 heading is also available by
| + | * [[Lists]] |
| − | <nowiki>=This is the H1 Heading=</nowiki><br/>
| + | * [[Files and images]] |
| − | '''but do not use this heading in your articles under any circumstances'''<br/>
| + | * [[Links]] |
| − | It is the same as page title, and can be confusing
| + | </div> |
| | + | </div> |
| | + | </div> |
| | + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| | + | <div class="uk-panel uk-panel-box"> |
| | + | <div class="header header-plain">CSS styles</div> |
| | + | <div class="block"> |
| | + | * [[Bootstrap Alerts]] |
| | + | * [[Bootstrap Popovers]] |
| | + | * [[Bootstrap Tooltips]] |
| | + | * [[Custom CSS]] |
| | + | * [[Custom JS]] |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| | + | <div class="uk-panel uk-panel-box"> |
| | + | <div class="header header-plain">Supported Extensions</div> |
| | + | <div class="block"> |
| | + | * [[Code HighLight]] |
| | + | * [[Video Embeed]] |
| | + | * [[Image Embeed]] |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| − | ===New Paragraph===
| + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| − | MediaWiki ignores normal line breaks. To start a new paragraph, leave an empty line. <br/>
| + | <div class="uk-panel uk-panel-box"> |
| − | To start a new line you must use '''<nowiki><br/></nowiki>''' HTML tag at the end of previous line
| + | <div class="header header-plain">Template Specific Pages</div> |
| − | | + | <div class="block"> |
| − | ===Bullet List=== | + | * [[Special pages of the template]] |
| − | To create bullet list simply use '''<nowiki>*</nowiki>''' character<br/>
| + | * [[Bootstrap:Footer]] |
| − | ''' syntax'''
| + | * [[Bootstrap:TitleBar]] |
| − | <pre>* Bullet 1
| + | * [[Bootstrap:Subnav]] |
| − | * Bullet 2
| + | * [[Template:Alert]] |
| − | * Bullet 3
| + | * [[Template:Tip]] |
| − | ** Bullet 3 point 1
| + | * [[Template:Pop]] |
| − | ** Bullet 3 point 2
| + | </div> |
| − | </pre>
| + | </div> |
| − | '''Will give you:''' <br/>
| + | </div> |
| − | * Bullet 1
| + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| − | * Bullet 2
| + | <div class="uk-panel uk-panel-box"> |
| − | * Bullet 3
| + | <div class="header header-plain">Design Elements</div> |
| − | ** Bullet 3 point 1
| + | <div class="block"> |
| − | ** Bullet 3 point 2
| + | * [[Visual Elements]] |
| − | | + | * [[Scafolding]] |
| − | ===Numbered List===
| + | </div> |
| − | To create numbered list simply use '''<nowiki>#</nowiki>''' character<br/>
| + | </div> |
| − | ''' syntax'''
| + | </div> |
| − | <pre># Number 1 | + | <div class="uk-width-1-1 uk-width-small-1-2 uk-width-xlarge-1-3"> |
| − | # Number 2
| + | <div class="uk-panel uk-panel-box"> |
| − | # Number 3
| + | <div class="header header-plain">Template Overrides</div> |
| − | ## Number 3 point 1
| + | <div class="block"> |
| − | ## Number 3 point 2
| + | * [[Helper Templates]] |
| − | </pre> | + | * [[Custom Alerts]] |
| − | '''Will give you:''' <br/>
| + | </div> |
| − | # Number 1
| + | </div> |
| − | # Number 2
| + | </div> |
| − | # Number 3
| + | </div> |
| − | ## Number 3 point 1
| + | |
| − | ## Number 3 point 2
| + | |
| − | | + | |
| − | =====Mixture of bulleted and numbered list===== | + | |
| − | You can also use the mix of numbers and bullets, but try to avoid them
| + | |
| − | | + | |
| − | ===Code===
| + | |
| − | While Mediawiki supports '''<nowiki><code></nowiki>''' tag, in our wiki, we will use this instead
| + | |
| − | <pre><syntaxhighlight lang="php"> | + | |
| − | enter code here
| + | |
| − | </syntaxhighlight>
| + | |
| − | <br/></pre>
| + | |
| − | This will allow us to have differently highlighted pieces of codes for different languages<br/>
| + | |
| − | '''Note on <nowiki><br/></nowiki> tag:''' It seems that extension used for syntax highlighting don't add the new line when it finishes the code, so only for the sake of visual appeal, use it all the time.
| + | |
| − | | + | |
| − | ====Starting a new line with a space====
| + | |
| − | if you start a new line with space, it will be displayed like this. Pay extra attention about it.
| + | |
| − | | + | |
| − | ==About Images==
| + | |
| − | In wiki guides and explanations, try to use as many images as possible, but dont go crazy with them. Try to explain as many things as possible with one single image.<br />
| + | |
| − | As an wiki admin, you can access the media upload by visiting the [[Special:Upload]] page. <br/>
| + | |
| − | To see list of all files that are already uploaded to wiki, visit this page [[Special:ListFiles]]<br/>
| + | |
| − | The list of already available files is particularly useful for those images that can be reused in different tutorials.<br/>
| + | |
| − | For example, you dont have to upload new file to show user how to access JomSocial configuration page as this file already exist.
| + | |
| − | | + | |
| − | [[File:jsconfigmenu.png|250px]]<br /> | + | |
| − | '''Note''' - the image is resized for the purpose of this help. You wont resize images in your articles as you want users to clearly see what to do without clicking the image thumb.<br/>
| + | |
| − | [[Setting Up Photo Galleries|Example]]<br/> | + | |
| − | You can also upload your reusable images, but try to reuse them as much as you can whenever is possible.
| + | |
| − | | + | |
| − | For every new article that will include some Back End image, use the images from Joomla 3. Make sure that name of your test site is '''JomSocial Docs''' as shown on the image above.<br/>
| + | |
| − | If you're about to post image regarding external source, please use alert like on [[Setting up Cron Job|this example]]
| + | |
| − | | + | |
| − | ===Using images in articles===
| + | |
| − | To use the image in the article, you will need to know exact filename and the extension of file you want to use<br/>
| + | |
| − | * syntax | + | |
| − | <pre>[[File|filename.jpg]]</pre>
| + | |
| − | | + | |
| − | ==Links and linking==
| + | |
| − | MadiaWiki uses unique method to link the internal pages. You will have to know exact title of the page in order to link it properly.<br/>
| + | |
| − | Lets try to create link to some of the wiki pages<br/>
| + | |
| − | For example, this one http://documentation.jomsocial.com/wiki/JomSocial_User_Object
| + | |
| − | | + | |
| − | To link it properly, you will use this syntax
| + | |
| − | <pre>[[JomSocial User Object|title for our internal link]]</pre> | + | |
| − | It will be shown like this<br/>
| + | |
| − | [[JomSocial User Object|title for our internal link]] | + | |
| − | | + | |
| − | You can also use the simpler syntax
| + | |
| − | <pre>[[JomSocial User Object]]</pre>
| + | |
| − | which will lead to a same page and will be displayed like this [[JomSocial User Object]] but try to avoid single name formating as it can potentially limit us in the future<br/>
| + | |
| − | For example, look at the [[Photos & Videos Documentation]] and notice how we have two menus with same name '''Frontend Moderation Options''' which both leads to different location<br/>
| + | |
| − | Mediawiki understand web links, as you might noticed already. If you need to paste web link, you can freely do it. Also, you may do it like this
| + | |
| − | <pre>[http://www.jomsocial.com Link to JomSocial Site]</pre>
| + | |
| − | and this will give you <br/>
| + | |
| − | [http://www.jomsocial.com Link to JomSocial Site]
| + | |
| − | | + | |
| − | ==About Alerts==
| + | |
| − | There are 4 types of alerts available in bootstrap. These are
| + | |
| − | * danger or error
| + | |
| − | * info
| + | |
| − | * success
| + | |
| − | * no class
| + | |
| − | | + | |
| − | ====Danger Alert==== | + | |
| − | Use this alert when you want to make clear that user should be extra careful, or something is highly important
| + | |
| − | * syntax
| + | |
| − | <pre>{{alert|<strong>Warning:</strong> This is the warning|alert-danger}}
| + | |
| − | or
| + | |
| − | {{alert|<strong>Warning:</strong> This is the warning|alert-error}}</pre>
| + | |
| − | * output
| + | |
| − | {{alert|<strong>Warning:</strong> This is the warning|alert-danger}}
| + | |
| − | | + | |
| − | ====Info Alert==== | + | |
| − | When you need to add some info notices, use this alert
| + | |
| − | * syntax
| + | |
| − | <pre>{{alert|<strong>Info:</strong> This is the info|alert-info}}</pre>
| + | |
| − | * output
| + | |
| − | {{alert|<strong>Info:</strong> This is the info|alert-info}}
| + | |
| − | | + | |
| − | ====Success Alert==== | + | |
| − | Also known as '''happy alert''' is used when you need to outline something good or useful
| + | |
| − | * syntax | + | |
| − | <pre>{{alert|<strong>YAY:</strong> That is great success|alert-success}}</pre>
| + | |
| − | * output | + | |
| − | {{alert|<strong>YAY:</strong> That is great success|alert-success}}
| + | |
| − | | + | |
| − | ====No Class Alert====
| + | |
| − | This is the default bootstrap alert.Use it when you have something important to outline, but its not dangerous to proceed with
| + | |
| − | * syntax
| + | |
| − | <pre>{{alert|<strong>Default:</strong> No class|alert}}</pre>
| + | |
| − | * output
| + | |
| − | {{alert|<strong>Default:</strong> No class|alert}}
| + | |
| − | | + | |
| − | ==Popovers==
| + | |
| − | If you really want to go fancy with your articles, you can use bootstrap popovers, but im not sure how well popovers play on touchscreens, so, avoid them :)
| + | |
| − | * syntax
| + | |
| − | <pre>{{pop|Whatever triggers the popover|Popover Title|Popover Content}}</pre>
| + | |
| − | * output
| + | |
| − | {{pop|Whatever triggers the popover|Popover Title|Popover Content}}
| + | |
