Brand new CV so brand new Stylish script time, I had been slowly making a new one for the new site and I lost it a few days ago cause I forgot to back it up before reinstalling Chrome whoops so I decided to start from scratch and really go for it this time and it is now live, link.
I'm probably only going to do the one full script this time instead of four as it should work pretty well with the official light and dark CV themes. Once I'm done with testing I'll also be releasing a handful of smaller scripts to fix little annoyances like better use of the alignment system for the RPGers.
Comicvine Remix mainly just replaces all the green on the site with blues but I've fixed a lot of small site bugs and issues with spacing, formatting and other visual tweaks, here is a quick rundown of some of the tweaks:
Revamped alignment system, now it extends to comments, avatars and user bios.
In post user bios that are more user friendly.
Ability to use transparent avatars.
Wider search bars for lists and wiki editing.
Three column wiki associations instead of just two columns.
Improved list spacing.
Dropdown menu arrows that are the same color as the dropdown menu's.
Better spacing for date pickers.
No more iffy circle around your avatar in the user bar or your avatar on the blog page.
Fixed short spoilers that have links in them.
There is a lot more but it is mostly tiny little fixes here and there that aren't immediately noticeable but are still useful :)
Note: , Stylish is an extension for Chrome and Firefox that lets you use code to change what web sites look like on your screen, I make Stylish skins that modify CV and then I release them to the community, installation of my scripts is up to each user but it can make the site more visually appealing if you like blue instead of green. Seeing as how this is not official if you have any problems with it you should contact me directly or in this thread/blog instead of reporting it anywhere else.
So ya kinda obvious what this is about so without further delay here is what I would do to streamline/optimize the pages :D
The Volume Page
I wouldn't remove anything but I would add a few things, you'll see a rough example here to the right and to see the full size image click here.
So breaking it down from top to bottom:
1. User avatar - Way too round, don't know why but it gets on my nerves so I've minimized the rounding (6px instead of 30px).
2. Region part 1 - After the issue count I added a region flag so that a user will know what country a volume was published in right off the bat, further info in part 2 below (best part, all the little flag icons are already stashed away with the rest of the CV image files so nothing has to be added or made)
3. Lists - I added a new button for lists cause this feature desperately needs to come back (I just reused the icon so it needs its own)
4. The Deck - Decks serve one purpose, to show up on the CV search results page (not to be confused with the search at the top), there is zero reason for users to be able to see the deck content on the volume page, it just takes up space. While we shouldn't see it we should be able to edit it so I propose that it be editable just like it is now in edit mode where it shows in its own little textarea but when you are viewing the regular page it does not display at all. Good for search, good for users, gets rid of redundant data. Note: making the deck not display only works for volumes & issues, it still makes plenty of sense to have them visible for all other page types for summary purposes.
5. Last edited - We know what page we are on so having the title of the page repeated is pretty unnecessary, shortening it guarantees that the history tools will never be more then one line freeing up some space and minimizes eye usage, the user wouldn't have to scan for the username anymore it would be right there.
6. Volume name - In the Volume Details box the volume name doesn't need to be a link, we are already on the volume page, lots of overlinking in the wiki.
7. Region part 2 - I added a new row below Publisher for Country, this is where a user would select the volumes region in edit mode, it would be a drop down list of all the countries so it can be easily selected.
8. Recent reviews - I think this could be very useful, this sidebar widget is about halfway down the page, it can list the last ten reviews for all issues in the volume, only the volume title + issue number needs to be listed not the issue titles (big waste of space). Underneath the last ten you'll see buttons so users can click to view all staff reviews for all issues in the volume or all user reviews for all issues in the volume. If there are no reviews for the volume the widget would not appear on the page.
From top to bottom (click here for the larger image):
1. Buttons - I explained the list button up above but for this one I also shortened the text for the edit button, "Edit this wiki page" just seems overly long and space taking.
2. Publisher - Just like on the old site it makes more sense to have the publisher added so instead of just "released on January 1, 2013" it would say "released by Publisher Link on January 1, 2013".
3. The Deck - Just like with volumes the deck serves no real purpose to the wiki other then those search results so again poof it doesn't appear on the page but it is still editable in edit mode.
4. Issue ribbon - Ok I didn't actually modify this bit in the mockup cause quite frankly it takes too long to get everything just right cause of objects inside of objects inside of objects etc. Ideally though this shouldn't take up quite as much space, the size of the cover thumbnails is great (and the issue numbers) but does it really need so much padding? Especially for the "active" issue, so much padding, it could be halved and I think users would realize that is the issue they are still on. Shrinking the height just a tad so the padding below the thumbs and above it is the same would also be good.
5. Last edited - Again this doesn't need to show the issue title, just takes up too much space and regularly causes the history tools to expand to two lines of text, shortening it is still just as clear about what it is.
6. Reviews widget - Slight modification on the reviews widget, this one combines staff and user reviews but simplifies it a bit (I left it unstyled pretty much), a little logic would need to be applied to this widget so that if there are any staff reviews then the highest rated one would always be first in the list of the top three, if there are no staff reviews it would display the top 3 rated user reviews only. The button at the top leads to a page with all reviews but that could be turned into two buttons like on the volume page, one for all staff reviews and the other for all user reviews. If no reviews are available this widget would not display.
7. Associations - Why only two columns when there is space for three? The wiki content column is already a fluid width so switching to three association columns would work for most resolutions. Simple css change, just change the li's from 50% width to 33% (a few more tweaks are needed for edit mode). Also why is the entire li a link? now that the whole thing is a link we can't highlight and copy the text from any of the associations cause the whole thing is clickable now, I don't know about other editors but I regularly copy association text so I don't have to type it out on subsequent pages or open the item in another tab and then highlight and copy the text.
8. Aside column - Currently this is set to a fluid width so the size of the aside's are not consistent page to page, if you change the width to a fixed 404px the page works much better and is consistent.
9. Covers part 1 - The frame (box-shadow) gets in the way of allowing users to get the url for the cover images, a lot of users get the cover urls so they can post them in the forums or in comments, also for editors (like myself) that use plugins to detect the size of the cover image the plugins no longer work because of the box-shadow mixed with the relative position of the cover div. Also since the lightbox is gone the only way users can see the larger cover is to right click and view it in another tab but the box-shadow/relative position makes it so the image can't be right clicked. And one last point, box-shadow's while being a nice effect cuts off the edges of the images, users want to be able to see the whole image unhindered, it also makes it hard to tell if there is any whitespace on the various sides of the image or visible staples so it takes more work to figure out if an image needs a replacement.
10. Covers part 2 - The "Add a new cover" button, it is very low on the page and takes up space so why even use it? The site already uses the cute little styled UTF-8 glyphs for marking images as default so why not add one for adding a cover? Example to the right (click here for full size). Adding the glyph to the default cover in the top right corner frees up some space and fits the design better then a big old button below the default cover (I think it looks pretty damn stylish), it also improves editing workflow.
11. Issue details - As I've mentioned previously not everything needs to be a link so I removed the links for Name and Volume. Just seems redundant since there are already two links to the issue you are viewing (breadcrumbs and issue ribbon) and two links to the parent volume (primary header at the top and breadcrumbs), three of each is pretty redundant.
12. Reviews - Since everything was moved to the widget I removed this section from below the associations.
Misc Issue Stuff
Misc 1. Covers part 3 - I know more then a few users miss the old feature where under each cover it showed who uploaded the cover and when, I know there isn't really space for it to be added back but how about instead of adding a box for it it showed up as a tooltip when hovering over the cover image? My example to the right is very basic and unstyled but basically hovering over the image says who it was added by and the date, saves space and it is very useful (click here for a larger image).
Misc 2. Dates - I know it can be a little complex to get working but I think it would be nice if dates on issue pages showed in a more user friendly way so instead of January 1, 2013 it would be January 1st, 2013 (add st, th, rd, nd after day). This would apply to all three date locations on an issue page. Note: might also help to drop the 0 from single digit days in the release date field cause it looks out of place :P
Misc 3. Auto cover enlargements - boooo, no more upscaling of covers, until this "feature" is disabled I will no longer do cover replacements, I spend a lot of time gathering and cleaning up quality covers and I don't want them being upscaled, distorted and ruined.
Misc 4. Reviews revisited - I came up with a second (very) rough unstyled version of where to place a reviews widget but it has one big problem, it moves the Edit & Follow buttons thereby breaking the consistent placement of the buttons across the wiki, I know this can't happen but I'm just spitballing on this one in the hopes it may give someone a better idea. The example image can be found below and the full size image can be viewed here. Other then below the only other thing I can think of is to add a tab system to issue pages below the issue ribbon with the following three tabs: Issue, Staff Reviews, User Reviews, the default view would be the issue tab, clicking the Staff Reviews tab would show all the staff reviews and clicking the User Reviews tab would show all the user reviews, if the tab system was used one staff review or top rated review could show up where the deck currently is (in between the issue info and the issue ribbon), if it was the full width (like the rest of the wiki content) and just showed an excerpt of the review it wouldn't take very much vertical space (100 pixels should be tall enough).
Edited to add: If an item is crossed out it means the feature has been implemented :D
Since people have been asking for help on their own projects and I've had to turn them down I thought it best to post a blog outlining what I'm doing and why I'm unavailable to help out on other projects:
2000ad Project 1 - Adding all the story titles to all issues. about 35% done, the story titles are all typed up and added to my own wiki I just have to copy them over to Comicvine, simple but still takes time.
2000ad Project 2 - Creating 100+ story arcs for Judge Dredd and other popular 2000ad characters, 0% done.
Publisher Gap Filling Project - Finished Panini, randomly working on Dark Horse and about to start on Pika Edition, doubt this project will ever complete as the list of publisher's keeps getting bigger.
Cover Replacement Quest - Working through a few thousand covers I've had set aside for ages now, almost 3/4's complete (almost done with S) on the main batch then another smaller batch of 300+ and then a third batch for new releases.
Solicitations - Slowly adding solicits and dates/creators/appearances to every empty issue I find.
and soon I plan on starting a time limited project on AnimeVice where I have 0 points, I am curious to see how many points I can acquire in a single 24 hour period (no point whoring just needed data like solicits and chapter titles), it should be very interesting. I'll be starting this in a week or two.
All these projects should keep me pretty busy for the next month or two so I'm not really looking to add more projects unless I find them extremely interesting :)
Updated to add:
Also while these may not all seem like a lot of work (they are) I still have other non-Comicvine projects that I work on which right now include:
Entertainment - Working my way through over 600GB's of movies, tv shows and cartoons recorded by my Tivo that have been piling up for years and an unhealthy amount of Anime from the library and my own DVD collection.
Education - Learning to develop Android applications from scratch as well as use Google's App Inventor. I will also shorty be starting on learning Python and further my mastery of HTML5 & CSS3 and brushing up on developing Adobe AIR applications.
Work - I'm currently developing two Android apps for the App Store and gathering massive amounts of data for a new online community that I'm working on.
Reading - Sundays are my primary reading day but I expand that to Saturday and Monday when necessary, I'm slowly working through 6000+ "new" release singles, hundreds of trades/manga, a few novels and a stack of programming books.
Other - I'm re-designing my comic book collection database to make it more detailed and so it is accessible from the internet on multiple devices.
I'm a very busy penguin :D
Updated again to add:
And just cause I'm working on lots of projects doesn't mean I will not help with technical support questions, my Stylish scripts questions or for wiki advice/suggestions/questions, I'm always willing to help out with all that stuff :D
You read that correctly both of my dark Comicvine scripts have been updated for the new Parchment editor that all users have now !!!
and as an added bonus I created a new script to hide the annoying Parchment Switcher message that displays above the editor. The switch message may be good for users that don't like version 2 or can't get it to work in their browser but for everybody else it is just annoying and gets in the way so now Parchment v2 Switch Message Hider hides that message site-wide, if you ever need to see it again just turn the script off :D
I'll keep this short since nobody here likes to read anything but comics, I've just released my fourth Stylish script for Comicvine, this one takes the no longer supported dark theme and gives it a little twist while keeping all the green, yellow and darkness everyone is used too.
*if you want to use this script you must install the Stylish plugin
It took way too long but I have finally released Comicvine Dark Remix v3 for Stylish (Chrome and Firefox) !!! for those of you that don't know Stylish is a plug-in/extension for Chrome and Firefox that allows you to load scripts that change the visual look of almost any websites. I currently have three Stylish scripts for Comicvine, CDR replaces the now removed official dark theme for Comicvine; dark backgrounds, dark text, dark images, everything is dark using a red color scheme instead of the standard green !!! In the coming days I will also be updating my other two Stylish scripts that use a lighter theme, one uses a blue color scheme and the other is also red but light. I have plans to also make a fourth script that forks from CDR but keeps the classic green color scheme and odd colored links for all you traditionalists that just miss your dark CV. CDR is the first of my scripts to implement a bunch of new features and fixes for dozens of visual bugs that are on CV, for instance I fixed the forgotten about sub-sections of the profile and one of my fav new features is a background pattern that displays behind volume issue covers so you can tell if the uploaded image is too small and a larger one is needed !!!
*there are two odd bugs that I haven't been able to fix yet so from time to time you might see a green link when browsing the site or a white background in the user reviews section, if you see either of these just disable CDR and then re-enable it and hit ctrl+F5 and it should fix itself. Also it seems obvious but just in case, CDR is an unofficial theme and I am the loan developer so if you find any bugs while using CDR try turning CDR off to see if the bug is still happening and then contact me and don't create a thread in the Bug Reporting forum since it may be a bug caused by CDR and the staff/mods shouldn't be bothered about it.
Enough of the chit chat here come the links and screenshots:
Here is an updated list and description of all the tools I use for wiki editing on Comicvine.
Firefox vs Chrome
I used to use Firefox for wiki editing but I've since switched to Chrome and here is why: Firefox has horrible memory management. Even back with FF 3.6.x the memory usage would bloat up to 400-700megs after a small amount of editing and for larger wiki pages (such as character pages) the memory bloat would happen even faster and if you stayed in edit mode too long you would also get a massive delay when adding image or links, oftentimes getting timeouts. The memory usage grew with Firefox 4 and now 5. Chrome memory usage does bloat with use but it takes 10+ hours of heavy editing before it becomes noticeable unless you are opening dozens of tabs so if you are able I would highly recommend using Chrome exclusively for your wiki editing.
Auto Copy - Extremely handy and simple little plugin, highlight any text and it gets copied to the clipboard, helps with adding repetitive short term text. Very configurable and can be used with shortcut keys and be made to work in form fields.
Clippings - Clippings lets you save text snippets so they can be reused/pasted later, extremely handy for entering repetitive data such as publisher names or notes to mods when saving page edits. Shortcut keys can be assigned to individual snippets, there is built in export/import of snippets for easy backups and all your snippets are accessible from the right click menu.
Image Toolbar - Image toolbar overlays a simple toolbar over images on almost any website, you can configure the toolbar to have any of the following five buttons; save, copy, print, info, folder. No more right clicking to save images just mouse over the image and the toolbar will popup and you can save the image to your desktop, clicking Info will give the info about the image and its dimensions. Very useful for saving images form other sites to use on Comicvine.
Lazarus - Lazarus is a form recovery plugin so whatever you type into a form will be saved and can be recovered, extremely helpful in the forums if you accidentally loose a post (by hitting the back button, refresh or the browser crashes) and it can help when editing the wiki. Lazarus lets you control how long the data is saved for and provides an easy recovery option via the right click menu.
Auto Copy - Highlight text and it gets copied to the clipboard. Very simple but useful. If the text you select is rich text (like it is also a link) it can be set to strip that away so that only plain text gets pasted.
Chrome Clipper - Chrome Clipper lets you save text snippets that can be reused/pasted later. Handy for repetitive text such as publisher names and notes to the mods when saving page edits. Keyboard shortcuts can be assigned to individual snippets or they can be used via the right click menu. You can also import/export clippings for easy backups.
Image Resolution - I use this plugin more then anything else, hover over an image and it will show you the size of the image and if it is scaled down or opens into a larger version of the image it will also tell you the original size !!! Extremely useful when looking for cover images, no need to right click and get the image info, now you just have to hover over the image and it will show you how big it is. You can change the font size of the display, its background color and where on the screen it is displayed. Highly recommended.
Lazarus - Lazarus is a form recovery plugin so whatever you type into a form will be saved and can be recovered, extremely helpful in the forums if you accidentally loose a post (by hitting the back button, refresh or the browser crashes) and it can help when editing the wiki. Lazarus lets you control how long the data is saved for and provides an easy recovery option via a small lazarus ankh button that is placed next to form elements that can be recovered.
BatchPurifier (Demo Version) - BatchPurifier strips meta data from image files, very simple and most people either have no idea what meta data is or just plain doesn't care but I'm a paranoid person so I like stripping meta data from all images before uploading them.
Dropbox - I know some of you write up your wiki edits and save them as documents in case you need them again so it is a good idea to keep them backed up. Dropbox is a backup and syncing tool that you can install on your computer and anything you put in the Dropbox folder in Explorer will be backed up online to cloud storage, you can then access the file via the internet from any computer or if you have multiple computers you can have the files sync between your computers if they all have Dropbox installed (even works on smart phones and tablets). Dropbox also has some revision/ersioning capabilities so if you overwrite a file or accidentally delete it you can recover an older version easily. You get 2GB's of storage with the free account or you can upgrade to 50/100GB paid plans and if you refer friends and they sign up (for a free plan) you get an extra 250MB's of storage for each one (limited up to 8GB's) and you never loose that or have to pay for it.
Notepad++ - Everybody knows it isn't good to write up large bits of text in edit mode so when you need a simple plain text editor that will not add all kinds of garbage Notepad++ fits the bill. It has theme and plugin support so it can be expanded upon for other tasks but if you don't need all the bells and whistles you never have to see them.
Shrink-O-Matic - Shrink-O-Matic is a tool for resizing images one at a time or with batch conversion, you can set a max width/height or a ratio. You can also auto-rename converted files or overwrite the originals and you can even change the file type between jpg (you can control the quality level), gif or png. I love this tool for shrinking down large cover images for use in the wiki. Shrink-O-Matic does require Adobe Air be installed.
Sublime Text - Sublime Text is another text editor that I would recommend, it is a fork of the Notepad++ application but it focuses on what is importants: text editing. It doesn't worry about plugins or themes it just aims to be the perfect text editor.
Photoshop - I'm not suggesting you go and buy this if you don't already have it but if you do have it it is the best image editor around :P Great for touching up cover images, cropping them, resizing them and compressing them.
Photoshop Express - Photoshop Express is the minimal version of Photoshop as a web application but it still offers enough tools for basic image editing if you need to resize, rotate or crop images. One of the best things about PE is that it is available on mobile devices so you can edit on smart phones or tablets.
Paint.NET - Paint.NET is a Photoshop alternative that is free, it has many of the same features and almost the same layout and because of the plugin system it actually has more features and capabilities then Photoshop.
Bug Reporting Tools
Fireshot for Firefox - Is a plugin that lets you take screenshots in your browser that can be saved to your desktop, you can select an area to grab, screenshot the visible part of the page or the entire page. Fireshot has a very simple editor or it can open up an installed image editor for editing the screenshot.
Jing - Jing is a desktop application for taking screenshots and videos and works with the screencast.com website. Free and Paid versions are available but the free version is enough for most tasks, the only one big limitation to the free version is that recorded videos are limited to five minutes. Once you take a picture or video you can save them to the desktop or upload them to screencast.com and you are automatically given a link to the file. Jing also offers basic editing tools when you take screenshots such as adding text, arrows or boxes.
Pixlr Grabber for Chrome - Pixlr lets you take screenshots in your browser, you can select the area you want to take a screenshot of, grab the visible portion of the page or select the entire page and then save either to the desktop or the pixlr.com service.
This is everything I use for Comicvine so hopefully everyone will find something new and useful to use :D
Been busy lately but I do plan on getting back to wide scale wiki work soonish. I just spent 60 hours offline so I started typing up all the story titles for another 24 issues of El Vibora and 130+ issues of Kiss Comix so I'll be adding all those tonight or tomorrow, that's another 10k points for me :D Once those are done I'll be adding a bunch of manga and then a few thousand magazines and then eventually get back to my "fill in the gaps" publisher quest.