My idea/project for a new (old) WinWorld template

I'm not going to hijack ubuntuxp's thread on the WinWorld classic style/dark theme, so I decided to make my own topic about this here.

This is going to be a lot of reading, so just sit back and see what I have to offer :)

I've been making a little project for an idea for WinWorld's theme/style/layout/template, you name it. I've been working on this project since mid June, and I just finished the template last week. I guess that was why I've been absent from WinWorld for some time. So I thought now I could finally share my project for my WinWorld template.

Very recently I've been teaching myself a little bit on web development and stuff like that, including working with HTML, CSS, JavaScript, etc. And so this was one of those times where I was doing stuff with web development. So I guess you could say I have some experience with development for websites.

Anyway, this is a WinWorld template I made that looks a lot like the previous WinWorld theme, but with added features, which I will mention in a little bit. I did not do anything to make the forum tie in to the WinWorld template, but maybe eventually I'll do something with that.

I did all this work myself, using Notepad++, the best source code editor I've ever come across, and I made the template using the Wayback Machine, which has archives of the older WinWorld site versions (I used some of their archives of WinWorld from 2016). So what did was, I just pulled some of the CSS and JavaScript files from the old WinWorld site and put them into my project, and I also made tweaks to some of the CSS files, I will talk about that in a bit, of course. I also added the old fonts from the previous website as well, along with the "/fonts" folder in the "res"directory. I even pulled the files off the GitHub page for Adventure (WinWorld's CMS), and made tweaks to some of those files, most of which include the .ejs files.

How I got the idea to create this project was, on a typical day in June, I was bored, when all of a sudden I decided I could make a template for WinWorld that will tie in to its previous layout, and since then, I was hooked at doing this project. I had to do a lot of editing to most of the WinWorld pages, as well as make a lot of adjustments to the .ejs files for Adventure. It was quite stress-inducing to do all that, but it was all worth it :)

I added two downloads for this project. One is a .zip package of the Adventure files I made tweaks to, and the other is a .zip package containing HTML documents of the WinWorld pages I made improvements to for better viewing. This download also contains the CSS, JavaScript, and font files.

Added/removed features:

I revived the previous CSS files that WinWorld used before its relaunch; these files include "winworld.css", "bootstrap.css", "font-awesome.min.css", and "stickyFooter.css". I made some tweaks to these CSS files, which I'll get to shortly.

Like I said before, I revived the fonts from the previous WinWorld website. These font files include "droid.woff", "fontawesome-webfont.ttf", "fontawesome-webfont.woff", "fontawesome-webfont.woff2", "glyphicons-halflings-regular.eot", "glyphicons-halflings-regular.svg", "glyphicons-halflings-regular.ttf", and "glyphicons-halflings-regular.woff".

In the library pages, I re added the library information on the top left, as well as the pink disclaimer regarding downloads working or not, and the search form. On the top right side of the library, I re added the archive information description. For the library navigation, I made the so called "nav pills" light gray with orange wording when you hover over them, and black with yellow wording when they are active.

I re added the "No Windows XP" reminder, along with the "No XP" logo, on the homepage, which links to the sticky in Offers and Requests regarding Windows XP.

In the signup page, I added the benefits of being a member on WinWorld on top of the registration form.

On the screenshot and mirror selection pages, I made it so that clicking on the "back to release" button will take you directly back to the page you were on before, instead of just opening a new page, but the same place you were at before. This little trick is done using the link "javascript:history.go(-1);". It's a JavaScript method.

The search form on the top right on all pages has been removed, because the search form is already available in the library pages.

For the CSS files, I made the following improvements: I made it so that links will be orange, and yellow with yellow shadowing when hovered over. I also made some changes to "stickyFooter.css", where I changed the HTML element to "ww-footer", and changed the background to that black space theme, the same goes for the header in terms of the background.

Notes/Disclaimers:

I could not figure out how to implement the WinWorld Twitter feed into the homepage, but I'm sure that can be solved.

In the product pages, I couldn't figure out how to make it so that you can navigate screenshots like turning pages, but I'm sure that can be taken care of.

Here's a download I made which contains the Adventure files I made adjustments, tweaks, and improvements to:
https://mega.nz/#!rnZCCYDR!xVRkf-PUEqRHhIJ6qTEq3nXo-tjDH3cj3gRa3MxDxQY

For better viewing, here's a download containing my reconstructed version of the WinWorld pages I made containing the template. All documents are in the ".shtml" format.
https://mega.nz/#!v6J1BAgC!hYLBg9WLGmy6xA1Pjt6StbNVujYyvSYe688xIIB98Mc
Note: To use this folder, you'll have to extract the package to your hard drive, because all URLs in the HTML docs have "C:/" at the beginning of them.

Here are some screenshots I took of my reconstructed version of the template:

Homepage

IRC page

Links page

About page

Contact page

Donate page

Login page

Signup page

Password recovery page

Main library page

Product page example

Mirror selection page example

Download test page

P.S. Yes, I know. Most of this would fall under Calvin, who hasn't been here in a long time, but this is just a demonstration for a project I've been working on to improve the WinWorld website a bit. I might talk to Calvin about this project on his GitHub page, where he has been active very recently, believe it or not.

So yeah, this my idea for a new WinWorld layout and template that I've been working on for the past two in a half months, and I finally completed it.

So what do you think? I hope it's okay.

Comments

  • Yea, all of that is up to Calvin/Duff. If they wanted to change that globally, I doubt I'd object, although I feel "typical" black text on white background comes across as more professional. I really haven't been too happy with the appearance of this "Vanilla" forum.

    I could not figure out how to implement the WinWorld Twitter feed into the homepage, but I'm sure that can be solved.

    That really should be local content that just happens to get pushed to whatever anti-social media sites.

  • @SomeGuy said:
    Yea, all of that is up to Calvin/Duff. If they wanted to change that globally, I doubt I'd object, although I feel "typical" black text on white background comes across as more professional. I really haven't been too happy with the appearance of this "Vanilla" forum.

    I could not figure out how to implement the WinWorld Twitter feed into the homepage, but I'm sure that can be solved.

    That really should be local content that just happens to get pushed to whatever anti-social media sites.

    Are you requesting I do something with the forum theme? That does sound like a good idea, but I think I did enough work with the main WinWorld template. Also, the CSS files for the forum page are hard obstacles, the way I've seen them. I'm sure Duff and Calvin will approve of this project. Like I said, this is just a project I was working on, and an idea. As for the Twitter feed, does that mean it's not a good idea to have social media websites embedded here?

  • Another thing I have to add. I think that plain black text on a white background is just flat and boring, and it just makes a website look like those early plain Notepad-written HTML pages from the late 90s. But that's just my opinion. Want to know how I really came up with the idea of doing this project? Well, what I said before is still true, but I also came up with this idea in response to a recent post on the Twitter page for WinWorld, saying that people can contribute on the GitHub page for Adventure, after some others have checked out this site and said "This is yet another Bootstrap website." And so I said to myself "Yeah, I kinda have to agree with them on that. WinWorld does have to be improved a bit." And so, I made this template to spice up the place a bit.

  • This looks really nice. I really miss the old look and feel of WinWorld. The current version may look more professional, but that also makes it look more bland and uninspired. I liked the sort of "underground" feel that the old one had. At the risk of sounding like a hipster - it now looks too mainstream :p

  • @nick99nack said:
    This looks really nice. I really miss the old look and feel of WinWorld. The current version may look more professional, but that also makes it look more bland and uninspired. I liked the sort of "underground" feel that the old one had. At the risk of sounding like a hipster - it now looks too mainstream :p

    Yeah, LOL. That's another reason why I made this project, to make WinWorld look like what it's always looked like, ever since the very beginning of the website. Also, you should really try out my download for the HTML documents of the WinWorld pages. There's some pretty cool stuff in it! If you do, just remember to extract the package to your hard drive so that you don't get a broken layout ;)

  • I've only looked at the screenshots so far, but I must say I'm impressed. While my style is (mostly) just a simple recolor, yours makes it look more like the pre-adventure style.

    Side note: I appreciate you making a separate topic and not hijacking mine, it's significantly different enough a moderator probably would've separated it anyways.

  • @ubuntuxp said:
    I've only looked at the screenshots so far, but I must say I'm impressed. While my style is (mostly) just a simple recolor, yours makes it look more like the pre-adventure style.

    Side note: I appreciate you making a separate topic and not hijacking mine, it's significantly different enough a moderator probably would've separated it anyways.

    Why don't you try out the download I made of the HTML docs? You can view it better from there. If you do, just be sure to extract the folder to your hard drive, like I said before. And by "pre-adventure style", I believe you mean "non-bootstrap style" :D

  • Due to me being on Linux and not Windows, I had to change any references to "C:/" to the folder I have extracted the HTML docs to (Emacs query-replace helped speed things up). The main difference I noticed between the screenshots and the HTML docs was the subtle glowing hover effects (nice touch, by the way).

    And yes, I did mean non-bootstrap style, I did a quick look for any component names (couldn't remember off the top of my head), and I saw Adventure in the footer. Sorry if I caused any confusion.

  • edited August 9

    Eh, it was a little joke I made, saying that it's a non-Bootstrap style. And no, you didn't cause any confusion.

    Side note: There's a couple other things I forgot to add. Most of the text in this project is in the special font used for the WinWorld website, but the font for the main text is in Verdana, just for nice looks.
    And another disclaimer. For the "back to release" buttons, you might encounter a problem where if you click on the button, it opens a new tab with a blank page. If that happens, you can simply fix it by opening the two HTML docs, "48373a22-25c3-8911-c3a6-e280947e5254.shtml", located in the /download folder, and "c2a3c385-e280-ba5c-3143-11c3a4c2a83d.shtml", located in the /screenshot folder, in Notepad (or whatever text editor you use), and in both docs go down to line 87, where the script for the button is located, and remove the part that says 'target="_blank"'.

  • edited August 9

    @JonathonWyble said:
    Snip

    Sorry for quoting myself. I went to edit my previous post when I accidentally pressed the "quote" button. Please delete this comment.

  • @JonathonWyble said:

    @JonathonWyble said:
    Snip

    Sorry for quoting myself. I went to edit my previous post when I accidentally pressed the "quote" button. Please delete this comment.

    Don't delete it. I like it as is. :tongue:

    I tried the HTML version. Looks very nice!

  • I like everyone's opinions on this project so far! :) Let's see if more people like this idea for WinWorld's template so that it can be approved as the site's new layout. Like I said, I may share this to Calvin on his GitHub page, he'll probably like this as well.

  • Some more information. For the .ejs files in the Adventure software, I did not do anything to the files with the term "SA" on it, because I don't have admin access, therefore I wouldn't know what the administrative pages look like, so I didn't want to make any mistakes with the admin interface within this layout as I wouldn't know what I'd be doing. So maybe if this does get approved as the WinWorld template, they can make tweaks to the administrative (SA) pages for me.

  • A month after I completed this project for my new WinWorld template, I finally decided I could make another template, one for the forum, to make the forum theme tie into the WinWorld theme. I'm currently working on the new style for the forum. So when I'm finished, I'll share some info on my project for the WinBoards theme :)

  • Well, my project for the new WinBoards theme is finally here!

    This theme is just files I pulled off of the forum, such as the CSS, JavaScript, and image files I got from the page source for this Vanilla-powered forum. I just changed some things in the file "style.css", such as the coloring and wording. I also did some things to the file "_style.css". I pretty much made the forum template look and act similar to the phpBB theme, but it retains the Vanilla layout.

    For the header, I added the black space background, along with the WinWorld logo on the top left, instead of it just having the word "WinWorld" with the link to the forum index.

    For the general forum background, I added that dark grey theme with the little dwarf-like stars.

    I added light gray as the background color for the forum, topic, and thread boxes, with a grayish-white border. The same goes for the guest/profile box on the top left.

    On the index page, in the heading for the forum/category box, where it says "categories", "discussions", "comments", and "latest post", I added a black background with yellow wording.

    Just like my WinWorld template, links are orange, and turn yellow with yellow shadowing when hovered over.

    I have two downloads for my WinBoards template. One is a .zip package containing CSS, JavaScript, and image files for the Vanilla forum software which I made tweaks to, and the other is a .zip package containing the same things, but with an HTML document of the forum for better viewing. This package also contains an HTML doc I made as an example of a profile page using this template.

    Vanilla forum software files I made tweaks to:
    https://mega.nz/#!O6xFVSTY!6zvHdHhEk6aFJb-wgUKOAvQSnTMHuADQg6nf-6MaelI

    HTML documents of my WinWorld forum template:
    https://mega.nz/#!y3wByAzB!YKUukjFfpADQhiUY7mTSu_TH6oXM3HtpNsGVRnbPcDc

    Enjoy :)

  • These are some screenshots of my WinWorld forum template:


    The forum index. See how I added the stars in the background, and the gray background in the category box? Cool, huh.


    This is an example of a user profile page using this template. Even though it's pretty much the same as what it looks like on the index page, I thought I could add this picture because it seems like something worth seeing.

  • Looks good. I would love to see this styling implemented.

  • Yeah, I'd love to see this template in action as well, but at the rate of the current WinWorld theme, sometimes I don't think it'll ever really happen, but I do hope it does happen. Like I said, most of this would be up to Duff and Calvin, so eventually I'll talk to them about this, and see what they think.

    Want to know something funny? One time I was logged into WinWorld, and I had my tab for the HTML document for my WinBoards theme open... In the HTML doc, it showed my username with the profile options in the left panel. I guess my document was sort of interacting a little bit with the real WinWorld forum website :p

Sign In or Register to comment.