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: 341, 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: 159, 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: 110, 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: 104, 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

snippets.lol (Rating: 0, Comments: 0)

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

Level C-1018 (Rating: 2, Comments: 0)

ccbysa threepointzero


等级等級 0

  • 安全
  • 稳定
  • 实体绝迹


[[include :backrooms-wiki-cn:component:level-class

class 处的可用参数包括以下内容,支持简繁体及英文输入。
English 简体中文 繁體中文
0 1 2 3 4 5 0 1 2 3 4 5 0 1 2 3 4 5
unknown 未知 未知
habitable 宜居 宜居
deadzone 死区 死區
pending 等待分级 等待分級
n/a 不适用 不適用
amended 修正 修正
omega 终结 終結


[[include :backrooms-wiki-cn:component:level-class

lang 处选择语言,cn 表示简体中文,tr 表示繁体中文,不填默认选择简体中文。


[[include :backrooms-wiki-cn:component:level-class

使用 CSS 进行自定义:

你可以使用 CSS 进行额外的自定义,将代码放入到 [[module css]] 中或者是放入到页面的版式内都可以。在这一组件中,不要把 [[module css]] 放在 [[include]] 里面,把它放在那个的下面或者是页面的顶部或底部。
将这些代码放入到你的页面/版式中以编辑所有的颜色,因为组件的 |color= 部分仅能控制背景:

[[module css]]
.sd-container {
/* 字体 */
--sd-font: Poppins, Noto Sans SC, Noto Serif SC;

/* 边框 */
--sd-border: var(--gray-monochrome); /* 大多数等级 */
--sd-border-secondary: 0, 0, 0; /* 不适用 */
--sd-border-deadzone: 20, 0, 0; /* 死区 */

/* 标志 */
--sd-symbol: var(--sd-border) !important; /* 大多数标志 */
--sd-symbol-secondary: 255, 255, 255; /* 4 级以上的是白色 */

/* 文本 */
--sd-bullets: var(--sd-border) !important; /* 点句符文本颜色 */
--sd-text: var(--swatch-text-secondary-color); /* 顶部框文本颜色 */

/* 等级颜色 */
--class-0: 247, 227, 117;
--class-1: 247, 227, 117;
--class-1: 255, 201, 14;
--class-2: 245, 156, 0;
--class-3: 249, 90, 0;
--class-4: 254, 23, 1;
--class-5: 175, 6, 6;
--class-unknown: 38, 38, 38;
--class-habitable: 26, 128, 111;
--class-deadzone: 44, 13, 12;
--class-pending: 182, 182, 182;
--class-n-a: 38, 38, 38;
--class-amended: 185, 135, 212;
--class-omega: 25, 46, 255;



[[module css]]
.sd-container {
--sd-border: 90, 29, 27;
--sd-image: 90, 29, 27;
--sd-symbol: 90, 29, 27;

练习的草稿文本(1145141919810) (Rating: 2, 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: 10, 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: 11, 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: 3, Comments: 0)


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

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License