User talk:LordBiro/Skill box draft 5/Archive

Stylesheet[edit]

Hello there! This is a very-near-final draft of how I think the skill box should work. If you look at the wiki code in the article it is very brief and logical. There are a few more divs than I'd like, but this was the easiest way to style the skill box.

Below is the stylesheet necessary for styling the skill box. I've separated it into two main sections. The first section deals with infoboxes in general and includes such styles as "use a 1px silver border". These are things that all infoboxes should have in common. The second section deals with skill boxes specifically, and overrides some of the style information that general infoboxes have.

I've tried to comment the stylesheet as clearly as possible for those who might be interested in what's going on, and also in the hope that it might be more accessible so that other infoboxes can start using this system. Please note that while I define a style for the subheading class I do not use it in the skill box; this style only exists because I think it will be useful in the final version of the stylesheet.

Since user stylesheets are disabled there's no best way to apply this stylesheet if you want to test it. The way that I have applied it is by using the Web Developer extension for Firefox. If you download that extension and choose CSS -> Edit CSS, and choose the second from last tab, you can paste the stylesheet into there and try viewing the skill box.

/*****************************************************************************/
/************* the following styles are generic to all infoboxes *************/
/*****************************************************************************/

/* the infobox wrapper */

#content div.infobox {
    float: right;              /* float to the right of the page */
    font-size: .9em;           /* reduce font size to x0.9 */
    padding: 2px 2px 0px;      /* pad everything but the bottom of the box (gap between box contents and border) */
    margin: 0 0 .5em .5em;     /* add a margin around the box (gap between border and rest of page) */
    border: 1px solid silver;  /* silver border */
}

/* the heading (should be a paragraph) */

#content div.infobox p.heading {
    display: block;            /* treat the header as a block element */ 
    text-align: center;        /* center align */
    margin: 0;
    padding: 5px;
    font-size: 1.05em;         /* increase the font size by x1.05 */
    background: silver;        /* must be overridden by specific infobox style */
}

/* any boxes that should be styled in the similar to the heading (need not be paragraphs) */

#content div.infobox .subheading {
    background: silver;
}

/* all divs inside an infobox */

#content div.infobox div {
    padding: 0;                /* should have no padding or margin unless overridden */
    margin: 0;
}

/*****************************************************************************/
/************* the following styles are specific to skill boxes **************/
/*****************************************************************************/

/* skill box wrapper */

#content div.skill-box {
    width: 19em;               /* width is 19 times the em size */
}

/* override the default infobox heading colours*/
/* we also want to set the background colour of the <dt>s */

#content div.skill-box p.heading, div.skill-box .subheading,
#content div.skill-box dt {
    background: #ADA;
}

/* the image wrapper and stats wrapper */

#content div.skill-box div.skill-image, div.skill-box div.skill-stats {
    float: left;               /* float left */
    padding: 1em;
    text-align: right;
}

#content div.skill-box div.skill-image {
    width: 80px;
}

#content div.skill-box div.skill-stats {
    width: 40px;
}    

/* the list of stats */

#content div.skill-box div.skill-stats ul {
    list-style: none;          /* should not have bullets */
    margin: 1em 0 0;           /* or a margin */
}

/* formatting the definition list */

#content div.skill-box dl {
    padding: 0;
    margin: 0;
    clear: both;
}

/* dts in the skill-box are like subheadings */

#content div.skill-box dt {
    padding: 5px;
    width: 6.25em;
    float: left;
    margin: 0;
}

#content div.skill-box dd {
    padding: 6px;
    margin: 2px 2px 2px 7em;
}

/* finally, set the background depending on profession */

#content [class~=skill-box][class~=Monk] {
    background: white url(http://wiki.guildwars.com/images/9/9b/Monk-faded.jpg) no-repeat 11em 3em;
}

To clarify a few points that might confuse someone unfamiliar with CSS

Padding: is the distance between the edge of the element in question and the contents of that element.
Margin: is the distance between the edge of the element in question and the element outside of it.
1em: is the current font size. 2em is twice that size. This is similar to a percentage of the font size, but it is different from % in some cases.

Please let me know what you think! LordBiro 08:00, 27 February 2007 (EST)

heart that extension, I've wanted to learn CSS for a while now, now the main box of the wiki is aliceblue, the sidebar and top is chartreuse, and the footer is black. The is a white space though, below the sidebar, I wanna turn that chartreuse but cant figure out how. =)

BLASTEDT 15:44, 15 March 2007 (EDT)

Query[edit]

I may have missed out, being as I have ignored skills for other projects, but the near final draft caught my eye. I look on skills guide for my question, but it was not there, so instead of trudging through looking for it, I'll ask it here. Forgive me if it's already been said, why the vertical icon look instead of a horizontal look? Horizontal would make the skill box less elongated and the vertical fits well without stretching the box. — Gares 08:58, 27 February 2007 (EST)

Hey Gares, I started thinking about the importance of information in a skill box. I'm not saying that the textual information isn't important, but I realised that you can discern a lot of information at a glance. Having the skill icon, the costs and the profession together made sense to me.

I decided to put the costs of the skill in a vertical list for two reasons:

It makes each cost look more distinct
It takes up less space on average

In all (or most) of the examples I've produced I've used 4 icons as this is generally the worst case scenario. I could have tried 3, but I didn't think that was necessary. Most skills have only 2 or 3 costs, and in these situations space is saved.

This saved space does not reduce the size of the skill box, and this is not what I was aiming for. I really wanted to make the skill box look more fresh and open, and that's why I removed the lines as my first change in User:LordBiro/Skill box draft 1.

Finally, elongation is not a problem. There's nothing wrong with vertical scrolling, and it isn't even needed in this instance, the entire skill box fits on the page at 800x600 for me.

I hope that answers your question! :) LordBiro 10:25, 27 February 2007 (EST)

Nah, it looks fine at a resolution of 800x600. Not a fan of any other resolution unless I'm in game. Just curious by nature and wanted to waste your time :p understanding why you formatted the icons vertically. I'm afraid I never cared for markup languages unless I absolutely needed to use them, but your presentation looks good. ;) — Gares 12:08, 27 February 2007 (EST)

Just out of curiosity, does this proposal eliminate the ability to create the quick reference lists used on GuildWiki? I knew there was talk of eliminating the skill info template, but I hadn't followed the conversation close enough to know if it had been decided. --- Barek (talk • contribs) - 20:37, 27 February 2007 (EST)

No, not by any means! This is purely a design issue. This could just as easily be implemented on GuildWiki. LordBiro 05:46, 28 February 2007 (EST)

Ah...I was reading about the creature box colors and noticed your screen capture in monobook showing your skill draft 2. My statement that started this discussion was that the skill box displays differently and I didn't think to check Monobook which most use. The format looks good in Monobook, but change your skin to Cologne Blue and you will see why I started this discussion. No big deal really, but I didn't want you to think I was loony. :p — Gares 09:15, 1 March 2007 (EST)

Hey Gares, I hadn't tried it with other skins. Cologne Blue has some style rules that are quite specific, and in CSS the most specific rules take priority. I've altered the stylesheet to be more specific, by referencing the #content div that is common to Monobook and Cologne Blue, but this is probably not a very flexible alternative. If someone were to create a skin without a container called #content then this style wouldn't work. LordBiro 10:14, 1 March 2007 (EST)

Don't worry about it. There are a a few things in Cologne that don't display correctly, just like some things don't display correctly because I always use a screen resolution of 800x600. It doesn't bother me because I can still understand the information and I like Cologne's link placements, I just didn't check monobook before I created this thread. Keep doing what your doing, it looks good. — Gares 10:53, 1 March 2007 (EST)

Query[edit]

I may have missed out, being as I have ignored skills for other projects, but the near final draft caught my eye. I look on skills guide for my question, but it was not there, so instead of trudging through looking for it, I'll ask it here. Forgive me if it's already been said, why the vertical icon look instead of a horizontal look? Horizontal would make the skill box less elongated and the vertical fits well without stretching the box. — Gares 08:58, 27 February 2007 (EST)

Hey Gares, I started thinking about the importance of information in a skill box. I'm not saying that the textual information isn't important, but I realised that you can discern a lot of information at a glance. Having the skill icon, the costs and the profession together made sense to me.

I decided to put the costs of the skill in a vertical list for two reasons:

It makes each cost look more distinct
It takes up less space on average