Forum:New theme proposal

I know that every time a new theme discussion is started, it seems to inevitably lead to problems. But, I also know that our wiki theme is a bit dated and could badly use a new coat of paint. Right now most of our thematic elements are TS3-based and are starting to show their age. Where we've had issues in the past is in collectively deciding what we should do about this.

To alleviate that issue, I've been working on a new design on my test wiki. I am now reaching the point in the process where I need input from others. I've asked a few folks on the IRC channel what they think of my work so far, but I'd really like a wider range of input.

So, without further ado, click here to see the redesign live. Or, take a look at the screenshots I've posted below:

''Note: Screenshots are from my computer, with 1080x1920 resolution. If your screen is smaller than this, there may be some visual differences. Your mileage may vary.''


 * Some information
 * There are some templates missing, missing files, and redlinks present in the screenshots and on the test wiki; please do your best to pretend they're not there, or that the content that should be there actually is there. It would take a lot of work to get all of that content populated in, since the screenshots were taken from a completely separate wiki.
 * A few of the "odd" features have been removed, such as the Events template and History/Random Quote generator. I'd like to find a home for those features, but right now they sorta clutter up the main page and are really hard to find a good spot for.
 * The Sims Pen has been consolidated into The Sims Wiki News (re-named "community news" to encompass both), to reduce the amount of space dedicated to blogs on the main page. The Sims News selection has also been reduced to 2 blog posts, since it isn't updated as frequently.
 * I removed the "Recent releases and updates" list; the list tends to be so full of patches that the real game releases get lost. To compensate for this, I set up a new "recent releases" section on the right bar.
 * I removed the "forums interface" wheel. The wheel does not work on mobile versions of the main page, and really don't fit in with the new theme.
 * The "Chat module" needs to be updated; please pretend it doesn't stick out like a sore thumb.

I'd like to get feedback on this design, including pointers on what can be updated, fixed or improved. If responses here are positive to this design, I'd like to implement it on The Sims Wiki fully.

So what does everyone think? --  LostInRiverview talk • blog  •  contribs 02:01, March 24, 2015 (UTC)

Initial discussion

 * So far so good. It may need a little more touching up, but overall I'd be happy with that as the new wiki theme. --  C.Syde  ( talk &#124;  contribs ) 03:26, March 24, 2015 (UTC)
 * What kinds of touch-ups would you suggest? Do you have any specific improvements in mind? --  LostInRiverview talk • blog  •  contribs 03:41, March 24, 2015 (UTC)
 * Replacing the Sims 3 pictures with the Sims 4 ones. I noticed that there are Sims 4 pictures in the wiki theme proposal, but there don't seem to be any where the Sims 3 pictures used to be. Although it may look fine the way it is at this stage. I'm just used to having the Sims pictures where they are. --  C.Syde  ( talk &#124;  contribs ) 03:43, March 24, 2015 (UTC)
 * Sims 3 pictures? I'm not sure what you're referring to. I just added icons to the main page there, but those are all from TS4. And, there are a few rotating "pagecover" images at the top, but they're all TS4 based as well. --  LostInRiverview talk • blog  •  contribs 03:53, March 24, 2015 (UTC)
 * I was talking about the Sims 3 pictures of the current wiki theme on the Sims wiki. --  C.Syde  ( talk &#124;  contribs ) 04:01, March 24, 2015 (UTC)

Personally, I absolutely love it. It's a nice, fresh, modern-looking update to our theme. I think it would be a good idea to find a way to get Pluto Sans, the font used in TS4, onto the wiki, if that is not too much trouble for the community (I know it's possible because we've done it over on Infinite Histories). The proposal is a great improvement over our somewhat-outdated TS3 theme. However, what happened to the separation of TSW News and TSP? &#8213; The  Tim   Man  (Infinite Histories • Galactic Crucibles • The Sims Wiki • Hallows Maleficent • Why I'm here in the first place ) 16:29, March 24, 2015 (UTC)
 * I looked into a custom font, but there are licensing issues involved in doing that. Ultimately we'd need to find a nice-looking font with a license that allows use on a website, which is actually easier said than done. My guess is that "Pluto Sans" is a licensed (i.e. non-free) font, so our using it would be copyright violation unless we purchased the rights to use it.


 * Regarding The Sims Wiki News and The Sims Pen... it's a space-saving measure. Ultimately TSP is "fanon news" (in a sense), so bundling it together with "wiki news" makes sense. The two features are still separate, they're simply shown together. --  LostInRiverview talk • blog  •  contribs 16:43, March 24, 2015 (UTC)

I'll give you the same answer I gave you on IRC last night; this theme is pretty cool. I like how you interpreted a modern theme, and made it look a lot like The Sims 4. The colors go really well together, and I like how you shadowed the headers; non-shadowed text gives of a blurry vibe, and that would most certainly not be a good look for the theme, in my opinion. Overall, this is a great theme and if we were to use it, I'd be more than happy to support it. ~ Beds (talk - blog ) 16:59, March 24, 2015 (UTC)

I don't really have much to input other than what has been said. To be honest, I don't really know what Sims 4 looks like because I haven't played it because I haven't had much interest to do so. (I haven't even gotten into Sims 3 yet. HA!) I guess it matched the theme of the Sims 4. I will say that it does look good from an overall point of view. -- Icemandeaf (talk) 17:14, March 24, 2015 (UTC)


 * I think it looks good. I don't think I have anything to add to the discussion aside from my opinion.  22:29, March 24, 2015 (UTC)

I just wanted to give an update here, and maybe lay the way forward from this point.

It looks like the response to the changes is good, which I appreciate. I'm actually very eager to roll this out, but I do want to give it a few more days at least to ensure that everyone has a chance to weigh in. That being said, assuming support for the redesign continues, I want to discuss how we move forward after the initial change. When we decide to roll out the change, there will be a coordinated updating of the Main Page, MediaWiki:Wikia.css page, and the wiki's theme via the Theme Designer tool. After this change, there will still be work to do in order to get the theme fully implemented. For starters, every location on the wiki that currently uses "MP header blue" or "MP header green" (except the Main Page and some "modules" elsewhere) will still be using the old header designs and will need to be switched over. For example, we have several Portal pages that will need updating. After this, there will likely be a lengthy period of tweaking things to make them fit and work just right, but this is to be expected and should not cause any major issues. Eventually, I do hope to continue the theme rollout to major templates on the wiki, including Metabox, Pagecover, and the infoboxes, but that is a ways into the future and not one of my immediate concerns. I just wanted to make sure everyone was aware that simply changing a few pages isn't the end of this process; we'll need to continue the work past that in order to truly complete the update.

In any case, I am as always receptive to any questions or concerns about the proposed design. It's not too late to make changes, if there's something about the new theme or the new Main Page design you don't like. Also, be sure to check out the current design, as I've made a few changes since the initial proposal, including adding some icons to the headers. The screenshots posted on this thread are no longer totally up-to-date. --  LostInRiverview talk • blog  •  contribs 05:47, March 25, 2015 (UTC)

I'd remove the "placeholder for icons", since the icons have found a new home under the "Welcome to The Sims Wiki!" text. Would that make more room for the random quote/today's events stuff? --I am  k6ka  Talk to me!   See what I have done  11:31, March 25, 2015 (UTC)
 * Probably not. Right now the right side is slightly shorter than the left side, but you have to factor in the ad that appears (for those without an ad blocker) at the top of the right side, which will push the content down. Since Wikia seems to be allowing skyscraper ads (300 x 600px) instead of the usual 300 x 250 ads, the length factor is even more severe. With the current configuration, even without history, events, or quotes, all of the Chat module and almost all of the Battles module are forced down below the bottom of the left-hand side when the page is loaded with a skyscraper ad. --  LostInRiverview talk • blog  •  contribs 14:29, March 25, 2015 (UTC)


 * I'm a little late to the information, but I've talked to LiR about the overall of this redesign idea. My opinion is very positive about this idea. I don't know where to start, but it's more or less just like what others said. I really like the style. It matches the current era of the series. Honestly, the old theme is pretty old; I still like it, but it had to change somehow.


 * I just think if there are any ideas for improvement for the blog list on the main page. It looks a little sparse (I wish the list could give preview of the content instead of just the title), and when I look from LiR's screen above, it's even sparser. I thought about making the TSW News blogs and Community News blogs to be side-by-side, but I think it looks worse. Other than that, everything is just great!  Nikel  Talk  –  Vote!  06:28, March 27, 2015 (UTC)


 * I definitely agree about the sparse-ness of the main page blog listsing. I do believe, but I could be completely wrong, that it is possible to have some text display, but I don't know how to go about doing that and can't remember where or when I've seen it before. Regarding setting into columns; I intentionally avoided doing that specifically because the lists do not render correctly on mobile devices. In fact, aside from the links at the top and the Featured Media/Editor modules at bottom, the other columns have been removed specifically for that reason. I'm not saying it's good or bad, but that was my train of thought when I made the decision to lay it out as I did. --  LostInRiverview talk • blog  •  contribs 06:39, March 27, 2015 (UTC)

Style information
I want to make sure as many people understand some of the new things I've implemented with this theme change. I do know that this process was a bit speedy (I apologize for my eager impatience, but I was simply too eager and impatient to wait!) and that I was more-or-less the sole person working on the code for the new theme, but I want to make sure everyone (or at least everyone who is interested in knowing) knows some of the "standards" of the new theme.

The most noticeable addition is two new headers, meant to replace the familiar "headerblue" and "headergreen." To confuse matters, the new headers are also blue and green.


 * Old headers

New blue header New green header
 * New headers

The old headers can be evoked in multiple ways - by inserting the css style code directly, or by evoking the "MP header blue" and "MP header green" templates. Right now, the new headers do not have a template, but their appearance is coded into the wiki's css pages, and evoking them is simple enough: Your text here Your text here

The MP header blue/green templates allow you to add images to the bar, whereas right now image addition to the bluebar/greenbar is manual.

Unlike the old header bars, the new headers do not use images to create their background. This means the bars are much more versatile and flexible to alternative widths. Observe:

Sometimes if the text was too long or the bar was too short, the text would wrap to the next line and would cause some issues with the background image used on the template, as you can see here As you can see, the same issue does not repeat itself with the new header bar. I would not encourage using the header in this manner, but as you can see, it does at least function as intended

Sometimes if the text was too long or the bar was too short, the text would wrap to the next line and would cause some issues with the background image used on the template, as you can see here As you can see, the same issue does not repeat itself with the new header bar. I would not encourage using the header in this manner, but as you can see, it does at least function as intended

The new bars have a simple code, which is defined in the css pages but which can be changed on an as-needed basis using tags. For instance, you could adjust the bar's default margins, default width, eliminate the text shadow, or really anything else you want to do. For sake of knowledge, here are the default settings for the new headers:

Additionally, the two headers make use of a linear gradient background, with two colors (a start color and end color) specified for each. The colors are:

greenbar: bluebar:

In addition to the headers, the only real noteworthy addition is the "shadow line," meant to replace the colored horizontal line. It can be evoked simply by typing. The shadowbar is still slightly work-in-progress, especially regarding its thickness and amount of shadow. At the present time, the default settings for the shadow line are. This produces the following line:

The line, like the header boxes, will re-shape to fit whatever container it's placed in, or else can be shortened manually.  LostInRiverview talk • blog  •  contribs 04:18, March 27, 2015 (UTC)

Further steps
As you have likely noticed, the new theme has been implemented. There is still some work that needs to be done, as well as some additional opportunities for improving what we've created. Here are just a few of the tasks that could, or perhaps should, be undertaken, in no particular order:

1. Update the portal pages - Right now, the portal pages (like the admin portal or fanon portal, for instance) utilize the "old style" design. Of course the priority first and foremost was to get the major theme change and Main Page changes taken care of first, but the other portals are also important and should be updated to reflect the style of the Main Page.

2. Change the infobox templates - This is a more long-term idea that I have, involving making some substantial visual changes to the wiki's infoboxes, including the dreaded Sim infoboxes. My rough idea right now is to modernize their appearance, more in line with what we've done to the main page; this would include replacing outdated icons with TS4-era icons, re-styling the boxes to be sleeker, and ensuring that all the infoboxes follow a cohesive scheme (believe it or not, but we have a few infoboxes that haven't even been brought up to the TS3-era theme yet). What would be really great would be to create a "master infobox" upon which all others would be built, so that way, any future changes to the boxes could be done once instead of a dozen times, but that's probably a pie in the sky idea. In any case, the infobox templates probably should be modernized.

3. Upgrade Metabox and Pagecover - Believe it or not, but the "header image" (or more correctly, images) that appears on the Main Page is displayed by a modified version of Pagecover. I do hope to update Pagecover to allow more theme customization and also to make it sleeker and more modern. Additionally, Metabox (and any template that uses it, which is quite a few) look somewhat dated now compared to the new theme, and should probably be improved as well.

4. Hunt for bugs - This theme change involved some changes to the wiki's CSS. I will openly admit I am not an expert with CSS, and much of what I did to get the theme to where it is was trial-and-error. Before bringing the code over from my test wiki to TSW, I went over it multiple times to get rid of any issues, and them copied the code over and implemented it. Aside from a few bumps in the road right at the beginning, things appear to be on solid ground now. But that's not to say that I didn't mess up something and just haven't realized it yet. So, I would encourage everyone to remain vigilant for anything which appears odd, wrong, or out of place, since it's likely my fault.

I'm going to leave this thread open for the meantime, as a place to discuss any issues with the new theme, plan further implementations, or whatever. If the thread dies out we can archive it at some point a few weeks from now. --  LostInRiverview talk • blog  •  contribs 04:18, March 27, 2015 (UTC)


 * I actually quite like it how it is! :) But yeah, it does look good without the adds. I'm curious as to how the adds were removed. --  C.Syde  ( talk &#124;  contribs ) 04:51, March 27, 2015 (UTC)
 * "How the ads were removed"? What are you talking about? The ads are still there, as always. --  LostInRiverview talk • blog  •  contribs 05:12, March 27, 2015 (UTC)


 * Well, I can't see any adds on the recent wiki activity window on my PC. --  C.Syde  ( talk &#124;  contribs ) 05:19, March 27, 2015 (UTC)


 * Recent activity doesn't have ads on it. The theme change has nothing to do with that. --  LostInRiverview talk • blog  •  contribs 05:24, March 27, 2015 (UTC)


 * Oh, okay. I didn't realise that. --  C.Syde  ( talk &#124;  contribs ) 05:30, March 27, 2015 (UTC)
 * Minor_interface_changes_2015theme.png've changed a couple of things slightly to match the new theme a little bit better. You can check these out on the image to the right, with the one at the top being the new version and the one at the bottom being the older one. Since these are only minor changes and I doubt any controversy will come from them I've implemented them but if anyone has any issues or suggestions, either in regards to these or other things to do I'm all ears. (shoutout to half of the irc channel for spamming my talkpage to get new message prompts)

Metabox
Relocated discussion to Forum:New Metabox development -  LostInRiverview talk • blog  •  contribs 18:57, March 30, 2015 (UTC)

Bugs, glitches, and issues
Wikia chat seems to have attempted to catch up with the update but fell behind. Firstly, the TS3 mosaic at the top is still there. Also, the background of chat just looks awkward in comparison with the white chat in the middle. --I am  k6ka  Talk to me!   See what I have done  20:45, March 27, 2015 (UTC)
 * I wouldn't call this a bug or a glitch... the chat was not part of my initial re-theme. Feel free to add this to the list. -  LostInRiverview talk •  blog  •  contribs 21:01, March 27, 2015 (UTC)
 * I don't know if this is the right place in the thread but I guess I'll just post a couple of things I've noticed. Firstly, there's a lot of white which is particularly noticeable on the main page. Secondly, the styling for the category boxes is no longer there which I was informed was intentional but I would like to see what it looks like if there was a colored border or something similar. Finally, some margins and spacings look a bit strange. Again, the main page is a good example again (the chat header is a fair bit wider than the headers above it, some things like the monthly question text sticks out a bit before the header which looks a bit strange imo). Nothing else to add other than it looks nice and its a good update.
 * The white space is an unfortunate reality that I am not sure how we'd correct. A lot of the empty space is in the blog post listing, but there's no better way to list them out. If we list the blog posts in columns, they are very distorted when viewing the page on a mobile device. It would be nice if there was a preview text available for the post but I'm not aware of how that can be accomplished. Regarding the border around the category box - of course it's always possible to add color back in, but my personal preference is to leave it off; if we add a color border, it will be pretty much the only element thematically that has one, as the other elements have the same border style. Regarding margin and spacing issues... it is a known issue, but feel free to correct any problems you might come across. Specifically regarding the chat header, my hands are kinda tied on that one. The chat module in general is a PITA to change and "fixing" it in one location tends to break it in several others, so I've pretty much just given up on getting it perfect. The rest of the issues you described can probably be remedied with some margin or padding changes. --  LostInRiverview talk • blog  •  contribs 23:58, March 27, 2015 (UTC)
 * I might try to spruce up chat later if I remember to. So I'm not posting nothing, what would everyone think about phasing out the old headinggreen and headingblue that we have on the forums, various portals and upcoming blogs, among other things? I'm not sure how we'd go about doing this since I don't really just want to replace the div classes since that would make them look a bit dodgy (the old headers were circular, as were many of the borders, so if we just replace them with square headers they look bad against the circular borders), perhaps just manually update the important things like the portals and leave less important things such as the plethora of news blogs as is and just start doing them differently from now on.
 * My general plan was to start by changing the wiki theme and main page style, then work the changes outwards to the other pages and portals. That way, we don't have to worry about getting everything set into place simultaneously. Now that the theme is in place and there are no significant problems, it would make sense to expand the style out to the other places, like the portals, blogs, Chat, etc. I think it would be best to avoid going back into previous blogs and adjusting the theme, unless those blogs use Blogheader, in which case they'll automatically. --  LostInRiverview talk • blog  •  contribs 05:26, April 3, 2015 (UTC)
 * I have one thing to point out. We're going to use module system for the main page, e.g. upcoming release countdown template so we don't have to touch the main page so often, right? I know the main page and the overall theme are still under development, but I just want to make sure about that.  Nikel  Talk  –  Vote!  07:36, April 3, 2015 (UTC)

Pagecover
Continuing the epic updating saga, I have tweaked Pagecover. The redesign isn't nearly as dramatic as the Main Page style change or new Metabox design, but that's mostly because there's not much going on with Pagecover as far as design elements are concerned. I'll display the current and proposed formats below for easy comparison:



The new Pagecover is backward compatible with the old Pagecover parameters, and has three new parameters of note:,  , and.

Generation will re-color the background of the "header" on the template to the color for the particular generation or "era" of the game. For instance:
 * Generation



There are currently four generations in the template - TS/The Sims, TS2/The Sims 2, TS3/The Sims 3, and TS4/The Sims 4, though we can add other cases as needed (e.g. The Urbz, The Sims Stories, The Sims Medieval).

Backgroundcolor will override generation, and change the background to a specified color.
 * Backgroundcolor

The "header" on Pagecover can be adjusted to be either left-aligned, right-aligned, or center-aligned, by filling in the  parameter. The template right-aligns by default, as the current Pagecover does.
 * Align

   Thoughts? Input? Ideas? Suggestions? Complaints? Compliments? Questions? Queries? Concerns? Inquiries? Inklings? Urges? Desires? Wishes? Let me know what you think. --  LostInRiverview talk • blog  •  contribs 20:49, April 4, 2015 (UTC)
 * Left-aligned is preferable. Ѧüя◎ґ (talk) 04:21, April 5, 2015 (UTC)
 * Do you think a slightly transparent background would look good? 85% maybe?  Nikel  Talk  –  Vote!  05:53, April 5, 2015 (UTC)
 * Let's see:


 * I mean, the semi-transparency doesn't hurt anything, but it also doesn't add much. --  LostInRiverview talk • blog  •  contribs 04:32, April 6, 2015 (UTC)

<div style="height:px; color: #F9F9F9; font-weight: bold; position:relative; overflow:hidden; border: 1px solid #E0E0E0; box-shadow: 1px 1px 3px #777;"><div style="position:absolute;margin-top:-px;">
 * You're right... I tried making TS2 pagecover above to be 75% opaque, but it looks ugly and a bit grey-ish. Opacity lower than 85% seems to look bad. I slightly prefer the background to be opaque than solid-colored.  Nikel  Talk  –  Vote!  10:51, April 6, 2015 (UTC)
 * I do not like that 75% opacity at all. Testing out the example you posted, generally anything below 85% allows too much show-through IMO. --  LostInRiverview talk • blog  •  contribs 14:10, April 6, 2015 (UTC)

Progress update
I'd like to briefly update everyone on the progress of new theme implementation: Is there anything I'm missing from this list?

As you can see, there's some work left to be done. The elephant in the room if, of course, the infoboxes. I've worked on a mockup of a new design, which is (currently) visible on the Sandbox for you to inspect. Perhaps we should focus our attention on the infobox re-theme and portal re-themes next. Of course, any help given is appreciated! --  LostInRiverview talk • blog  •  contribs 06:47, April 10, 2015 (UTC)


 * If redesigning the portals merely swaps the theme like I did here, I'm up for it. It's pretty simple actually, but I want to know if others find it good enough. What is forum page redesign?  Nikel  Talk  –  Vote!  13:13, April 16, 2015 (UTC)
 * I'd only suggest changing the margin at the top a little, 20px looks a bit off. I personally like 5px. I'm going to take a guess and assume forum page redesign is just changing the old blue/green bars over to the new theme and maybe a couple of other things. I might take a stab at it later, along with chat.
 * I only followed the style on the main page. I guess it's 20px if the blue header has an image, and 5px if it doesn't. I went ahead and changed the community portal because it's been 4 days without any input other than yours. It can easily be changed later in the portal itself if something needs tweaking, I guess.  Nikel  Talk  –  Vote!  11:03, April 20, 2015 (UTC)
 * [[file:Chat redesign draft.png|right|thumb]]So I put this together earlier but I was suffering from a complete lack of inspiration and anything I tried looked completely awful. I tried adding the colors from bluebar/greenbar to the header but it looked really off. That, and chat is a bit of a pain to edit... Anyway, I've bolded names on the userlist, removed the old mosaic, and changed the user panel as the plumb(b)ob stuck out like a sore thumb. I also added a subtle light-green gradient below the chat that I rather like. It benefits the highlight that was already there and used for your own messages, so they stand out a little easier. As I was writing this I came up with a couple of other things I might try later but this is an early draft. Sorry for not being able to come up with something amazing but I'll leave this open for feedback. Will mess around with forum design a bit later.


 * EDIT: Forgot to mention that I tried using our white plumbbob mosaic thing in place of the sim faces mosaic and that didn't turn out well either. Will provide pictures of my numerous failures on request if anyone asks for them
 * Draft of forum index and cd forum index. Will change it more tomorrow. Button looks a little bit off, maybe I'll try to see what I can do with buttons as well.
 * I should have mentioned, I already redid the Off-topic forum index. -  LostInRiverview talk • blog  •  contribs 16:21, April 20, 2015 (UTC)

Update: I guess we could say we're done with updating the portal theme? Unless I missed some that needs updating, that is. In addition, I made templates for the blue and green header: Headerblue and Headergreen.  Nikel  Talk  –  Vote!  05:24, May 2, 2015 (UTC)