Forum:Main page redesign, fonts, + a million other things

Forum: The Situation Room > Main page redesign, fonts, + a million other things

So I started a mirror wiki to experiment with the digital clock and title fonts - everything kind of snowballed and I made it a test bed for a ton of different ideas I've had recently. I figured I would keep it in one thread so we can talk about them individually, they all tie together in different ways.

Feel free to visit, mess around, test things out! I'm really excited to start updating the site for the new series --Pyramidhead (talk) 00:22, October 23, 2016 (UTC)

Not sure I'm using this page correctly, but I just wanted to comment I'm usually critical of big changes but your changes all look great. Except the "Beyond" button could possibly be "Extended Universe" or so for easier understanding. Although maybe that's a bit too long. I think we should have an updated main icon. I'm referring to the one with Jack, David Palmer and Chloe. We should have one that adds the new lead Eric Carter to them. And maybe Tony Almeida, as he appeared in the third-most episodes? Maybe five characters would be too much, though. But all the icons and stuff look splendid. I'm all for these changes. Toranosuke Almeida (talk) 21:20, October 23, 2016 (UTC)

These are amazing changes, I support everything wholeheartedly. Especially the main page redesign and the excellent 24-font for time-stamps etc. inside the episode guide text. Thank you for doing all this Pyramidhead!

Would you be opposed to making the text for New Page template a bit larger? It's easily overlooked so small. Also is there any way to keep a table for the character Live Appearances? Blue Rook  talk  contribs 16:31, October 25, 2016 (UTC)

These are indeed amazing changes. Very slick and modern-looking. I'm at work now, so I'll make sure to check them out more calmly when I'm at home, but everything I saw, I loved. Thanks for the hard work, Pyramidhead. Thief12 (talk) 16:47, October 25, 2016 (UTC)

Thanks all! Good to hear :) Blue Rook about the table, I think the fact that it's such a wide (or collapsible) table is why it seems to disappear on mobile. It would be nice to be able to keep it arranged like it is now; I was going to try a "hybrid" approach where the list items are side-to-side for each season but I thought it would break down when you have the modifiers (mentinoed only, etc). I'll try it out and see if possibe --Pyramidhead (talk) 23:25, October 25, 2016 (UTC)

Actually, now that I think about it - every character's specific episode appearances (for all the ones with enough to matter) are on Character appearances. I get the appeal of seeing the "blocks" each character occupies in each season, but even if it's not possible to show that on the actual page it is still available elsewhere - maybe we could link to the particular row on Character appearances from the "Episodes" table on the new template? --Pyramidhead (talk) 23:34, October 25, 2016 (UTC)

Example - click one of the episode counts in the right table --Pyramidhead (talk) 00:01, October 26, 2016 (UTC)

Echo the awesome you've put in! I like lots about the proposed changes, but not everything - I'll try and put some thoughts down in the different sections.--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Main page redesign

The main page is old and it's starting to show. I've never been a huge fan of the "portals" to be honest, they seem like an unnecessary barrier to the actual content - and two of them lead to ugly statistics pages. I decided to simplify it into three hubs with links below so you can immediately dive in. Besides that I also completely redesigned the countdown, the poll, and the other boxes.

Link: Main Page

I agree the main page needs an overhaul, and like the new design you're proposing!--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Episode pages - fonts

I personally think this looks awesome - we can replace the digital clock notes and the title card text with the real thing. There's also a Day 9 variant. These would be easy to switch over with the bot if we wanted - I also added a "following" template to standardize the "The following takes place" notes

Link: 1x01, 2x08, 9x01, 9x04

I have to admit I find this a bit ugly. I think the mix of three different colours of text doesn't look great, and I especially don't like the links within the yellow writing as they are essentially "hidden" links (you can't see that they're links). The LAD stuff isn't as bad, as the colour actually matches the on-screen text but the other colours are off (too yellow). However I like the idea of the page titles being in the 24 font, but the usual text colour--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Good point about links - any better like this? As for the colors I have had a hell of a time figuring out what the vanilla clock color should be; it seems to change in every screenshot I pull up. Certainly room for changes there, I just made it a little paler - any better on your end now? I just think it looks so cool amidst the episode summaries - really want to make it work for everyone --Pyramidhead (talk) 01:10, October 27, 2016 (UTC)

The colour still seems too yellow to me, is it possible to alter it to make it paler? I;m not sure about the dotted lines under links (looks kind of old fashioned website style) - perhaps we could just not link when we use that extra font (as it's just used to replicate on-screen text). Does having that font in blue for links not work?--Acer4666 (talk) 15:53, November 5, 2016 (UTC)

Looks very, very weird to have parts of it in blue. We could just not link, but then we're back where we started - if it's all going to look uniform, there's no advantage in using plain text over links that people can still find. I don't know - does anyone else have a problem with links not being "obvious"? I think the font standing out is enough to indicate that there's probably something to click on --Pyramidhead (talk) 00:49, November 6, 2016 (UTC)

Appearances template

I originally proposed this a while back and thought I'd revisit. A major issue I recently found with the current template: It doesn't appear on mobile, at all. In fact the entire section and the h2 apparently just get dropped. This new one fixes that, and also it lets us keep track of mentions, photo & video appearances, etc. I think it should be treated as a corollary of the episode Appearances lists - everything you can link to from one should appear on the other. (I went over the other advantages in the original thread.) Added a logo so the actual seasons stand out clearer, and an episode count table (optional) since the parentheses numbers can be misleading. Going back on forth on whether to use the full titles or not.

Examples

Link: Jack Bauer, Los Angeles, Solarz, Miriam Bender

I also am not sure on this. Having appearances stacked vertically is a bit of a waste of space on the browser version, and I'm sure there is a better alternative for making them mobile friendly. I am for making the site better for mobile users, but not at the expense of the browser version of the site. I think the current appearances are more space efficient and look better than bulleted lists of text.--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

It may be a bit taller for certain characters but I think for the vast majority of characters - the ones who show up in a handful of episodes, or just one book - it's a much better use of space than the current setup. Also, there's something to be said for being able to catalogue all the different mentions - or photo appearances, or video - which isn't possible at the moment, short of describing each one in the notes. For the ones with really long lists there's an option to have the top bullet, or - just added - you can put it into a scrollbox: link --Pyramidhead (talk) 01:10, October 27, 2016 (UTC)

I'm very against scroll boxes for this, having two scroll bars on a page is a nightmare to navigate in my opinion. Working mentions of characters into the appearances templates seems like a hugely complicated list that will be difficult to understand. I really like the visual of the appearances templates we have and to replace that with a simple list seems like a step backwards.

As for mobile users, is there any way to have a different template display on mobile pages?--Acer4666 (talk) 15:57, November 5, 2016 (UTC)

Newpage text

The newpage buttons I'm looking at right now (Actor, Character, Your personal user page) is just terrible. As far as I can tell it hasn't been changed in ten years! Made a new one with a lot more options and that actually fits in the space

Link: New Page

These are awesome - love them!--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

New episode tables, sidebar

General design tweaks, colors, etc. I redesigned the tables on each season page, giving the image more prominence and better using the width. As for the sidebar, I still strongly feel we should break the sidebar into separate templates for each page type. It's so much easier than the alternative, having to remember and apply three different modifiers for stacked or not stacked, subgroups or no subgroups, etc.

Couple random sidebar tweaks as well:

• New sections for Government service, Military service - not sure if conflict with Profession/Affiliation
• Combined birthdate/place/cause into Born and Died fields

Link: Season 1, Characters

I prefer the old style tables - perhaps this is just personal preference but I think the design is a lot better. I'm sure you've suggested this sort of change to the episode tables elsewhere and it didn't happen. Similarly, for the old sidebar debate, I'd prefer to continue that discussion where we left off--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Monobook friendly

Finally - all this is completely monobook friendly. We haven't been very good about keeping up with the old skin here, so I wanted to be sure it works as well on both.

Link: Jack Bauer

What isn't working on the current style in monobook? Hopefully we can try and fix it!--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Just random things that pop up, as I recall we put a lot of new styles into Wikia.css rather than common so different things don't render properly from time to time. For instance the image thumbnails have weird border defects atm --Pyramidhead (talk) 01:10, October 27, 2016 (UTC)

I like the new background too (having Jack and Eric Carter), but have to say I'm not too keen on the new wordmark/logo. The new text seems to be from the Legacy promos, which as far we know may never be seen on screen so seems a bit drastic to switch to that now. I like the current wordmark, has the "24" logo as it appears on screen for the majority of the series.

Hope you don't think I'm being too negative: I think this work is awesome, but want to make sure we make any big layout changes after thinking it all through etc.--Acer4666 (talk) 22:10, October 26, 2016 (UTC)

Absolutely! :) --Pyramidhead (talk) 01:10, October 27, 2016 (UTC)

Progress

Since the main page was approved by everyone I'm going to get working on that + the overall theme - bear with any bugs, they'll be fixed very soon! --Pyramidhead (talk) 18:05, November 3, 2016 (UTC)

Changes look really good! Some minor niggles I have about the theme changes so far: I have to caveat by saying some of these are really minor and pedantic, but one thing I find on Wikia is you can really tell when a Wiki has tried to customise because things are just very slightly not right and it's really annoying! Probably one of my biggest resistances to a full customisation of the site is this effect - as before, these little niggly things weren't around.

1. The number font is very slightly off in certain places: examples here. The text appears off from where the highlighting and underlining thinks they are positioned. Also on user pages showing edit counts, the numbers appear uncomfortably close to the "edits on this wiki" text, which I think is also due to the offset text. Additionally, the commas are nearer to the proceeding character rather than the preceding character, as commas should be. This may be an issue with the font you've grabbed, don't know if you're able to edit that font file.
2. The sidebars and table headings are now gradient shaded. I personally prefer the old style of a solid colour. I think it's because it sticks out as different to the rest of the styling on buttons etc. Note the edit buttons are also shaded, but in a more subtle way. If the shading could match that exactly, or be one solid colour to match the other buttons exactly, then I don't think it would stick out so much. Also (I can't verify this because the sidebars have all changed) but it seems as the though the sidebar heading text has got bigger and now seems a little bit squashed into the heading? Do we have an old sidebar to compare?
3. We now have a twitter account, featured on the main page! That's cool, but who has access etc.? What should we be using it for and posting on it? Possibly a separate forum to discuss this.
4. Have you altered the styling on the wiki-navigation slightly? Not sure how it's different, but it has the "not quite lined up right" feel of customised css. The default styling we had before didn't quite have this, I don't think.
5. The borders around pictures in galleries (e.g. Unnamed Day 1 characters) have turned bright blue, rather than the white they used to be. Is this intentional? Looks a bit weird!
6. Do you know what to add to personal css so that the editing screen goes back to black text on a white background? That has changed for me (to white text on grey) along with these css changes.

Again, apologies for only mentioning the negatives - all the other changes I really like! The wiki looks awesome and fresh now, a great facelift for the main page--Acer4666 (talk) 15:49, November 5, 2016 (UTC)

1. Noticed these - in fact, I actually did have to edit the font file so that the digits stayed in place on the timer! No idea how to fix the underline, seemed like a minor thing but would be nice. Also I'll look at the user page issue.
2. Title is the exact same size, I didn't make any changes beside the shading. You can try using the button gradient below, I think it doesn't look as good as the current one though. In any case we will (hopefully) be switching over to the new infoboxes soon
3. Yes! Sorry, meant to do a new post but got sidetracked. I'm posting from it at the moment and lining up the birthdays posts to go out automatically but anyone who wants access is more than welcome
4. Not sure what you mean - it's the menu at the top right? Didn't make any changes other than the menu items
5. Not intentional - will fix this!
6. I'll fix that! --Pyramidhead (talk) 22:39, November 5, 2016 (UTC)

table.sidebar th.title {
  background-color: #012e59;
  background-image: -moz-linear-gradient(top,#02488b 35%,#012e59 65%);
  background-image: -webkit-gradient(linear,0% 0%,0% 100%,color-stop(35%,#02488b),color-stop(65%,#012e59));
  background-image: -o-linear-gradient(top,#02488b 35%,#012e59 65%);
  background-image: -ms-linear-gradient(top,#02488b 35%,#012e59 65%);
}

Thanks! Another quick thing: H3 headings seemed to have lost their bold, and just look like regular text now. Is this intentional, and is it possible to revert back to how they were?--Acer4666 (talk) 22:55, November 7, 2016 (UTC)

You said you didn't make any sidebar changes except the shading but here is a comparison showing that the spacing has also changed. Lots of extra styling changes have been made with this overhaul, more than what was agreed upon above, and I can't tell what is intentional and what is not--Acer4666 (talk) 15:50, November 12, 2016 (UTC)