STO Awakening.jpg

STOWiki talk:Skin Update

From Star Trek Online Wiki
Jump to: navigation, search

New Skin[edit source]

The new skin looks great! A few things I was wondering about: 1) could the Star Trek Online Wiki combadge logo be clickable to return to the main page? 2) Is there a way to get the new content banners have both centered text and images that will be behind the rounded borders? --MatthewM 23:35, 6 July 2011 (UTC)

I think the new skin is so-so. There are quite a few things that don't seem placed properly. Look at the main page or the nav bar on the left. Also it seems really low on contrast (as it is, it's basically blue on blue). Some of these issues where already mentioned on the main paige discussion way back, but sadly no admin addressed them back then. And apparently there never was the testing phase that was announced. :( Hope there will be some fixes. And that you might consider making the skin a bit more rich in contrast. -- Backyardserenade 07:13, 7 July 2011 (UTC)

A few suggestions I have would be to reduce the amount of space a tab has and make sure that items (such as this are displayed properly with tabs, colors (i.e. yellow for expose/exploit), etc. Also, the full (as opposed to left) justify for text looks a bit strange in some places. --MatthewM 08:26, 7 July 2011 (UTC)

Seconded, left alignement should be defaalt. Also, I believe, our tables uased to center themselves in the columns they were placed. Smaller, left aligned tabels look weired, when there is so much empty space on the right side. --RachelGarrett 08:55, 7 July 2011 (UTC)
The full justification is not just default. The skin breaks the preference option completely. Eyes User-Eyes-Sig.png 14:34, 7 July 2011 (UTC)

I've some layout trubles with the side bar. The entry "Upload Multiple files" in "Operations" is not indented correctly and displays an additional bullet point. --RachelGarrett 08:55, 7 July 2011 (UTC)

Probably because that's added by an extension. The new skin doesn't use <li> tags at all, which the extension is probably expecting.
I've included a temporary (or possibly permanent) fix that would need to be placed on MediaWiki:STO.css:
#t-multiupload {
  display: inline;
}

#t-multiupload a {
  font-family: arial narrow,helvetica,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 11pt;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  -x-system-font: none;
  margin-left: 20px;
  text-transform: capitalize;
}
This just makes sure the same rules applied to all the other links get applied to this one using different identifiers, and makes the <li> essentially mean nothing to get rid of the bullet point. Eyes User-Eyes-Sig.png 12:41, 7 July 2011 (UTC)
Thanks! I have implemented this change and "Upload Multiple Files" is now indented properly. --MatthewM 05:47, 10 July 2011 (UTC)

Can someone take a look at the missioninfobox? There is a slight alignment issue with longer mission names that makes me cringe --Dukedom 09:25, 7 July 2011 (UTC)

I think the positioning used there is unnecessarily complicated and makes it too difficult to ensure the text stays in the box. I tried another way that gets slightly different results, but it makes the long parameter pointless because it can handle mission names of any length automatically. The results of my approach are currently at User:Eyes/Sandbox. I'll wait on changing Template:Missioninfo because I haven't tested this on other browsers yet, so I'll wait to see if any of you see any problems with what I did. Eyes User-Eyes-Sig.png 15:44, 7 July 2011 (UTC)
Looks fine on Firefox 5--Dukedom 19:20, 7 July 2011 (UTC)
There's also some weird thing with the line spacing, as text1/text2/text3/etc should have same spacing as the br breaks (see this for example). --MatthewM 02:06, 8 July 2011 (UTC)
This skin is missing the nomargin class. The way the infobox template is written, adding this CSS is the simplest way to fix it:
.nomargin p {
  margin-top: 0;
  margin-bottom: 0;
}
Eyes User-Eyes-Sig.png 05:13, 8 July 2011 (UTC)
It just occurred to me that this CSS should be the same for every skin. I'd recommend putting the above CSS in MediaWiki:Common.css rather than add it to the skin. Eyes User-Eyes-Sig.png 05:18, 8 July 2011 (UTC)
I have implemented the above change to MediaWiki:Common.css. --MatthewM 05:46, 8 July 2011 (UTC)

I just realized that the NPCinfo template doesn't like long names, too. --Dukedom 09:07, 10 July 2011 (UTC)

Yeah, I think they use the same CSS classes. Probably best to fix through overriding the CSS classes rather than editing each template (especially since that'd force the wiki to recache so many pages).
.missionname {
  min-height: 44px;
  height: auto;
}

.nametext {
  position: static !important;
  margin-left: -20px;
}
This works fine on Firefox 5 and IE 9. I'm a little concerned that some browsers (especially less current ones) might interpret that negative margin to allow the text to overlap the left side of the box (like it was doing before), but at this point, it's still an improvement over what we had. (And if somebody finds a problem with another browser, I can always see if I can come up with another approach.) Eyes User-Eyes-Sig.png 09:34, 10 July 2011 (UTC)

Do we really want no space between paragraphs in mission text? It almost makes it look (at first) like someone bugged the wikicode, but the skin CSS deliberately eliminates the spacing between them. Without a first-line indent, there should be some spacing between paragraphs. Eyes User-Eyes-Sig.png 10:21, 10 July 2011 (UTC)

More Header Images[edit source]

About the headers/banners at the top -- is there a technical limit to there being nine of them or might it be possible to add or replace them as time goes on? I have put forth some ideas here. --MatthewM 11:45, 7 July 2011 (UTC)

Any feedback on this? --MatthewM 10:04, 24 July 2011 (UTC)
I like the additional options.
Thoughts on implementation:
  • Logo and border are currently part of the banner image, as obviously seen in the examples on that page. Right now, it's the background of a div element (the design decision that makes making the logo a link to the main page problematic). My thoughts are to divide the current implementation into three parts:
    1. An outer div that will provide the actual banner background graphic...
    2. An inner div of the same size with a transparent PNG providing the border...
    3. A floating transparent PNG containing the logo (or top part, anyway) to the left that would serve as a link to Main Page.
  • Modify the skin PHP file to select background images from a page in the MediaWiki namespace (with any appropriate current unused). Each line would be a separate file path. Only admins can edit in the MediaWiki namespace, so security issues of this appropriate are well managed.
    • Preferably, the page could work with both URLs and just old MediaWiki file names, but one or the other will work just fine. Eyes User-Eyes-Sig.png 10:30, 24 July 2011 (UTC)

Current status of this feature[edit source]

I've developed and tested a change to the skin PHP file that gets its selection of images from MediaWiki:Sto-skin-banners. Each line identifies a different image. It is tolerant of blank lines and, in my tests, properly ignores them.

Images can identified in one of two ways:

  • by a path, such as skins/sto/banner_1.png
  • by a MediaWiki title, such as File:Banner_1.png

The latter, naturally, only works for files that are uploaded through the wiki. There is one minor drawback with the latter approach; I didn't see any good fast way to check for the existence of said file before making the selection, so I decided to simply let it fail to load a banner in that case. (Better to have an obvious error result for a bad title, anyway.)

The larger caveat is that it's still designed for the integrated images that have the top portion of the logo, the border, and the banner background all in the same file. Strictly speaking, changing that is another part of the skin, but there is little point in doing so until we have separate image files (transparent PNGs preferred) for the logo and the border. When and if we can get that done, I can change the banner appropriately and it'll be easier to create new banner images to use with this new feature. Eyes User-Eyes-Sig.png 15:51, 28 July 2011 (UTC)

Bugs found so far[edit source]

  1. Minor one: alt text of all sidebar headings is "Operations", even for the ones that don't say "Operations".
  2. Weird one: On Firefox 5, only some of the sidebar links become white on hover. Weirder yet, it's different ones on each of my computers. (Also, for some unknown, the Web Developer extension for Firefox lists some of the same rules for the sidebar links more than once, even though they only appear once in /skins/sto/main.css... Best guess is that it's getting confused on prioritizing the rules somehow.) Eyes User-Eyes-Sig.png 14:07, 7 July 2011 (UTC)
    • When I use Web Developer to put in .sidebar_link:hover { color: #ffffff; } at the bottom of /skins/sto/main.css, this solves the issue, though I'm still not sure why the issue exists. Putting this in MediaWiki:STO.css should also solve the problem since that should have priority over /skins/sto/main.css. Eyes User-Eyes-Sig.png 14:15, 7 July 2011 (UTC)
    It looks like one of the buttons (URL) is a bad link. --MatthewM 05:43, 10 July 2011 (UTC)
  3. The justify paragraphs option in user preferences is broken. When it is turned on, the software sends the following CSS to the browser: #article, #bodyContent, #mw_content { text-align: justify; }. This skin doesn't add any of those ids to the div containing the article, so the option is completely broken. The text-align: justify should be removed from the page_body and one of those ids should be added to the div. This will let the option work as it was intended to. Eyes User-Eyes-Sig.png 14:34, 7 July 2011 (UTC)
  4. Check Special:Preferences, look at the Appearance page, and look at Stub Link formatting near the bottom. Am I the only one who sees an odd green border around it? Eyes User-Eyes-Sig.png 14:44, 7 July 2011 (UTC)
  5. Missing button for "File" at the top of a file page, e.g. File:Cryptic_Store.png --RachelGarrett 18:28, 7 July 2011 (UTC)
  6. Important. The skin completely swallows (or never provides) the redirect notices that usually appear under the title. When using a redirect like Aegis Set, the text from MediaWiki:redirectedfrom should appear beneath the page title, with $1 swapped with Aegis Set should appear beneath the title (and notice how that link doesn't redirect). It's difficult to get to the redirect page itself without this feature. This should be a priority fix, as this makes many editing tasks involving redirects significantly more tedious. (By completely swallowed, I mean it doesn't even appear in the page source. It isn't just hidden, it's completely absent.)
    • I'm investigating whether I can write a Javascript snippet that will serve as a temporary fix, but my initial findings are not at all promising. I don't yet see any way to programmatically determine through Javascript if you got to a page through a MediaWiki redirect and through which redirect.
      • Got thinking a little inside the box there. There was an obvious solution to the problem. I've provided the code for a client-side patch for this problem at User:Eyes/STO redirect patch for an admin to implement. (I recommend checking a redirect like Aegis Set immediately afterward, though, to ensure that it doesn't interact with this skin in any unanticipated ways. You'll have to refresh the page after going there to be sure you see the results.) Eyes User-Eyes-Sig.png 09:46, 12 July 2011 (UTC)
        • I have implemented the changes, but I'm not seeing the redirect link on pages such as Aegis Set. --MatthewM 10:03, 12 July 2011 (UTC)
          Lol, this skin loads MediaWiki:Monobook.js instead. I added a line to check for the skin the user is using, so we can place it on MediaWiki:Common.js safely. Eyes User-Eyes-Sig.png 10:20, 12 July 2011 (UTC)
          I just ended up using the wrong variable for the skin. Change wgSkin to skin, and barring any other surprises, it should work. Eyes User-Eyes-Sig.png 10:08, 13 July 2011 (UTC)
          Change implemented, but does not appear to be having desired effect. --MatthewM 11:08, 13 July 2011 (UTC)
  7. Similar to above, when going to a subpage like Tribble (server)/Release notes, the "breadcrumb" links the normally appear under the title have also been completely swallowed.
    • (This one I probably could patch up with a Javascript snippet, but this probably isn't important enough to do that with.) Eyes User-Eyes-Sig.png 07:10, 12 July 2011 (UTC)
  8. The skin loads MediaWiki:Monobook.js, not MediaWiki:STO.js. Eyes User-Eyes-Sig.png 10:25, 12 July 2011 (UTC)
    You know what this turned out to be? The internal identifiers for the skin were in uppercase. Yeah, apparently, that makes a difference in the MediaWiki code.
    Annoying side effect: the proper pages for modifications of this skin will become MediaWiki:Sto.css and MediaWiki:Sto.js when the fix is deployed.
    Baka, MediaWiki developers, baka. Eyes User-Eyes-Sig.png 17:02, 27 July 2011 (UTC)
  9. Minor - Not all links buttons in the banner "glow" when hovered over. Currently Project, View Source, Special Page, and "+" do not that I've seen. - Archduk3 09:49, 10 August 2011 (UTC)
    Good catch. We already knew there were problems with the others, and I have it fixed in the new version (whenever we can finally get it here on the live site), but I didn't even think about that stupid +. That one was a different problem entirely. It's now fixed in the new version, and hopefully, we can get this up here soon. Eyes User-Eyes-Sig.png 10:05, 10 August 2011 (UTC)

Redirect patch[edit source]

(continued from above)

Okay, looking at the other Javascript that gets automatically included more closely, I see that the skin variable is getting set to "STO" at first, and then getting changed to "monobook" later on. Unfortunately, this happens just before Common.js is run. I had to get creative; User:Eyes/STO redirect patch has been changed to try to deal with this situation.

I'm not sure if the && document.getElementsByTagName("div")[0].className == "userinfo_box" part will run or not. If that works as intended, the script will correctly distinguish the STO skin from Monobook (which uses a very different class name for its first div), and the rest of the script should actually run for once. If it doesn't, that part of the script could be removed, but anyone using the Monobook skin would see two redirect notices instead of one. Eyes User-Eyes-Sig.png 12:33, 13 July 2011 (UTC)

I've just put the updated code in MediaWiki:Common.js but still not seeing the change. Did you mean MediaWiki:Monobook.js? --MatthewM 22:11, 13 July 2011 (UTC)
It is working for me now on Firefox 5. Your browser might have the old JS cached (might have to hit shift-F5), or maybe I missed a browser-specific issue. Or you don't have Javascript running. Eyes User-Eyes-Sig.png 03:44, 14 July 2011 (UTC)
I did have to make one more change, though. The link wasn't going to the right page; I made a mistake in that part. It's fixed in User:Eyes/STO redirect patch now. Eyes User-Eyes-Sig.png 03:49, 14 July 2011 (UTC)
Made the change and it's now working. Good work! --MatthewM 04:03, 14 July 2011 (UTC)

Lots of updates[edit source]

I seem to have missed a lot of updates to the skin (nobody mentioned any of this to me) so I have no idea what version its on.

If you want to change things you will now have to send them through whoever is editing the skin CSS because the changes have been made directly on the live site, I don't know what changes have been made.


Carl 19:45, 19 July 2011 (UTC)

As far as I know, all changes have made only through MediaWiki:STO.css and MediaWiki:Common.js. There are only two changes I know of specific to the STO skin:
  1. a fix for the "Upload Multiple Files" link to deal with the extension putting it in <li> tags (that's what you see in MediaWiki:STO.css)
  2. a Javascript hack to put notices on pages after ypu get redirected (that's on MediaWiki:Common.js). (And that's more an ugly and temporary hack than an actual change to the skin.)
I don't think anyone here has access to the actual skin files, so nothing in /skins/sto/ has been touched (to my knowledge). Most of this page is just bug reports and suggestions; very little has actually been done. Eyes User-Eyes-Sig.png 10:36, 20 July 2011 (UTC)

I'd have rather updated on an offline copy instead of making changes to the live skin, then uploaded the changes maybe once a week or something. That's traditionally how websites are maintained to prevent them forking off down different paths that nobody can track, and also make sure the changes don't have any unintentional effects. If you're OK maintaining it this way then I'm happy to let you take over. Carl 15:43, 24 July 2011 (UTC)

I've answered this in a email. Publicly, I don't think there's any reason the wiki can't run by normal wiki practices and you can't update the skin your way, because the total of three workarounds sit on "top" of the skin, so to speak. If you copied the files of the skin to another wiki, nothing we've done would transfer with it. Eyes User-Eyes-Sig.png 17:02, 24 July 2011 (UTC)

Wiki Skin Problems[edit source]

← moved from Project talk:Community Portal#Wiki Skin Problems

I'm having a few problems with the new skin: 1. The new contents boxes have messed up the allignment on lots of pages (see my profile and KA walkthrough page) 2. Allignment of text in contents boxes is wrong (see KA walkthrough page) 3. When you close a contents box it closes every contents box you see and you can't reopen any of them 4. Picture boxes mess up text allignment when taking a new paragraph (see KA walkthrough page)

I hope these problems can be fixed--Cyrano.Jones 14:50, 21 July 2011 (UTC)

I believe 1, 2, and 4 are all the same problem, which has already been noted a few times. This skin uses full justification, which isn't a great thing to be applied to all text in articles. On that, if no one objects within a couple days, I'll override it in MediaWiki:STO.css until a more permanent decision is made (or if full justification is really desired, until the skin author or myself find ways to apply it only where it works).
I can't reproduce issue #3. Could you please provide more information, especially which browser (and which version) you're using? (And if you're using any extensions like NoScript that might interfere with Javascript.) Eyes User-Eyes-Sig.png 15:24, 21 July 2011 (UTC)
I am using the last version of Internet Explorer 8 (because IE9 annoys me) on a Windows 7 32-Bit Dell XPS M1530. When I click the 'hide' button on a contents box it closes and there is no option to re-open the box.--Cyrano.Jones 11:22, 22 July 2011 (UTC)
Please see if the contents box works properly for you on this page. You see, the HTML and Javascript for the Contents boxes are completely identical between Monobook, Vector, and this skin, so it's hard to see why this would be a skin-specific issue. Only the CSS is any different, and I don't see anything that should prevent the show link from appearing.
Also, when you hide the contents box, it sets a cookie in your browser to immediately hide others when you go to other pages. Clearing the cookie for STOWiki should reset this, but you'll no doubt have to log in again. Eyes User-Eyes-Sig.png 12:22, 22 July 2011 (UTC)
Works fine on that page. I cleared my cookies and it worked-had to log in though--Cyrano.Jones 12:28, 22 July 2011 (UTC)

Klingon skin version[edit source]

With User:RachelGarrett and I having taken custody of our skin, she is considering making a Klingon version of the skin. I am considering different ways to implement it.

  • Random selection on each page load, like the banners.
    • Likely to be difficult to implement, due to the need for both different images and different CSS. Could probably be done by having a "federation" or "klingon" CSS class added to the body, giving us a way to split the differing CSS styles and ensure tables/infoboxes display with the appropriate colors.
  • Klingon skin standard on specific pages.
    • Same issues as above, but adds the implementation issue of determining what skin gets applied to a specific page. Assigning to a category may be the easiest way, assuming I can figure out how to query for the category within the skin itself.
  • Two separate skins.
    • Easiest to implement, though probably harder to maintain over the long run. The CSS in the skin itself as well as on the wiki would have to be kept synched except for those rules that differ. Will have to investigate if it's possible to separate out only the differing elements and have a common folder/CSS page/JS page for all versions of the STO skin along with the skin-specific ones.

Suggestions? Comments? Eyes User-Eyes-Sig.png 08:16, 2 August 2011 (UTC)

I would vote for option three. Since the skins only differ in color, one could try to factor out common elements to a common "parent" style sheet. That would make the maintenance much less painful. Of course, option two would be totally cool, but I for one would be satisfied to offer registered users the Klingon skin as kind of an Easter egg. On special occasions (like new Klingon content releases), we could switch the default skin to Klingon for a week or two, just for the fun of it. --RachelGarrett 10:29, 5 August 2011 (UTC)
One improvement to option three is ready. I wrote an extension that will load MediaWiki:Sto-common.css and MediaWiki:Sto-common.js for skins it's enabled for (plus the normal loading of MediaWiki:Sto.css and MediaWiki:Sto.js), and also User:username/sto-common.css and User:username/sto-common.js, assuming all of the configuration options enabling user CSS and JS are set to true. Separating the file structure of the skin into a folder for common STO resources and the specific Federation/Klingon ones will be easier, so more than halfway there on a light-maintenance version of option three. Eyes User-Eyes-Sig.png 20:53, 5 August 2011 (UTC)

Update[edit source]

Option three has been developed and is ready for deployment, pending working things out with Curse (especially since a bit of this relies on a custom extension I wrote for giving us a common CSS page for all STO skin variants).

You can see the differences by using the links to my sandbox wiki below (yeah, the images are all missing, I haven't bothered copying those to the sandbox wiki, as with most pages):

Federation Klingon
Main Page Main Page
A mission page A mission page
An item set page An item set page
An accolade page An accolade page
An NPC page An NPC page

The Klingon view does bring up a couple questions:

  • Faction color issue with infoboxes: looks like we might need to do the same thing with these that I did for the Faction page, only I'm a bit iffy about black backgrounds for these because it breaks the "in-game" look. Create styles for faction background colors (at least for the two playable factions) and a factionbgcolor template?
  • Item infoboxes: I don't even know why they have a background image... it looks like a solid color anyway. Should they just be colored like an ordinary infobox? Eyes User-Eyes-Sig.png 17:44, 7 August 2011 (UTC)


- Shouldn't be the upper left badge a klingon empire badge instead of a red coloured federation badge? --Dukedom 19:31, 7 August 2011 (UTC)