staffboxnico

Hi, I'm Uncle Nicolini. You might remember me from this monstrosity.

As you may already know, I'm a little capable with css, and I'd like to share my curse knowledge with you.

Let's start with something simple, like divs. Did you know you could make them do all sorts of wacky things?

despacito No.Deux

But that's some pretty advanced shitposting. Let's tone it down and put a practical application on this knowledge so we can use it to enrich our articles. For starters, let's take a look at a very basic divstyle.

This basic setup:

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
blah

blah

-- blah
[[/=]]
[[/div]]

… yields the following:

blah

blah

— blah

But what do these things all mean? Let's take a look.

border:solid 1px #999999;

If you're at all familiar with the English language, you may have guessed this is responsible for the line that surrounds the div style. The 'solid' part indicates what the wrapping of the div will look like, which in this case, is a straight line. The '1px' part indicates the thickness. You can make div lines very thick (the thicker you make them, the more you'll have to correct the padding) or very thin to the point of being invisible. The '#999999' section dictates what color the wrapping will be. The colors will be determined by their hex value and are imported from their hexadecimal strings. You can find more information on this here.1

The ';' is absolutely important and must remain at the end of every section as shown above. Think of it as a comma in a long, running sentence.

Now, what if we started messing a little with the div? Let's say we wanted a nice dash-styled div with a yellow outline.

blah

blah

— blah

Hmm. It may not look like much, but that's fine. Let's get started on the background. If you're interested in other ways to play around with this section, check out the collapsible below.

+ show block
background:#f2f2c2;

Just like above, this one is pretty simple. As you might have guessed, changing the color hex value here changes the background color. We want a nice shade of purple, because we're trying to make a Dr. Wondertainment themed Div.

blah

blah

— blah

Now we're getting somewhere! But the color of the text isn't very legible. We'll get to that in a minute, first I want to cover the last section of this div.

padding:5px; margin-bottom: 10px;

These two sections are pretty similar. Margin2 values control the outer content of the div while the padding values control the location of what's inside the div. You can feel free to mess around with them on your own sandbox, but here's an example of 50px padding and 25px margin. I have removed the center align so it's more noticeable for this example.

blah

blah

— blah

Though the effects may not be highly impressive, you may have noticed that the div looks bigger. You can use this for when you want the text to be located further inside of a div.

Okay, so now we have our div looking a little more like how we want it to, but like we mentioned earlier, the color of the text isn't very nice on this background. What can we do to fix it? Let's use a different color. There are two easy ways to change the color of text on wikidot.

##red|testeo##

or…

[[span style="color:red"]]testeo[[/span]]

I prefer using the first option because it allows me to utilize Hex Values for colors, which lets me be more specific. For example:

See how this is different to this one?

To do this, just find the Hex you want and put it in place of the color name. Easy. Now let's put it into practice.

blah

blah

— blah

Nice! But still not perfect. I care a lot about presentation and will always go the extra mile to make sure what I'm presenting looks good. What would make this go from good to great, you ask? A special font. Google Fonts is an excellent resource to import fonts for free, and it even lets you preview them, too!

You can import it by selecting your desired font, then click '@import' on the tab it opens, then copy and paste the line that looks like this:

@import url('https://fonts.googleapis.com/css?family=FONTNAMEHERE');

Once you have that ready, put it in your sandbox inside of a css module like this:

[[module css]]
@import url('https://fonts.googleapis.com/css?family=FONTNAMEHERE');
h4 {
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-family: 'FONT NAME';
}
[[/module]]
[[/module]]

As you have learned above, the padding and margins can be adjusted accordingly to make it bigger or smaller. The section that reads 'h4' sets it so that the font will automatically appear when a new line break is started with 4 '+'s. You can also add commands to make it be in all cursive and other rules, as you can see down here.

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
h4 {
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-family: 'Berkshire Swash', cursive;
}
[[/module]]

Let's see how this all looks together.

blah

blah

— Dr. Wondertainment

Now THAT is looking wonderful!

Advanced Shitposting Div Usage

Okay, so that's the very basic form of editing divs. There's more advanced things you can do, such as having the background be an image, or even using divstyles to make your own memes in CSS. Don't believe me? Check it out.

I HAVE LIGMA

BOTTOM TEXT

In all honesty, this doesn't have much use, but it's pretty simple and if you know how to mess with divs you'll understand how to use this quite easily.

Footnotes