このページの批評は終了しました。
Advanced Formatting and You
Greetings and salutations. If you're reading this page, you're probably here to learn how to do fancy things with wikidot coding!
This essay is intended for anyone who wants to move beyond basic bolding, italics, and collapsibles. I'll be going over those as well, however, most of this guide is intended to be used for advanced design for articles.
If you're looking for more basic formatting, ghostchibi did a kick-ass write up here.
Some examples of what you can accomplish with the things covered in this guide are located in several of my SCPs, such as SCP-3872 and SCP-027-J.
If you have any questions about sections of this guide, please send me a wikidot PM!
Section 1: Basic Wikidot Formatting Tricks
Some of the basic wikidot code itself is kind of tricky, and isn't necessarily explained perfectly. These are the two pieces I get the most questions on:
Quoteblocks
Tabs
Hey, hey Magnus, this page over here has this really awesome bit of formatting and I wanna use it. teach me how!
Well, random citizen, it's easier than you think. In the lower right-hand corner of every page on the mainsite, it says "Options". Click it. A little list thingy opens. Click "View Page Source" and it'll show you the Wikidot code that generated that page. Every single bit of it.
This'll let you see whatever you wanna find on the wiki, if you don't know how to do something.
Section 2: Using non-wikidot code
This is where it starts getting interesting. Wikidot has support for all kinds of objects. They don't just have their own markup language, you can also include custom divs.
Code:
[[div id="myDiv" style="background-color: green; text-color:white;"]]
This is a div!
[[/div]]
Result:
This is a div!
Div's are standard web containers that define a thing that holds other things. Those things can be text, other divs, spans, and other web objects. You can style them literally however you want, using properties.
Generally this is done through what's called CSS, or cascading style sheets. These will override standard wikidot formatting, which is how my collapsible above look slightly different than the ones you probably are used to.
Using Divs allows you to create boxes and various other shapes to fit the needs of your article.
For instance, if you want something to look like a text message conversation:
Code:
[[div id="myTextMessageConvoHolder" style="display:inline-block; width:100%;"]]
[[div id="myTextMessageConvoDiv" style="color:white; border-radius: 25px; background: #73AD21;padding: 15px;width: 150px; height: 100px;float:left;"]]
I like big butts, and I cannot lie.
[[/div]]
@@ @@
[[div id="myTextMessageConvoDivReply" style="color:white; border-radius: 25px; background: blue; padding: 15px;width: 150px; height: 100px;float:right;display: inline-block"]]
Mine other brethren cannot deny.
[[/div]]
[[/div]]
Result:
I like big butts, and I cannot lie.
Mine other brethren cannot deny.
As you can see, there's a lot of things you can use this for. You can also see, I have another non-standard wikidot code section: an HTML block.
If you know how to write HTML, you can include it in a [[html]] [[/html]] block, and include whatever you want, including HTML and javascript inside of <script> tags.
This lets you introduce some really awesome components. One of the components I get asked frequently about is how to do double collapsibles.
These aren't too hard to make. The important part is to notice, that each level has one more space before the asterisk than the previous level.
Code:
[[div class="foldable-list-container"]]
* Lol collapsible
* second
* Moar
* even moar
* Test
[[/div]]
Result:
- Lol collapsible
- second
- Moar
- even moar
- Test
- even moar
You can also style the foldable-list-container div, but changing your module css to include elements within the div. See sections 3 and 4 to understand how to do this.
The last piece of non-wikidot code that is included in some of the more administrative pages, are iframes.
I frames are used to include the fulltext of another website in to the current page. An example is below:
Code:
[[iframe http://home.helenbot.com/tools/randomButton.php style="border: 1px black solid;" width="100%" height="25" scrolling="no"]]
Result:
This is a page from my website, where I host a lot of technical projects, which is a random button for an SCP. This takes the literal webpage, fetches it, then displays it in a smaller div here on the current page. This is how a lot of the more "Advanced" images are created for articles such as SCP-895 and SCP-027-J
The image block for SCP-027-J for example is generated with the following:
Code:
[[div class="scp-image-block" style="width:200px; float: right;"]]
[[iframe http://home.helenbot.com/images/remote.html width="200px" height="200px" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:200px;"]]
SCP-027-J?
[[/div]]
[[/div]]
Result:
SCP-027-J?
Section 3: Divs and how to style them
So you've seen divs, and some bits where it says "Style." These are hard-coded CSS settings, which you can define on a per-object basis if you want. Or you can include your own custom CSS settings.
This is the CSS module for the page you're looking at right now:
[[module css]]
#page-content .collapsible-block {
max-width: 100%;
background-color: #afe0ff;
text-color: black;
border-color: #b01;
border: solid 1px #b01;
padding: 5px;
}
.collapsible-block-content p {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
}
.collapsible-block-content{
text-align: left;
}
.collapsible-block-folded, .collapsible-block-unfolded{
text-align: center;
text-color: black;
}
[[/module]]
What this specifically does, is override the CSS settings for the collapsible blocks, as you can see above in the collapsible sections.
CSS Modules allow you to do just about anything with a page. You can even change the colors of the parent containers. You can change the color of the pages themselves, which is used extensively in GoI hubs, such as the Third Law Canon Hub. You can also store your CSS in another page, and import it, as you can see in the canon hub.
It's important to note, any attribute applied to a "parent" container also applies to its children unless overridden by a child attribute. If you center the text of a div, all text contained in any div inside of that div will be centered, unless you override it inside of the "child" div
This isn't intended to be a CSS tutorial, but the basic concepts are:
Section 4: Manipulating a page for fun and profit
The last section is the big question: If you have something you want to fix, how the hell do I actually know what to change?
This isn't supposed to be a tutorial in web development, so this is going to be a bit sparse, but I'll give you a crash course in how to change element properties.
If you hover your mouse over a thing (literally, any part of a webpage) and right click. There should be an option that says "Inspect Element". This will open a view, that kinda looks like a giant control panel.
If you hover over the blue "text message" in section 2 above, and inspect element, you get the following properties:
element.style {
color: white;
border-radius: 25px;
background: blue;
padding: 15px;
width: 150px;
height: 100px;
float: right;
display: inline-block;
}
You can click on the right hand side of these properties, and modify any of the attributes, or click below or above them, and add an attribute. The best way to figure it out is just to experiment. If all else fails, google the attribute you want, or a general description of the thing you want to do, followed by "CSS".
Try modifying the "background: blue;" property to a different color. This only affects how YOU see the page, and will not affect anyone elses view of the page.
Section 5: Listpages
Alright, this one feels kinda like the great grand-daddy. Listpages is a module that wikidot provides, which allows you to search the wiki for criteria, and display results. The easiest application of this is:
Code:
[[module ListPages created_by="DrMagnus" limit="5" separate="no"]]
%%title_linked%% - %%rating%% Created On: %%created_at%%
[[/module]]
Result:
This is a simple select for pages by me, DrMagnus, limit to 5 of them, don't add a line break. In the "body" of the module, you provide what you want to show. Here, I'm showing the title, rating, and creation date.
Listpages will significantly slow down your page, if you have a lot of them, and more than one is really really not recommended per page.
Below is a small number of your criteria and selectable stuff:
Section 6: The Good Stuff
Do you know web development? Flaunt it.
Conclusion
I hope this has provided at least a look in to how to make some of the more advanced applications of wikidot code work. If you have any questions feel free to PM me.
ページコンソール
批評ステータス
カテゴリ
SCP-JP本投稿の際にscpタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。
翻訳作品の下書きが該当します。
他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。
言語
EnglishРусский한국어中文FrançaisPolskiEspañolภาษาไทยDeutschItalianoУкраїнськаPortuguêsČesky繁體中文Việtその他日→外国語翻訳日本支部の記事を他言語版サイトに翻訳投稿する場合の下書きが該当します。
コンテンツマーカー
ジョーク本投稿の際にジョークタグを付与する下書きが該当します。
本投稿の際にアダルトタグを付与する下書きが該当します。
本投稿済みの下書きが該当します。
イベント参加予定の下書きが該当します。
フィーチャー
短編構文を除き数千字以下の短編・掌編の下書きが該当します。
短編にも長編にも満たない中編の下書きが該当します。
構文を除き数万字以上の長編の下書きが該当します。
特定の事前知識を求めない下書きが該当します。
SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。
シリーズ-JP所属
JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。
JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。
JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。
JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。
ジャンル
アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史任意
任意A任意B任意C- portal:5653117 (12 Sep 2019 08:13)
コメント投稿フォームへ
批評コメントTopへ