TRANSLATE - 0021 - Advanced Formatting and You
評価: 0+x

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

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 peice 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 5: 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でのオリジナル作品の下書きが該当します。

GoIF-JP

本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。

Tale-JP

本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。

翻訳

翻訳作品の下書きが該当します。

その他

他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。

言語

EnglishРусский한국어中文FrançaisPolskiEspañolภาษาไทยDeutschItalianoУкраїнськаPortuguêsČesky繁體中文Việtその他日→外国語翻訳

日本支部の記事を他言語版サイトに翻訳投稿する場合の下書きが該当します。

コンテンツマーカー

ジョーク

本投稿の際にジョークタグを付与する下書きが該当します。

アダルト

本投稿の際にアダルトタグを付与する下書きが該当します。

既存記事改稿

本投稿済みの下書きが該当します。

イベント

イベント参加予定の下書きが該当します。

フィーチャー

短編

構文を除き数千字以下の短編・掌編の下書きが該当します。

中編

短編にも長編にも満たない中編の下書きが該当します。

長編

構文を除き数万字以上の長編の下書きが該当します。

事前知識不要

特定の事前知識を求めない下書きが該当します。

フォーマットスクリュー

SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。


シリーズ-JP所属

JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。

シリーズ-Other所属

JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。

世界観用語-JP登場

JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。

世界観用語-Other登場

JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。

ジャンル

アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史

任意

任意A任意B任意C

ERROR

The ukwhatn's portal does not exist.


エラー: ukwhatnのportalページが存在しません。利用ガイドを参照し、portalページを作成してください。


利用ガイド

  1. portal:3396310 (05 Aug 2021 16:19)
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License