Snippets is a site both created by Wikidot and its community. This is a place where you can find (or add) code snippets that can be used when creating your own pages at Wikidot.com. Code snippets are an easy way to improve your own wiki sites and to make it more attractive and functional. Embedding media, both audio and video, adding spreadsheets, making eye-candy menus is as easy as never before.

> > > > All Tags !

Add a new snippet or solution

Adding a snippet is easy.

  • First, think of some name for your snippet
  • Create a page (using the form below)
  • Assign page tags to the created page
  • Please do not use this site for testing.
  • Use the Sandbox for testing.

Highest Rated Snippets

Collapsible Text Block (Rating: 338, Comments: 40)

This solutions will show you how to make nice collapsible text blocks. What for? See the examples, you should know.

Foldable List (Rating: 205, Comments: 21)

Do you like a foldable list from My Account or Site Manager? Create your own!

Tabs (Rating: 157, Comments: 88)

This solution will show you how to create tabs.

Layout With Tables (Rating: 143, Comments: 91)

A nice way to add advanced layout control using the [[table]] tag. The example uses the style attribute for the whole table and particular cells to adjust layout.

Adding A Site Logo (Rating: 108, Comments: 38)

This snippet lets you add a logo to the site by creating a custom CSS.

Include Any Page (Rating: 107, Comments: 38)

Here is a way to include ANY page within your Wiki page using an [[iframe]] element.

Google Gadgets (Rating: 103, Comments: 27)

Google now offers tons of gadgets one can embed into web pages. The directory of gadgets is available at:

Extra Side Bar (Rating: 101, Comments: 8)

Creates an extra side-bar using the floating div element. It is quite easy if you know CSS.

Automatic Sitemap (Rating: 100, Comments: 22)

It is quite important to have a nice and clean structure of the site. One of the best ways to do maintain such a structure is to use the "parent page" relation. This allows to:

  • display breadcrumb navigation element within pages
  • make nice sitemaps and listings

Multicolumn Layout (Rating: 90, Comments: 26)

OK, so you want a multicolumn layout. Unfortunately there are no special wiki tags for multicolumn layout but the result can be easily achieved using the [[div]] tags and adding CSS style to it.

Recently Added Snippets

练习的草稿文本(1145141919810) (Rating: 1, Comments: 1)

if a == 1919810 :
insert the code here

new cornify (Rating: 0, Comments: 0)

an update of cornify.

To add tabs to your sandbox so you can have multiple drafts, use the following code: tabview tab Title 1 Text goes here (Rating: 2, Comments: 3)

its an idea i had for an scp its kinda stupid but thats okay

Text changes colors (Rating: 9, Comments: 0)

put description what kind of problem does the solution solve and how

Column Layouts with CSS Grid (Rating: 2, Comments: 0)

Although for a long time there have been ways to create 2-column layouts for your site, none are more effective or efficient than CSS3 Grid Layout. Here, you can see how to use it to create 2 columns, with a gap between them!

测试页面SCP (Rating: 10, Comments: 3)

[[include :scp-wiki-cn:component:customizable-acs
|risk-class= yggdrasil
|risk-image= https://scp-wiki.wdfiles.com/local--files/calibri-s-mega-cool-art-page-it-s-mostly-just-icons-but-what/Yggdrasil.svg
|risk-color= 0,0,255
|inc-risk= —]]]

Do not try in life 2 (Rating: 0, Comments: 1)

put description what kind of problem does the solution solve and how

Do not try in life (Rating: 2, Comments: 0)


/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;

Include Without iframe (Rating: 1, Comments: 0)

Sometimes the <iframe> element is not what you need, when showing something from another Wikidot page. One example is putting in CSS from a different Wikidot page. Or if the page has a lot of info, and you don't feel like copy/pasting.

Table Of Contents (Rating: 4, Comments: 1)

A Table Of Contents is a block which can be put so that you can skip between chapters or headings without scrolling down to your favourite chapter or place.A Table Of Contents can be written in CSS as:


But now after you put this nothing happens as your Table Of Contents is empty, to fix this, put some headings and now you're ready!
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License