User:Facetofcathy/Notes on Vector Skin

First draft of a skin to overlay Vector with the Fanlore style

If you want to try it out, you can copy and paste the code into your own custom skin, by logging in, clicking on Preferences, then the Appearance tab and then Custom CSS for the Vector skin. Ensure you have Vector (default) selected as your skin.

Basic Styles

• Background is white.
• Text is black.
• Link colour is "Fanlore Blue".
• External link colour is from Vector skin.
• Visited link colour is the same purple on all links.
• Two red shades exist for links to pages that don't exist yet, a bright and a dull (visited).
• Font size is 1em (your browser default size) on all content.
• The footer is .8em or 80% of the base font. (This is in keeping with web standards that recommend only footers of this sort be made smaller than 1em.)
• There are some backgrounds that are not white:
  • templates have various backgrounds on them
  • the footer background is a very pale grey to help visually offset it from content particularly on short pages.

Some template styles are included in this skin. All existing inline styles for background colours can be removed from all templates and easily replaced with CSS classes that do the same thing. See below for instructions on what templates need editing to utilize this feature.

The blue arrows have been used in the sidebar. I've kept the open headings the grey colour to distinguish them from the collapsed headings. Collapsed headings have underlines on hover, because some visual cue on hover is in keeping with web standards.

Special notes on link colours

Link colours were a challenge. Web standards offer some guidance. Links should be visually cued--so either underline them always or at least on hover. Visual cues should not be only colour changes. The same colour and contrast guidelines as all text apply.

The user experience guidelines I trust say that visited and active links should be marked out by colour, focused links should have the default outline, and the link colours need to be visually distinct from each other and from the text.

And there's the problem, as reported on the first version of the skin, visual distinction is hard to achieve.

The Fanlore blue is a colour with very low saturation, and the purple visited link colour in the Vector skin is similar. The result is a set of colours that, particularly at small font sizes, are very hard to distinguish from black text for many users.

I adjusted the purple a great deal and adjusted the blue slightly. The blue is meant to look like the colours in the logo, but still have enough saturation and hue to set it off from the black text. The blue just barely meets the colour contrast guidelines on a white background, the pale grey in contents boxes or the gold for messages. It does not meet the guidelines on the grey heading backgrounds on infoboxes. However, since those headings are always bold, I think it is okay to not quite meet the standard.

The key step here is to have a variety of people test the skin to see if they can see the colour difference and adjust it if necessary, as much as possible.

The red shades for new pages have been adjusted to meet colour guidelines.

Positioning and Spacing

• The sidebar headings should be opposite the first line of text of content on most pages.
• The sidebar is slightly wider than it was.
• The two level header is meant to be visually separated by the borders into two parts and from the content below.
• The two header parts should be equal in size.
• The logo occupies both header spaces, but shouldn't overrun the lower border.
• The logo used is the smaller version, as the large one takes up a great deal of horizontal and vertical space and leads to large whitespace in the top header section.
• The quotation borders should not extend below floated elements like infoboxes or images.

Limitations

The Vector skin has some inherent problems that this skin is not designed to fix. The positioning methods used for the sidebar and header menus means the site functions very poorly on narrow or even somewhat narrow screens or on any size screen using very large fonts. The menus will overlap and wrap very poorly, covering content.

I believe the small font sizes in Vector were an attempt to mitigate these design flaws for most users.

For Fanlore, a one-column stylesheet that kicks in with a media query at less than 50 or 60 em screen width would fix this and provide users of small laptops or tablets a more usable view of the site. Improvements I've tried to set up this stylesheet in such a way that it would be very simple to do a custom skin that changes the background and font colours. Changing the link colours is slightly more complex, but doable with a small amount of skill.

It is now possible for any user to easily set the base font size to whatever they want with a one-line custom skin, and instructions on how to do this would be very simple.

It will be easy to make some fill in the blank templates for users to make skins of their own that change the colours of text, backgrounds and links.

Special Notes on the Logo

The Vector skin does not handle the logo image link very well. At small font sizes it gets truncated easily. I've improved on this by using a CSS3 background-size property that is not supported by some browsers. It needs to be tested on IE 8 so that we know it fails gracefully.

The expected behaviour on most browsers is that the image is approximately the width of the sidebar--it won't stretch up larger than its native size when users use text-only zoom, but at small font sizes, it shrinks down to its fair share of the space.

It shouldn't overrun the lower header border or get truncated.

Templates

There is a mixed bag of styling techniques used on Fanlore for the templates. Some use a style template that is editable on it's own wiki page. Some use HTML inline styles within the template code. Some use CSS classes which are then styled in the site CSS. Some use a mix of these.

The best approach is to style with CSS only. There are two main reasons for this. First, web standards. suggest avoiding inline styling if at all possible. These styles will override anything a user has in a skin (official or custom) causing potential conflicts in design or accessibility concerns. None of these templates set the text colour along with the background which could render text invisible on user skins.

Second, for the sustainability of the wiki code, CSS is much better. Right now, if you were to decide you wanted to change the grey background on infobox headings to a new colour, someone would have to go and change the colour on more than a dozen separate templates. Once those templates are converted to use CSS classes, it's a matter of changing or adding one line in the skin. Users can also change the colour easily in their own skins.

Below are instructions for removing all the inline background colour styles from the templates. The corresponding styles are already in the proposed CSS.

In the future, it would be a good idea to take this further and remove all styles from the templates--border colours, text alignment, table cell size, etc. --and replace them with CSS classes. This could be an easy first project for someone just learning CSS and how wikis work.

The embedded style templates also produce inline HTML styles and should not be used.

Instructions for editing templates to use the new CSS

For all infoboxes that have a grey background behind a heading:

go to the page for the template

click edit

remove the following line from the template: bgcolor=#E4E4E4

no additions or other deletions are required for this one, but there might be more than on heading line to edit.

For the Quotation2 Template:

change the class name to quotation2

remove the following: style="border:1; border-style:solid; border-color:#CCC; background-color:#EEE;"

For the ImageSummary and ImageSummaryWebpage templates:

remove the following: style="font-weight: bold; background: #E4E4E4" (this line appears multiple times in each template)

replace it with: class = "summary-heading"

For the Related Links template:

remove the following from the first td line: bgcolor="#C2D6DE"

replace with: class = "related-main"

remove the following from the rest of the td lines (3times): bgcolor="#ECF1EF"

replace with: class = "related-heading"

For the Talk Archive and Propose Deletion templates:

remove the following from the templates: {{Style:TagBox}}

replace with: class = "tagbox"

Suggested Future Refinements

• If the logo had a transparent background it would fit in with any colour scheme better.
• A default light on dark skin available to all users on the preferences tab is a good idea. I did a poll (unscientific, self-selected participants, techie sorts on Dreamwidth) about web colour schemes that showed me that the people who want to use light on dark are a minority, but their need for the colour scheme is high, and it is usually a need, not just a matter of taste. Often these users just won't spend time on a site they can't easily change to a comfortable view.
• All templates should be styled with CSS classes in the future.
• Making the base Vector skin available on the preferences tab is also a good idea. Many multi-wiki users may just prefer its familiarity.
• A help page that shows any user how to cut and paste the code to change the default font size or the do it yourself colour scheme into their custom CSS box would be good.
• All wiki CSS should be fully documented. I've commented this skin extensively, and even that seems like not enough. A documentation trail is a must for code that multiple people will work on over years. Comments will also help users who want to make their own skins too. Making un-minimized and commented stylesheets easily available will help you get help from users who may find errors or problems in the future.

This is a first draft

It works, and works as intended, but it has not been tested on multiple devices or gone through any feedback generating process.

Licence

This code, the concepts and ideas included in it and any further refinements it leads to are free and available to anyone anywhere at anytime. No credit is necessary, but is of course appreciated. I will make no future claims of ownership.

If you use this code for anything but personal use with a font size of less than 1em, I will look at you with disfavour. If you want to use this for yourself, it's very easy to make the font size smaller:

find this block near the top:

/*Background and font family*/ html, body { background-color: white; font-family: Verdana, Helvetica, sans-serif; color: black; }

and add

font-size: Xpx;

where X is your preferred size. It will populate through the whole skin.

Contact

If you have any questions about this skin, please do contact me. Please don't use the talk page on this wiki, but use the email me form on my user page. I make no guarantees of availability or timely response.

--facetofcathy (talk) 13:51, 19 March 2013 (UTC)