GodWiki:Projects/css things

From GodWiki
Jump to navigation Jump to search

This project is a project to show what can be done with pure CSS in GodWiki and how to modify them. These are mostly aesthetic and decorative stuff that can be used to decorate User pages and guild pages. There will be no images here. Everything will be coded via CSS. Feel free to check the sandbox and copy paste the codes in here. If you have any requests, feel free to post it in the Discussion page.

What's in here?

What you need to know first

This section assumes that the reader does not have any or has very little experience of HTML and CSS and will explain some basics necessary to understand the codes posted below.

The difference between <div> and <span>

The easiest way to think of these two elements is to consider <div> as paragraphs and <span> as groups of words.

<div> is a whole block of contents and normally has line-breaks before and after it. If you put a two <div> next to each other, they would normally display stacked on top of each other. (This behavior can be changed with style attributes.) You can think of this as a box that contains stuff. It is used mostly for layouts, mostly for modifying boxes and borders.

<span> is an in-line element and occupies a section of the block. If you put two <span> next to each other, they will display next to each other. It is used mostly for modifying texts.

Note that you can put a <div> inside a <div>, a <span> inside a <span>, and a <span> inside a <div> but you cannot put a <div> inside a <span>.

For more info, see this (for <div> specifically), this (for <span> specifically), and this (for a more general comparison of both elements).

Modifying <div> and <span> in the wiki

<div> and <span> can be modified by placing style attributes to it. Keep in mind that you have to use the right spelling and punctuation when using style attribute.

For example, writing <span style = "color: red;">This text is red</span> will produce This text is red.

Similarly, writing <div style = "height: 10px; width: 10px; background: red;"></div> will produce

Here is a breakdown of the style attributes that will be used in the codes below:

  • height and width - These are used for setting the dimension of your <div> and <span>. It can take in different values such as px (pixels), em (based on font size), vw (based on the width of the screen, vh (based on the height of the screen). It can also use math to calculate values via calc(). More info in this link.
  • color - The font color.
  • background - The background color of the box containing your element.
  • border - Modifies the borders of the box containing your element, such as thickness, border style and color. See this for more info.
  • border-radius - Modifies how round the edges of the box containing your element.
  • linear-gradient - Creates a gradient that goes either down/up/left/right/diagonally.
  • radial-gradient - Creates a gradient that radiates from a center.

Code comments

If you've been using templates or reading the templates documentation, you may have seen something like this: <!--some text here-->. These are code comments. They are used to tell you what that particular code or section of code is meant to do. They do not generate or render anything when the code is read by the wiki software. When copy-pasting template code, you can either type beside them, or replace them entirely. If you do replace them, do not just place a text inside the <!-- and the -->, remember to erase them as well. Not erasing those parts is one of the common mistakes many beginners make when using templates. If a template or code is not showing or working for you, check for any code comments you might have missed.

Triangles

The basics

To create a triangle, we first make a box that has zero height and width. The triangle will be determined by the borders. For example, in a triangle pointing downward, the left and right border are transparent while the top border is colored. This happens because borders actually meet at an angle. See below for a demonstration of how borders work:

Code: <div style = "width: 50px; height: 50px; border-left: 10px solid red; border-right: 10px solid blue; border-top: 10px solid green; border-bottom: 10px solid pink;"></div>

Demos

  • Triangle down: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid red;"></div>
  • Triangle up: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red;"></div>
  • Triangle left: <div style = "width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 40px solid red;"></div>
  • Triangle right: <div style = "width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 40px solid red;"></div>
  • Triangle top left: <div style = "width: 0; height: 0; border-top: 20px solid red; border-right: 20px solid transparent;"></div>
  • Triangle top right: <div style = "width: 0; height: 0; border-top: 20px solid red; border-left: 20px solid transparent;"></div>
  • Triangle bottom left: <div style = "width: 0; height: 0; border-bottom: 20px solid red; border-right: 20px solid transparent;"></div>
  • Triangle bottom right: <div style = "width: 0; height: 0; border-bottom: 20px solid red; border-left: 20px solid transparent;"></div>

Modifying Triangles

Here are a few ways you can modify the triangle code. You can modify just one aspect of it or you can mix and match depending on your requirements.

Basic modifications

  • Changing color
This is the easiest to modify. Simply look for the border with a color (there's only one of that in the code) and replace it with a color that you like. You can use this website to pick out a color and input the HEX code. So, for example, you want a dark maroon triangle that's pointing down. Take the original code above: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid red;"></div> and modify it to: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid #7B241C;"></div>. The result will be:
  • Size
You may have noticed a pattern in the sizes of the borders of the triangle code. That is, two sides of the triangle are half the side of the opposite direction your triangle is pointing towards. Keep this in mind when you change the sizes. Let's say you want a triangle that's twice the size of than the one we currently have. Take the original code above: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid red;"></div> and modify it to: <div style = "width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 80px solid red;"></div>. The result will be:
Be mindful of mobile users when using larger sizes. A triangle that may look small on the desktop may look large on mobile. There is a method to do combat this possible issue which is outlined in the advance modifications below.

Advanced modifications

  • Automatic size
This is a way to make sure the triangles don't render overly large on mobile. The trick is to make the computer calculate the size depending on the width of the screen. We achieve this by using the calc() function. Let's say you want a triangle that's about 5% of the screen width. Take the original code above: <div style = "width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid red;"></div> and modify it to: <div style = "width: 0; height: 0; border-left: calc((100vw / 20) / 2) solid transparent; border-right: calc((100vw / 20) / 2) solid transparent; border-top: calc(100vw / 20) solid red;"></div>. The result will be:
It will automatically resize itself to always be 5% of the screen width without you having to modify the code. Try switching devices or, if you're exclusively on mobile or tablet, switch between portrait and landscape, (for desktop only users, try resizing the window) to see the difference.

Squares

Circles

Other shapes

Buttons

Let's say you want a triangle button to link to the Triangle section of this page. Normally, you would use [[GodWiki:Projects/css things#Triangles|Triangles]] to put a link to that section, like so: Triangles. Or you use an external link to achieve the same result using the code [https://wiki.godvillegame.com/GodWiki:Projects/css_things#Triangles Triangles], like so: Triangles. Take a look at this section from the Creator's Manual for more explanation about links.

Now, to use a shape as a button, we'll use the single square brackets option. We'll also need to remove the arrow that shows up beside it. To do that, we'll add class = "plainlinks" to the div containing our button. Check this link for more information about it.

So the code for triangle links then becomes <div class="plainlinks">[https://wiki.godvillegame.com/GodWiki:Projects/css_things#Triangles <div style = "display: inline-block; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 40px solid red;"></div>]</div>

Resulting in:

The additional display: inline-block; in style limits the link into the area of the shape, in this case, the triangle, only. Without it, the whole width of the screen where the shape is becomes the link.

Further customizations

Contributors

Copy-paste * ~~~ below to add name to the list