Xenharmonic Wiki

Help:Advanced formatting of wiki pages: Difference between revisions

VisualWikitext
Wikispaces>spt3125
**Imported revision 480987530 - Original comment: **
 
ArrowHead294 (talk | contribs)
15,213 edits
mNo edit summary
 
(8 intermediate revisions by 5 users not shown)
Line 1: Line 1:
<h2>IMPORTED REVISION FROM WIKISPACES</h2>
{{Wikipedia|CSS|JavaScript}}
This is an imported revision from Wikispaces. The revision metadata is included below for reference:<br>
CSS (Cascading Style Sheets) and [[JavaScript]] are generally involved in MediaWiki-based wikis. But while inline CSS is permitted, inline JavaScript is not available.  
: This revision was by author [[User:spt3125|spt3125]] and made on <tt>2014-01-06 21:21:04 UTC</tt>.<br>
: The original revision id was <tt>480987530</tt>.<br>
: The revision comment was: <tt></tt><br>
The revision contents are below, presented both in the original Wikispaces Wikitext format, and in HTML exactly as Wikispaces rendered it.<br>
<h4>Original Wikitext content:</h4>
<div style="width:100%; max-height:400pt; overflow:auto; background-color:#f8f9fa; border: 1px solid #eaecf0; padding:0em"><pre style="margin:0px;border:none;background:none;word-wrap:break-word;white-space: pre-wrap ! important" class="old-revision-html">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.


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>.
[[code]]
&lt;script type="text/javascript"&gt;
/*&lt;![CDATA[*/
document.write('&lt;style type="text/css"&gt; .wiki_table td { padding: 5px; } &lt;\/style&gt;');
/*]]&gt;*/
&lt;/script&gt;
[[code]]


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]] for experimentation.</pre></div>
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.
<h4>Original HTML content:</h4>
* <code>[[Special:MyPage/common.css|User:''YourName''/common.css]]</code>
<div style="width:100%; max-height:400pt; overflow:auto; background-color:#f8f9fa; border: 1px solid #eaecf0; padding:0em"><pre style="margin:0px;border:none;background:none;word-wrap:break-word;width:200%;white-space: pre-wrap ! important" class="old-revision-html">&lt;html&gt;&lt;head&gt;&lt;title&gt;Advanced formatting of wiki pages&lt;/title&gt;&lt;/head&gt;&lt;body&gt;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.&lt;br /&gt;
* <code>[[Special:MyPage/common.js|User:''YourName''/common.js]]</code>
&lt;br /&gt;
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 &amp;quot;Other HTML&amp;quot; Widget anywhere on the page, should do the trick:&lt;br /&gt;
&lt;!-- ws:start:WikiTextCodeRule:0:
&amp;lt;pre class=&amp;quot;text&amp;quot;&amp;gt;&amp;amp;lt;script type=&amp;amp;quot;text/javascript&amp;amp;quot;&amp;amp;gt;&amp;lt;br/&amp;gt;/*&amp;amp;lt;![CDATA[*/&amp;lt;br/&amp;gt;document.write('&amp;amp;lt;style type=&amp;amp;quot;text/css&amp;amp;quot;&amp;amp;gt; .wiki_table td { padding: 5px; } &amp;amp;lt;\/style&amp;amp;gt;');&amp;lt;br/&amp;gt;/*]]&amp;amp;gt;*/&amp;lt;br/&amp;gt;&amp;amp;lt;/script&amp;amp;gt;&amp;lt;/pre&amp;gt;
--&gt;
&lt;style type="text/css"&gt;&lt;!--
/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.text  {font-family:monospace;}
.text .imp {font-weight: bold; color: red;}
.text span.xtra { display:block; }


--&gt;
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>.
&lt;/style&gt;&lt;pre class="text"&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
/*&amp;lt;![CDATA[*/
document.write('&amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;gt; .wiki_table td { padding: 5px; } &amp;lt;\/style&amp;gt;');
/*]]&amp;gt;*/
&amp;lt;/script&amp;gt;&lt;/pre&gt;


&lt;!-- ws:end:WikiTextCodeRule:0 --&gt;&lt;br /&gt;
== See also ==
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 &lt;a class="wiki_link" href="/sandbox"&gt;sandbox&lt;/a&gt; for experimentation.&lt;/body&gt;&lt;/html&gt;</pre></div>
* [[JavaScript]]
* [[MediaWiki:Common.css]]
* [[MediaWiki:Vector.css]]
 
== External links ==
* [[MediaWikiWiki: Manual:CSS]]
* [https://www.w3schools.com/css/ W3Schools — CSS Tutorial]
* [[MediaWikiWiki: JavaScript]]
* [[MediaWikiWiki: Gadget kitchen]]
* [[MediaWikiWiki: Learning JavaScript]]
 
[[Category:Help]]
Retrieved from "https://en.xen.wiki/w/Help:Advanced_formatting_of_wiki_pages"