Forum:New theme proposal

Forums: Index → Community discussions → New theme proposal | Post

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.

The Main Page, showing advertisements
Main page, without ads
Main page, scrolled down
Showing modified wiki navigation menus

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 | 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 | 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 | 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? ―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. DanPin • talk • contribs 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)

Bottom of the main page, with a skyscraper ad loaded in at the top

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

Old Blue header

Old Green header

New headers

New blue header

New green header

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:

<div class=bluebar>Your text here</div>

<div class=greenbar>Your text here</div>

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 <div style=" "> 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: margin: 5px; padding: 5px; color: white; font-size: 110%; font-weight: bold; text-shadow: 1px 1px 2px #222; box-shadow: 1px 1px 3px #777;

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: linear-gradient(to right, #4CAD40, #96CF24);
bluebar: linear-gradient(to right, #2E70B7, #25A8E0);

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

<hr class=shadowline/>

. 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 margin: 1em 0; padding: 0.5px; border: 1px solid #E0E0E0; box-shadow: inset 0 0 3px #E0E0E0; border-radius: 1em; width: auto;. 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)

(edit conflict) 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 | 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 | 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 | contribs) 05:30, March 27, 2015 (UTC)

Metabox

On the subject of updating {{Metabox}}, I accidentally worked up this as a new style of message box. What do you think?

This is Metabox

Hi, I'm Metabox! I'm sure I look familiar to you, don't I?

Hello!

I don't have a name yet, because I'm brand new! What do you think of me?

As I said, this design was more-or-less a complete accident, much like the headers on the main page. I think it would be a pretty good replacement for Metabox, but I'd like to hear what you all think about that. Here's another "real case" example to compare the two:

Metabox deletion template

Delete

This page has been nominated for deletion. Reason: just because
You can discuss this nomination at Category talk:Candidates for deletion.

"New Metabox" deletion template

Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

Thoughts? -- LostInRiverview^{talk • blog • contribs} 05:53, March 27, 2015 (UTC)

The metabox is excellent! It looks really pretty! But I've already told this to LiR on IRC. :p I have one thing in mind. In the above examples, you used icons from TS3 and TS4. The one from TS4 is rescaled to 60px, but all icons from TS3 are in 54x54px. You can see the "Hello!" header text doesn't align with content text.

This can be fixed if the header text is wrapped around, like how LiR did it with the content text by adding margin to the text. The wraparound is necessary so that the text would align if it's really long. Since header text is rarely more than 2 lines, LiR didn't use it there, and I agreed. But seeing this small problem, I think that wrapping around the header text can also solve it.

Hello!

I don't have a name yet, because I'm brand new! What do you think of me?

What do you think? Nikel _Talk _– _Vote! 06:28, March 27, 2015 (UTC)

Another thing is that since TS3 icons are smaller than TS4 ones, the icon above looks hanging to the border... Maybe if it's centered it would look better for smaller icons? I'll try tweaking it and see how it looks. Nikel _Talk _– _Vote! 06:31, March 27, 2015 (UTC)

Hello!

I don't have a name yet, because I'm brand new! What do you think of me?

Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

There. I made the div width 70px and the icon float center. It's subtle, but... I like it better. Nikel _Talk _– _Vote! 06:38, March 27, 2015 (UTC)

You're right, that is an improvement. You can actually notice the header protrudes slightly more on the left now. Very good job. -- LostInRiverview^{talk • blog • contribs} 06:41, March 27, 2015 (UTC)

I was kinda skeptic about this new theme, but it really looks good! I love the green color here! Øôppdëckš 08:09, March 27, 2015 (UTC)

I think the Metabox looks good with the fresh look. I do Nikel's improvement make it look better. I like it. -- Icemandeaf (talk) 17:00, March 27, 2015 (UTC)

Hello!

I don't have a name yet, because I'm brand new! What do you think of me?

Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

I added rounded borders (because I like the roundedness, but you can do away with it if you don't want it). A left margin to the icon was also added so that it wouldn't hide the newly rounded header. And I also added a bottom margin to the Metabox so that the shadow isn't completely hidden when there are multiple boxes stacked onto each other. I know it is very subtle, but it seems to make a difference to me. What do you all think? -- Icemandeaf (talk) 17:21, March 27, 2015 (UTC)

When I developed the theme and the main page style, I deliberately avoided rounded corners. My preference would be to keep the squared corner style going in the other templates, but of course if others would like to have the round corners instead, that's something that can be decided. My focus right now is to get Metabox in-line with the main page style, which does not use rounded corners. So, if we choose to make this box with rounded corners, then that should probably be applied to the main page style as well. As far as my own personal opinion, I would rather keep the square corners. -- LostInRiverview^{talk • blog • contribs} 18:41, March 27, 2015 (UTC)

Understandable, and I am actually ok with that. So here is the changes without the rounded corners. Very minor stuff, but I think the margins added make it look nice. -- Icemandeaf (talk) 18:53, March 27, 2015 (UTC)

Hello!

I don't have a name yet, because I'm brand new! What do you think of me?

Delete

This page has been nominated for deletion. Reason: just because

You can discuss this nomination at Category talk:Candidates for deletion.

┌────────────────────────────────────────────────────────────────────────────────────────────────────┘I do have a concern regarding font colors versus the header colors, specifically for the yellow/gold "featured content" templates. Take a look:

"Featured content" gold

Bugs, glitches, and issues

click to enlarge

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. ―ฬђ ^talk 23:45, March 27, 2015 (UTC)

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)