Help:Advanced formatting of wiki pages: Difference between revisions

From Xenharmonic Wiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
Wikispaces>FREEZE
No edit summary
+ link & update to existing ones
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
Using CSS and JavaScript, it is possible to have some additional control over the formatting of wiki pages that may not be possible with the tools provided by the standard interface.
{{Wikipedia|CSS|JavaScript}}
CSS (Cascading Style Sheets) and [[JavaScript]] are generally involved in MediaWiki-based wikis. But while inline CSS is permitted, inline JavaScript is not available.  


For example, Wikispaces offers few options for formatting tables. Let's say we want to add some padding to a table. The following code, inserted into an "Other HTML" Widget anywhere on the page, should do the trick:
Most HTML tags, such as <code>code</code>, <code>pre</code>, <code>div</code>, <code>span</code>, etc., can be directly embedded in the wiki markup; some HTML tags (for example <code>a</code> or <code>img</code>) cannot. For the allowed tags, you can define inline CSS by setting the <code>style</code> attribute, for instance <code><nowiki><span style="border: 1px solid grey; padding: 0 1em">framed sometext</span></nowiki></code>, which is rendered like this: <span style="border: 1px solid grey; padding: 0 1em">framed sometext</span>.


<pre>&lt;script type="text/javascript"&gt;
User-defined CSS and JavaScript are enabled on the Xenharmonic Wiki. If your personal solutions turn out to be useful for the overall wiki, they might be integrated into the site-wide styles or scripts.
/*&lt;![CDATA[*/
* <code>[[Special:MyPage/common.css|User:''YourName''/common.css]]</code>
document.write('&lt;style type="text/css"&gt; .wiki_table td { padding: 5px; } &lt;\/style&gt;');
* <code>[[Special:MyPage/common.js|User:''YourName''/common.js]]</code>
/*]]&gt;*/
&lt;/script&gt;</pre>


Other elements may perhaps be styled in this manner as well. Some trial and error and inspection of the page source will likely be needed to determine the proper ids and classes to use. Use the [[SandBox|sandbox]] for experimentation.
Use the [[SandBox]] for experimentation or start a page in the user namespace, in other words as a subpage of your user page, for example <code>[[Special:MyPage/Sandbox|User:''YourName''/Sandbox]]</code>.
[[Category:wiki_help]]
 
== See also ==
* [[MediaWiki: Common.css]]
* [[MediaWiki: Vector.css]]
* [[MediaWiki: Common.js]]
 
== External links ==
* [[MediaWikiWiki: Manual: CSS]]
* [[MediaWikiWiki: JavaScript]]
* [[MediaWikiWiki: Gadget kitchen]]
* [[MediaWikiWiki: Learning library #JavaScript]]
* [https://www.w3schools.com/css/ W3Schools | CSS Tutorial]
 
[[Category:Help]]

Latest revision as of 11:13, 22 July 2026

English Wikipedia has articles on:

CSS (Cascading Style Sheets) and JavaScript are generally involved in MediaWiki-based wikis. But while inline CSS is permitted, inline JavaScript is not available.

Most HTML tags, such as code, pre, div, span, etc., can be directly embedded in the wiki markup; some HTML tags (for example a or img) cannot. For the allowed tags, you can define inline CSS by setting the style attribute, for instance <span style="border: 1px solid grey; padding: 0 1em">framed sometext</span>, which is rendered like this: framed sometext.

User-defined CSS and JavaScript are enabled on the Xenharmonic Wiki. If your personal solutions turn out to be useful for the overall wiki, they might be integrated into the site-wide styles or scripts.

Use the SandBox for experimentation or start a page in the user namespace, in other words as a subpage of your user page, for example User:YourName/Sandbox.

See also

External links

Retrieved from "https://en.xen.wiki/index.php?title=Help:Advanced_formatting_of_wiki_pages&oldid=234458"