Skyrim Character Building » Discussions


Character Building HTML/CSS Tricks

  • Member
    January 22, 2015

    Hey everyone! Vazgen here with a few tips on how to make your build look better  Be sure to also check out JakeG's  builds for examples of what can be achieved with HTML and CSS tricks. Most examples in this guide are taken from my Trebbite Monk build.

    Centering Images Vertically

    Alchemy – Trebbite Monks assisted the people of Firsthold with their knowledge of plants for many years and became known as prodigious alchemists. They always carry a large variety of brews with them - both beneficial and debilitating.
    One-Handed – Often used as a backup weapon by the others, daggers become deadly tools in the hands of an experienced Trebbite Monk. Low weight and speed of strikes complement Trebbite Monk’s agility perfectly.

    Achieving something like this with in the Visual Mode of Ning editor is... problematic  And here is where HTML Editor comes to help. Let's look at the code for the example above:

    <table>

        <tr style="vertical-align: middle;">
            <td style="vertical-align: middle;">
                <img src="discussions/16001-17000/16597-Alchemy.gif" width="100" />
            </td>
            <td style="vertical-align: middle; padding-left: 10px;">
                <b>Alchemy</b> – Trebbite Monks assisted the people of Firsthold with their knowledge of plants for many years and became known as prodigious alchemists. They always carry a large variety of brews with them - both beneficial and debilitating.
            </td>
        </tr>
        <tr style="vertical-align: middle;">
            <td style="vertical-align: middle;">
                <img src="discussions/16001-17000/16598-Onehanded.gif" width="100" />
            </td>
            <td style="vertical-align: middle; padding-left: 10px;">
                <b>One-Handed</b> – Often used as a backup weapon by the others, daggers become deadly tools in the hands of an experienced Trebbite Monk. Low weight and speed of strikes complement Trebbite Monk’s agility perfectly.
            </td>
        </tr>
    </table>

    Tags used here:

    <table> - creates a space to design a table, similar to the one in Microsoft Word

    <tr> - creates a new row within the space

    <td> - creates a new within the row

    <img> - embeds an image from the address written in src

    <b> - makes text bold

    So what did we do here? We created a table with two rows with two cells in each row. We have put images in the left cell of each row and text in the corresponding right cells. The width element used in the <img> tags ensures that all images have the same width. It's added when you type custom width in the image embedding dialogue in Visual Mode. Height is adjusted automatically. 

    Now that we've created the table, centering images vertically is a matter of a single line to be added to <tr> and <td> tags. That line is

    style="vertical-align: middle;"

    Notice that I've added

    padding-left: 10px; 

    line to <td> tags with the text. That's done for the text not to be too close to the image.

    This was the easiest and the most efficient way of centering images vertically that I can confirm working in Ning editor. I tried other solutions but neither of them produced as good results as this 

    Justified Text

    Trebbite Monks were an old Altmeri monastic order active during 3rd Era in the city of Firsthold. Despite dangerous political orientation (pure Altmer bloodlines on all Summerset Isle, especially in royal families) their research into Alchemy and Alteration was highly beneficial for the common folk and the members of the order were well received and respected by the people.

    Visual Mode editor does not have an option for justified text. All we are given is Left, Center and Right alignments. But there is a way to have justified text in your build via the HTML editor. Let's look at the code:

    <p style="text-align: justify;">
        <i>
            Trebbite Monks were an old Altmeri monastic order active during 3rd Era in the city of Firsthold. Despite dangerous political orientation (pure Altmer bloodlines on all Summerset Isle, especially in royal families) their research into Alchemy and Alteration was highly beneficial for the common folk and the members of the order were well received and respected by the people.
        </i>
    </p>

    Tags used here:

    <p> - creates an area for a paragraph text

    <i> - makes text italic

    What did we do? Added the line

    style="text-align:justify;"

    to the <p> tag. It tells the browser that all text within that tag has to be justified.

    Faster Loading Times

    Here are some tips on how to make your build page load faster on slower connections.

    • make your images the same size they are in the build. In the above example, Alchemy icon's width is set to 100 via the width parameter in the tag, but the image itself is of 100px width. If your image is larger or smaller, browser has to adjust your image to the specified width. Furthermore, if your image is larger than the specified size, the browser still loads the larger image and downloads more data. 
    • remove unnecessary characters from the code. Visual Mode editor has a habit of adding some empty tags like this - <p></p>. The more you have such characters, the more time will be spent on downloading page code.

    An example. Check out this image

    Its original width is 304px but it's made to appear with 100px width. Let's look at the code for it, generated by the Visual Mode:

    <a href="discussions/16001-17000/16601-Light_bulb_icon.png" target="_self">
        <img src="discussions/16001-17000/16602-Light_bulb_icon.png?width=100" width="100" class="align-full" />
    </a>

    Editor embeds image, resizes it and makes it clickable to view the full-size version. What we can do to optimize the code?

    1. Resize the image to 100px in a image-editing program. I use XnView free software. The image size is reduced from 58.7 KB to 15.2 KB
    2. Embed the image using Visual Mode and not typing anything in the Width field
    3. Open HTML editor and remove <a> tags around the <img> tag. Leave only the <img> tag

    Result

    I used this technique for all images in my build save one - Perk Spread image that benefits from being clickable. 

    Header texts by Teccam

    Teccam adds a little something he likes to do with his titles, which is to add a colored blur effect to make the header text pop out a bit. He also likes to use white text with a black border to further add to that effect. And in this example, He used the small-caps and letter-spacing text modifiers for a bit more flair.

    <p align="center">
        <span style="font-family: 'book antiqua', palatino; font-variant: small-caps;" class="font-size-7">
            <span style="color: #ffffff; text-shadow: 1px 1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 0px 0px 10px #02BF47; letter-spacing: 4px;">The Crystallurgist</span>
        </span>
    </p>

    The Crystallurgist

    Elements:

    • font-variant — "small-caps" is pretty much the only thing you'd want to put here.
    • text-shadow — requires three integers (h-offset, v-offset, blur radius) plus a hex color
      • In my example, I use four 0-blur text-shadows, one pixel offset for each corner, to create the black text border effect.
      • I also have a 5th text-shadow effect, not offset, with 10px blur radius, for the green shadow.
    • letter-spacing — Expands the space between each letter. Here I have a 4px buffer.
      • You could also use a negative integer to collapse the spacing, but that would probably be weird.

    You can, of course, experiment with all these effects. Here's a variant with a different shadow color and blur radius, wider spacing, and no border...

    THE CRYSTALLURGIST

  • Member
    January 22, 2015

    Nice Vazgen! I only know the most basic of HTML tricks, so this is really useful for someone like me. I went ahead and added this to the Character Building Guides and Resources page as well; it's a good reference to have.

  • Member
    January 22, 2015

    Jake's findings are also quite nice and provide some background on how HTML and CSS works. He tested a lot of things in HTML testing group but the group was deleted and its discoveries were lost. His builds are a shining example of what one can achieve with HTML editor 

    I spent about a week trying to figure out that vertical centering and finally came to this crude but effective solution  Nice to know that others won't have to do the same.

    Hopefully this'll stay relevant after dreadful Ning 3.0 transfer 

  • Member
    January 22, 2015

    Nice guide Vaz! I think it's worth noting however that it's considered bad practice to use tables to align page elements in HTML development.

  • Member
    January 22, 2015

    It at least made my recent build a little nicer to look at

  • Member
    January 22, 2015

    Yeah, one can do all with <div> tags, which is what I did for my build at first, but tables work the same way and result in a much tidier code  The Special Moves section on my build still has that old code IIRC. Something like this:

    <div style="display: table-row;">

        <div style="display: table-cell;">

        </div>

    </div>


    I also don't think it's a good practice to align page elements using inline CSS code either, which is the only way we have on Ning  Ideally, one should have a stylesheet CSS file and make his page layout using that file, but we can't do that on Ning 

  • Member
    January 22, 2015

    Nice one Vaz!  

  • Member
    January 22, 2015

    Nice stuff, Vaz. I'll throw in a little something I like to do with my titles, which is to add a colored blur effect to make the header text pop out a bit. I also like to use white text with a black border to further add to that effect. And in this example, I use the small-caps and letter-spacing text modifiers for a bit more flair.

    <p align="center"><span style="font-family: 'book antiqua', palatino; font-variant: small-caps;" class="font-size-7"><span style="color: #ffffff; text-shadow: 1px 1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000, -1px -1px 0px #000000, 0px 0px 10px #02BF47; letter-spacing: 4px;">The Crystallurgist</span></span></p>

    The Crystallurgist

    Elements:

    • font-variant — "small-caps" is pretty much the only thing you'd want to put here.
    • text-shadow — requires three integers (h-offset, v-offset, blur radius) plus a hex color
      • In my example, I use four 0-blur text-shadows, one pixel offset for each corner, to create the black text border effect.
      • I also have a 5th text-shadow effect, not offset, with 10px blur radius, for the green shadow.
    • letter-spacing — Expands the space between each letter. Here I have a 4px buffer.
      • You could also use a negative integer to collapse the spacing, but that would probably be weird.

    You can, of course, experiment with all these effects. Here's a variant with a different shadow color and blur radius, wider spacing, and no border...

    THE CRYSTALLURGIST

  • Member
    January 22, 2015

    My own little tip for character builders and HTML (I am pretty sure lots of people do this anyway?). It is easy to continuously work on writing a build over any number of days, just by saving the entire HTML code in a notepad (or something similar) doc. This also protects you from when Ning gets hungry.

  • Member
    January 22, 2015

    Love it.