crafting store: coding and crafting guide
TRANSCRIPT
Purpose
This guide will endeavor to teach you not only how, but
why and what HTML and CSS tags to use when
entering in descriptions for Store items.
For example, we will be turning the left image into the code on the
right:
To begin:
A basic HTML element has two parts, the opening tag
and the closing tag.
<div> . . . </div>
Div is a general tag that creates a divisional
unit. The first tag is the opening tag, the
second, the one with the slash, is the
closing tag.
Classes
HTML tags can be specialized for styling by the use of
the class attribute.
<div class=“itemFed”>
. . .
. . .
</div>When defining the class, it must include an equal
sign followed by the name of the
class, itemFed, surrounded by quote marks. For
Klingon items, use the class name itemKlink.
Begin and end every entry with these tags.
List, terms and definitions, oh my!
Now that we know about div tags with class
definition, let’s figure out how we’re going to define the
data.Let’s look at our example:
List
What we see is that it’s actually just a list.
Each new line represents a new
term, such a weapon power, or a
definition for the previous weapon
power.
Zoom in
If we zoom in a little, we can see what items are our terms
and which are our definitions.
TermDefinition
Definition
Definition
Definition
Definition
Definition
Now that we know that our data is actually a list of terms
and definitions, we know what HTML tags to use.
New Tags
<dl>
<dt> . . . </dt>
<dd> . . . </dd>
<dt> . . . </dt>
</dl>
For the item description, we will use the <dl>, Define List tag, <dt>, Define Term tag, and <dd>, Define Definition tag.
These three tags work together as a group. <dt> and <dd> tags are nested
inside of the <dl> opening and closing tag.
First, start with your <dl> and </dl> tags to define the list, then define the
term, followed by it’s definitions.
Example:
<div class="itemFed">
<dl>
<dt>Sonic Pulse III</dt>
<dd>Expose Attack</dd>
<dd>PBAoE Damage, Slow, Interrupt and
Knockback</dd>
<dd>30 Physical Damage (1.2
DPS)</dd>
<dd>85% chance: Knocks back +3.2
feet</dd>
<dd>Interrupt</dd>
<dd>-75% Run Speed for 10 sec</dd>
</dl>
</div>
Hint: It’s advisable to first type the opening and closing tag for
an HTML element before beginning the next tags.
More Classes
As you can see, there are several other styles that need to be applied.
For example, the yellow text of Expose Attack or Exploit Attack.
As well, the white text of the type of attack.
This is done with three more classes; expose, exploit, attack-type.
Example:<div class="itemFed">
<dl>
<dt>Sonic Pulse III</dt>
<dd class=“expose”>Expose Attack</dd>
<dd class=“attack-type”>PBAoE Damage, Slow,
Interrupt and Knockback</dd>
<dd>30 Physical Damage (1.2 DPS)</dd>
<dd>85% chance: Knocks back +3.2
feet</dd>
<dd>Interrupt</dd>
<dd>-75% Run Speed for 10 sec</dd>
</dl>
</div>
Special Cases: Span tag
Sometimes, you’ll need to apply special styling to words in the middle of a
sentence. This can be accomplished with the class attribute that you
already know and the span tag.
Span is very similar to the div tag, but instead of creating a whole new division.
It simply spans across a group of inline characters or other elements. Just like
the other tags we’ve seen, span has an opening tag, <span>, and a closing
tag, </span>. This can apply the class just as you have before.
<span class=“dt”> . . . </span>
To apply the same styling to the span as
the other defined terms have, use the “dt”
class.
Example:
<dd>Applies <span class="dt">Hyperonic Radiation III</span> for 10 sec</dd>
Special Cases: Nested Definitions
Sometimes, you’ll notice that a definition has it’s own
definition. To get the proper styling and indentation, you’ll
need to created a second list inside the first list.
In the example to the left, the
three terms are describing the
level 45 Thermal Vent, not the
Thermal Vent II power.
To do this, create <dd> and
</dd> tags and within them
define a new list with <dl>
and </dl>, then create the
defined terms and definitions
as normal.
Example:
<div class="itemFed">
<dl>
<dt>Thermal Vent II</dt>
<dt class="attack-type">AoE Location Fire Damage</dt>
<dd>Creates a level 45 Thermal Vent</dd>
<dd>
<dl>
<dt>Thermal Vent Dissipate</dt>
<dd>After 15 sec. Defeats</dd>
<dt>Thermal Vent II</dt>
<dd>6 Fire Damage each sec</dd>
<dt>Thermal Vent Blast II</dt>
<dt class="expose">Expose Attack</dt>
<dd>20 Fire Damage</dd>
</dl>
</dd>
</dl>
</div>
One last thing: <br/>
Sometimes, you’ll need to make a new blank line
before starting the next term. To do this, use the break
tag.
Unlike the other elements we’ve talked about, the <br/> tag
is not a container, meaning it does not contain any other
information. Therefore, it is open and closed with the
single tag.
<br/>