Help:Advanced formatting of wiki pages: Difference between revisions

(10 intermediate revisions by 5 users not shown)

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

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~~>~~<script type="text/javascript">~~

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.

~~/*<!~~[~~CDATA~~[*/

* <code>[[Special:MyPage/common.css|User:''YourName''/common.css]]</code>

~~document~~.~~write(~~'~~<style type="text~~/css~~">~~ .~~wiki_table td { padding~~: ~~5px; } <\/style>~~');

* <code>[[Special:MyPage/common.js|User:''YourName''/common.js]]</code>

/*]]~~>*/~~

~~</script>~~</~~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 [[Xenharmonic Wiki: 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]]

@@ 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 [[Xenharmonic Wiki: 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]]

Help:Advanced formatting of wiki pages: Difference between revisions

FloraC (talk | contribs)