Jump to content

Welcome to the upgraded PCGamingWiki forums and files page. The current Wiki and Forum bridge is not functioning at the moment, therefore your Forum account currently has no password set. Please reset your Forum password via email check to generate a new password. If you have any issues please message Andytizer on Discord.

Nicereddy

PCGamingWiki Skin v3.0

Recommended Posts

Soeb and I have been secretly working on a new skin for the wiki, and I figured I'd update you guys on our progress.

 

Here's a beautiful in-dev screenshot I took:

 

NJlRcmi.png

 

Note that this skin is still in Early Accessâ„¢, so there are some bugs I need to work out before I'm done.

 

(Don't do gradients, kids. They're bad for you.)

Share this post


Link to post
Share on other sites

This is very interesting!

 

Some things to consider-

integration with IP Board as it currently stands, or IP Board 4

responsiveness onto tablet/smartphone

social - we were thinking of switching the privacy-invasive iframes for static buttons, but they still need a place somewhere

is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

Share this post


Link to post
Share on other sites

This is very interesting!

 

Some things to consider-

integration with IP Board as it currently stands, or IP Board 4

responsiveness onto tablet/smartphone

social - we were thinking of switching the privacy-invasive iframes for static buttons, but they still need a place somewhere

is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

 

I'll need to give some thought as to where we should put the IPBoard integration as I can definitely see it's usefulness. I think we may want to try parsing the forums ourselves, since IPBoard loads about as quickly as molasses and would really clash with the skin.

 

iframes are the devil, so if we can avoid those that would be vastly preferable. I'm currently planning on placing the social icons in the footer, since they serve the same purpose as the social buttons without compromising our design or slowing down page load (based on tests Soeb and I have done, Twitter and Facebook seem to be the primary causes for our slow loading times). Hopefully I can get your blessing on that, since I think the benefits are fairly significant.

 

I've worked to make it responsive (the sidebar hides once you get below a certain browser window width, among some other changes), but right now I think it'd be best to just let the MobileFrontend extension handle that.

 

As for the tabs, that's outside my domain. Soeb or Garrett will likely be able to better answer that.

Share this post


Link to post
Share on other sites
is it possible to add new tabs? I'm thinking it would be nice to add new functionality, e.g. Controls:Game - might show all default controls for that game

 

MediaWiki has no native capability for awareness of additional associated namespaces. I think that would require a custom extension to avoid resorting to really nasty hacks in the skin. An alternate solution would be to use subpages, linking to those pages through links or templates in the content area rather than as part of the skin.

 

Your example of controls seems like it would be veering too much into the territory of a game guide.

Share this post


Link to post
Share on other sites

After doing some initial tests, I tried loading the Half-Life 2 article on both the production and dev wikis for comparison.

 

Note that there are a few variables that will effect this, namely advertisements (none on either since I was logged in) and the IPBoard integration on the production wiki. We currently intend to only show recent replies on the home page once we finish this up, more on that when we actually make it happen :P

 

Anyway, here's the data:

  • Production wiki: 90 requests, 479 KB transferred
  • Development wiki: 47 requests, 392 KB transferred

 

So we've managed to cut a little over 85 KB of data from the page load and almost halved the requests. In theory this should make our servers withstand larger influxes of traffic (emphasis on in theory, I am not a network engineer).

 

I'm not sure where else we can optimize it, most of the weight is currently from the cover photo and game screenshots (my icons are all incredibly small because they're SVGs :D). I'll have to work with Soeb to see if we can get longer lasting caching of things like our logo image, etc.

Share this post


Link to post
Share on other sites

I like the new look so far. The left side seems like it has too much wasted space now (as I mentioned to Soeb on IRC) but it's actually the same width as on the current skin.

 

Note that MediaWiki renders SVG as PNG rather than using the SVG file directly, so only SVG files that are part of the skin will actually be loaded as SVG.

 

EDIT: maybe the footer should include a mini disclaimer about affiliates (like IsThereAnyDeal.com and elsewhere) since so many of the stores covered on the wiki now have affiliate tags applied.

Share this post


Link to post
Share on other sites

I am super impressed with the progress on the skin, kudos guys.

 

Initially I added a 'link' to each H2 - this is a bit hackish as it uses javascript. Also it's not a good solution as it is 'inside' the H2 tag which isn't great semantically.

 

I noticed the new Wikipedia version has a cool 'hover' link where a link appears when you mouseover the H2. I wonder if we can do something comparable to that?

Share this post


Link to post
Share on other sites

Random question: Would the new skin support different colour schemes?

 

If so, adding various colour schemes would be a cool idea (ex. Original Steam format, Terminal look, etc.)

In theory you could do it with personal CSS styles, but they wouldn't be official.

 

 

I am super impressed with the progress on the skin, kudos guys.

 

Initially I added a 'link' to each H2 - this is a bit hackish as it uses javascript. Also it's not a good solution as it is 'inside' the H2 tag which isn't great semantically.

 

I noticed the new Wikipedia version has a cool 'hover' link where a link appears when you mouseover the H2. I wonder if we can do something comparable to that?

I liked that when I noticed it as well. I want to add it, but I'm not sure if it'd be weird should the floating ToC happen to float over the link icon as the user hovers. Probably not a huge problem, so I'd be willing to implement it.

Share this post


Link to post
Share on other sites

@ThatOneReaper if you'd like a personal custom color scheme, I can help set up a quick little CSS template to get you going. I'm just not too keen on officially supporting them, since that'd just create more stuff to keep updated.

Share this post


Link to post
Share on other sites

@Garrett: would it be possible to modify the way the Stub/Cleanup/Development tags work? I'm having a problem where the tags have different styles depending on what tag they are, which is rather annoying.

 

Case in point: http://dev.pcgamingwiki.com/wiki/Grand_Theft_Auto_V

 

Using both a Stub and Cleanup tag causes a space between the two that I can't fix without merging the templates into one single div. Something like this would be nice:

{{Notice|Stub|Cleanup}}

Although we should probably ask the community to make sure we get all the edge cases taken care of.

 

 

I also wanted to get everyone's thoughts on using white for the stub/cleanup icons vs. keeping them as they are?

Share this post


Link to post
Share on other sites

This is really, really good I'm absolutely loving the new design. I assume all the font and such is placeholder? The navigation bar at the top would definitely need to be changed to be a bit easier on the eyes and the stub/cleanup icons could be reduced in size to be inline with the text but aside from that it's very clean and organized. I absolutely look forward to seeing this progress further.

Share this post


Link to post
Share on other sites

This is really, really good I'm absolutely loving the new design. I assume all the font and such is placeholder? The navigation bar at the top would definitely need to be changed to be a bit easier on the eyes and the stub/cleanup icons could be reduced in size to be inline with the text but aside from that it's very clean and organized. I absolutely look forward to seeing this progress further.

The font right now is Segoe UI, which I rather like. Are you seeing something different (Linux doesn't come with Segoe, AFAIK), or would you just prefer a different font?

Share this post


Link to post
Share on other sites

Some CSS change seem to be the source of the problem. Those templates don't have that issue on the old skin. It would be better to fix it in the CSS.

I'll have to play around some more with it then. In order to get it working the way I want, with the tag spanning the full width of the page, I need to use absolute positioning. Unfortunately, this takes it "out of the document flow", which requires I utilize extra padding <div>'s so content doesn't run under the tags. So that's why the tags aren't working the same as they were in the previous version. 

Share this post


Link to post
Share on other sites

The font right now is Segoe UI, which I rather like. Are you seeing something different (Linux doesn't come with Segoe, AFAIK), or would you just prefer a different font?

 

p5oC3M.png

 

This is currently what I see. The one in your screenshot however would be absolutely fine:

 

Q8hS9V.png

 

Just seems like it needs to be bolded. Maybe it's a CSS issue between browsers? I'm currently running Firefox.

Share this post


Link to post
Share on other sites

Oh, I noticed this but forgot to mention it - definitely an issue, but mostly with Windows having the worst font rendering. Looks all pretty on Linux.

 

But yeah, something has to be changed there.

Simple fix, don't use Windows :P

Share this post


Link to post
Share on other sites

p5oC3M.png

 

This is currently what I see. The one in your screenshot however would be absolutely fine:

 

Q8hS9V.png

 

Just seems like it needs to be bolded. Maybe it's a CSS issue between browsers? I'm currently running Firefox.

 

Unfortunately I can't test this very well since Windows renders text differently from OS X, but I've applied font smoothing for WebKit browsers and Firefox. I think that should fix your issue?

 

It didn't, I'm not sure why the font rendering is all messed up on Windows :/

 

Considering the font we're using - Segoe UI - is the bloody typeface they used in Microsoft's logo you'd think they'd have optimized it for use with Windows.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Forum Statistics

    957
    Total Topics
    6137
    Total Posts
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Who's Online   0 Members, 0 Anonymous, 90 Guests (See full list)

    There are no registered users currently online

×