Factions

" markers, so don't worry, none of this "unfit for wiki informal shit" is visible for a visitor.

I'm writing this here in case I go senile or die, or become otherwise unavailable and you'll need some pointers on how to understand whatever "code" (ha ha ha) is written here.

I'm also writing this in case you just want to copy-paste some bits that you really like for your own wikia, but don't know where to start and none of those selfish pricks on other wikias leave helpful comments and take days or weeks to reply, boo-hoo.

Okay, where to begin...

Webpages can be thought of as having three distinct layers. The content layer, which is your .html file, that has the structure, the building blocks of the page that are the divs, tables and all that, that hold your content. If you open an html file in your browser, it will be a white page, with black text, with absolutely no styles, and seemingly no visible structure, but if you have made use of divs, etc, the structure is there.

Then we have the style layer, which consists of your .css. And the third layer is the interaction layer, where you have your scripts, js, jquery, etc. We don't care about the third ayer right now.

Now, when you create your html file, you are using these building blocks we talked about, such as s, s, s, etc to these building blocks you can also assign two kinds of "ID". The "id=name" and "class=name" attributes. IDs must be unique, and only one block in your whole page can have an id name, while many elements can have a specific id name.

The way css works, is by referencing your building blocks, either by an id name, a class name, or just by the building block's general name ( for example), you apply a specific style to them.

So, let's say that in my html document I have a paragraph with the id "first".

Like this:  blah blah

Now when I want to apply a style to this paragraph, I will reference it this way: #first {color: blue;}, where the "#" means that I am referencing an id. If I was referencing it by class instead it would be: .paragraphs { color:blue;}. The "." means I am referencing a class.

In other words creates an id called "first" that you can describe in the .ccs with #first, OR, you can change the .css rule to direct it to an element you already have in your page.

By the way, this is a good starting place if you want to learn some basic things http://htmldog.com/

IMPORTANT NOTE: Check the fucking spelling! I misspelled one letter of the ID and couldn't figure out why it didn't work. It didn't, because the .css does not affect the structure of the page. CSS only applies styles to what element you have on the page. If it's not there the style will just not apply, you will be referencing an element that does not exist.

Now, back to the actual page:

Basically the Artyom's tablet design was a crazy idea that was (Unexpectedly) liked by the THQ representative and now we are stuck with it for the time being because saying "fuck that" and doing something else would be just rude.

Anyway, the tablet itself is in the wikia.css and at the time of me writing this consists of two images, referenced as tabletheader and tabletfooter. The upper part with the paper bit for fancy site controls and social feed and the lower part which is useless so far respectively.

Here is the code and a link in case you can't find it:

margin: 0 auto; width: 965px; height: 732px; }  margin: 0 auto; width: 965px; height: 530px; }
 * 1) tabletheader { background-image: url('http://img215.imageshack.us/img215/7381/mainpagetabletupper.png');
 * 1) tabletfooter { background-image: url('http://img259.imageshack.us/img259/6720/mainpagetabletlower.png');

http://metrovideogame.wikia.com/wiki/MediaWiki:Wikia.css

There are also currently two subpages which contain the wikia "controls". These are Metro_Wiki/Tablet_content and Metro_Wiki/Tablet_content_social_feeds. The first one contains a tableception, in other words a set of tables within tables. All the additional crap there is for the fancy rounded edges and stuff. The second one contains the recent activity and the twitter feed from the THQ metro twitter account.

Since I'm a lazy twat, here is how you could possibly control their position on the page.

See this lame representation of a table with two rows and two columns? _____
 * __|__|
 * __|__|

The stuff you need moved is in the lower right corner and by changing the variables of height and width of an empty cell you can move the filled one around. This is important since those straps on the tablet are in the way.

RIGHT NOW, however, these are only controlled by one cell and one variable: height. The width is not used since they are positioned exactly at the center of the page with the align="center" tag.

Anyway, here is the code that adds the tablet and the controls on top of them:

Ta-da.

I'll be adding on top of this later. Feel free to write down your own thoughts here.

-Komo

P.S. Remember, you can find a wide selection of help pages on "Help:Contents"!

-- The main page design code follows. -- -->