EscapistPlus - A Firefox & Chrome Add-On

EscapistPlus - A Firefox & Chrome Add-On

EscapistPlus

An experimental and unofficial attempt at improving the Escapist Magazine, one byte at a time.

Although this add-on has been in development for a little while over in the Wild West, with the release on Mozilla's Add-On store and Chrome's webstore finalized, I thought it high time to share this add-on with all members of the Escapist Magazine, not just the people frequenting the Wild West.

This add-on aims to improve your user experience on the Escapist Magazine's website, especially its forums, and as such I wholeheartedly invite you to give feedback, suggestions or discuss the add-on either in this thread, or in its own User Group.
Although the add-on is an experimental product, I hope that people find it useful.

The add-on is currently only available on Firefox and Chrome.

For more information on the add-on, including the links to download and install it, please visit this website;
https://luckymouse.nl/escapistplus/
Future updates will be posted in this thread and in the User Group.



Version: 1.4.11

Release Date: 17-7-2017


Features and Functions

Dashboard
When enabled, the add-on will periodically check for updates on The Escapist Magazine and will notify you when you get a new message, are quoted or when one of your groups has an update for you.

Post Assistant
When enabled, the add-on will spawn a little post assistant that will help you with the forum's BB code on forum threads and group chats. The Post Assistant also allows you to include Emoji in forum posts.

Themes
Allows users to recolor the Escapist's website.

Block YouTube Autoplay
When enabled, the add-on will attempt to block embedded YouTube videos set to automatically play when the page is loaded from actually playing automatically.

Extended Ignore List
When enabled, and set up, the add-on will hide quotes from users on your ignore list.
In order for this to work, a short visit to your ignore list on the Escapist is needed in order to set things up, you can find more information on this here

Embedded WebM Videos
When enabled, the add-on will transform [webm] BB code to actual embedded WebM videos.
The Post Assistant has a function which can help with including WebM videos in your forum posts and group chat messages.

Replace Banned Avatars
This will replace "Perma Banned" avatars with their original avatars, if they are still available. If they are not available, they will be replaced with the default Male avatar.

This feature's toggle can be found in the Add-on's Options page, which can be accessed through the Add-on's menu.

Example Images

Minor Tweaks

Quote Collapse
This allows you to collapse quotes, eliminating nasty quote trees.

Spoiler Toggle
This allows you to hide Spoilers again after viewing them, it also keeps the Spoiler's flavor text when viewing the Spoiler.

Contain Images in Spoilers and Quotes
This blocks images from outgrowing Spoilers or Quotes.

View Moderated Posts
The message to view posts which have been moderated will no longer break the layout when using the middle or largest font.

Forum Drop Down: Wild West
An entry for the Wild West forums is added to the Forum drop down list for members of the Pub Club.

White Line Removal
On pages that filled the entire screen vertically, there used to be a white line beneath the page's black footer.

Post Page Redesign
The Create a Post page and Edit a Post page used to look different from each other with different spacing for elements and such, now they have a more universal look and make proper use of the screen's width.

Unstuck Forum News Footer
The boxes beneath forum pages used to stick to the black page footer.

Wild West Post Highlighting
Wild West posts are properly highlighted in the 'Popular Forum Posts' widget to make them easier to spot.

News and Article Redesign
The News and Article pages have been redesigned a little to make relevant content pop out more naturally on the page.
Incidentally, this also removes rogue commas between an article's tag boxes.

Example Images


Summary Links:

Download Page - FAQ & Support Page - User Group

Huh, well ain't that a thing.

I probably won't use it, just have got my means of navigating the site down to an art at this point but I'm sure others will appreciate it. I would even suggest the site should consider hiring you, if on a part time level, for tech things but I wouldn't hold my breath on that. Still, this isn't the spambot post I had anticipated. I'm sure it took a lot of work to put that all together so thanks for giving it to the community!

As someone who has more or less refused to memorize the basic commands to quote or post youtube links and other posting woes, that Post Assistant bit would be wonderful. I might even venture into the West for the fist time in ages with that thing taking care of the auto-play for me, so I'll be looking into this for sure.

This is super helpful for me and should be a must for everyone, it's great.

Redlin5:
Huh, well ain't that a thing.

I probably won't use it, just have got my means of navigating the site down to an art at this point but I'm sure others will appreciate it. I would even suggest the site should consider hiring you, if on a part time level, for tech things but I wouldn't hold my breath on that. Still, this isn't the spambot post I had anticipated. I'm sure it took a lot of work to put that all together so thanks for giving it to the community!

Happy to give back to the community once in a while.

DeadProxy:
As someone who has more or less refused to memorize the basic commands to quote or post youtube links and other posting woes, that Post Assistant bit would be wonderful. I might even venture into the West for the fist time in ages with that thing taking care of the auto-play for me, so I'll be looking into this for sure.

I hope that the add-on does its job for you.

BabyfartsMcgeezaks:
This is super helpful for me and should be a must for everyone, it's great.

Thanks for the kind words, I'm glad you're happy with it.

Having skipped a release message for version 1.2.4 and 1.2.5 because they were mainly code cleaning updates, here is a message for the release of version 1.2.6.


Version: 1.2.6

Release Date: 4-3-2017

Changes

Fixed YouTube Autoplay Blocker on Group Chat for Google Chrome
Under some conditions, the add-on would not properly block YouTube video's from playing automatically in Group chats.

Removed the white line at the bottom of almost every page
On pages that filled the entire screen vertically, there used to be a white line beneath the page's black footer.

Changed New Post and Edit Post pages to have a universal look
The Create a Post page and Edit a Post page used to look different from each other with different spacing for elements and such, now they have a more universal look and make proper use of the screen's width.

Unstuck the forum news footer from the page's footer
The boxes beneath forum pages used to stick to the black page footer, I unstuck them because I personally don't like elements that stick together too much.

Example Images


I hope that the people who use the add-on find these minor layout changes helpful.

If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

Honestly, a mod should pin this at this point. You're not getting money out of it and its worthy of a 'thanks' badge.

I think so anyway.

Redlin5:
Honestly, a mod should pin this at this point. You're not getting money out of it and its worthy of a 'thanks' badge.

I think so anyway.

Yeah, I agree, I'll stick it up here for now.

JoJo:

Redlin5:
Honestly, a mod should pin this at this point. You're not getting money out of it and its worthy of a 'thanks' badge.

I think so anyway.

Yeah, I agree, I'll stick it up here for now.

I'm honored by the sticky, thanks!

Now that I have had a reason to quote you, I've always wanted to ask, what's that kid in your avatar from?
He seems eerily familiar, but I can't quite put my finger on it.

bluegate:

JoJo:

Redlin5:
Honestly, a mod should pin this at this point. You're not getting money out of it and its worthy of a 'thanks' badge.

I think so anyway.

Yeah, I agree, I'll stick it up here for now.

I'm honored by the sticky, thanks!

Now that I have had a reason to quote you, I've always wanted to ask, what's that kid in your avatar from?
He seems eerily familiar, but I can't quite put my finger on it.

You've earned it, this whole project is really cool!

He's the actor Asa Butterfield, depicted in a short role in the British television series Ashes to Ashes. You may recognise him as he later starred as the lead in several popular films including the Boy in the Striped Pyjamas and Ender's Game.

Bumping up to a full decimal, it's time for another update post, albeit a bit of a short one.


Version: 1.3.0

Release Date: 10-4-2017

Changes

Expanded the Post Assistant
When hovering over buttons, you now see a small descriptive text of the button.

The Bold, Italic, Underline and Slashed buttons have been shortened to make room for the new Text Align buttons, Size buttons and Lists buttons.

The previously named H1, H2 and H3 buttons have been moved into the Size button list and renamed to Biggest, Bigger, Big. There are now also buttons for Small, Sup and Sub BB codes.

The Lists button list includes a button for dotted lists and a button for numbered lists.

Thanks to Zombie_Fish for pointing me to Aerosteam's thread about more forum BB codes.

Themes
People can now recolor the Escapist by picking one of their own colors.
In this version, users can only select one color and a theme is extrapolated from there, but there are plans to allow users to edit the site's design in more detail.

Here is a list of colors I would personally recommend
cefdd5
c9f8fc
fef1da
e0eafc

Example Images


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

I've also been working on some aesthetic tweaks to the Articles and News pages to try and make the Articles and News posts pop out more from their page, rather than blend in with the rest of the data on the page. But, because I'm not too big on redesigning pages, I thought I'd ask people what they think about it, or maybe even ask them to redesign it.

This is what I have got so far by playing around with the elements that are currently on the Articles and News pages;

The article sits in its own container, separating it from the widgets on the right.

The right lane of content is set lower than the article's container, showing that it's subservient to the article, drawing attention away from the right lane.

The "X comments" line above the "Comment and Share" bar is gone as it serves little purpose; One can go to the comments by either clicking on the blue box at the top of the article or by clicking on the 'My E' button in the "Comment and Share" box.

The "Comment and Share" box has more empty room around it, making it pop out and draw attention to it more, also, it breaks the white background from it's parent container, further drawing attention to itself.

The "Related Content" and "Facebook Comments" are positioned in a vertical direction so that they can use the full width of their parent container. Also, the "Related Content" box has been shortened to make the distance between the article and the "Facebook Comments" as small as possible, although I should probably add more space between both elements.

Because some people want to avoid the Wild West and some people want to actively post in the Wild West, this update highlights Wild West posts in the Popular Forum Posts widget, allowing people to either easily ignore them or flock to them.

Also, the above mentioned redesign is included.

As always, feel free to provide feedback if something doesn't work or rubs you the wrong way. Or if something does work or rubs you the right way.


Version: 1.3.2

Release Date: 18-4-2017

Changes

Wild West Post Highlighting
Wild West posts are properly highlighted in the 'Popular Forum Posts' widget to make them easier to spot.

News and Article Redesign
The News and Article pages have been redesigned a little to make relevant content pop out more naturally on the page.
Incidentally, this also removes rogue commas between an article's tag boxes.

Example Images


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

A quick update to fix a bug and to add some experimental imagery fun!🙌

Emoji may not show up on older operating systems or not up to date browsers. The emoji are powered by unicode so they are essentially no different from the letters that make up this sentence, they will show up on modern operating systems that support the latest unicode standards. If the emoji in this post, or in the Post Assistant's Emoji Panel do not show properly, then you might be running old software.

On the Escapist, due to how the particular data is saved in the server's database, emoji will not show up in Forum Thread Titles or in Group Post Titles or in Post Previews, they do however work in normal Forum Posts, Group Posts, Group Chat and Private Messages.🍰🥂


Version: 1.3.3

Release Date: 2-5-2017

Changes

Fixed a bug in News and Article Redesign
Fixed a small bug in the News and Article redesigns; pagination for paged articles didn't show up.

Emoji
Emoji are added to the Post Assistant. They only show up in Forum Posts, Group Chat, Group Posts and Private Messages.🤠

Example Images


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

Loving the new level of customizability you've added. Really shows how much users care about this site and want it to succeed.

Epyc Wynn:
Loving the new level of customizability you've added. Really shows how much users care about this site and want it to succeed.

Happy that you're happy with it.😄

I do my best to try and improve the site in whichever little ways I can. 👩‍💻

Although the update for this is not quite ready to be published yet, I thought I'd already make a bit of an introductory post about it. I would appreciate it if people were to share feedback on it after reading it, thanks!😄


Themes on the Escapist

The EscapistPlus' Theme Dock offers users two ways to change the design of the Escapist, one way is through Color Themes and another way is through Advanced Themes.
Note: The Theme Dock has been designed to work with the Escapist's "Default" "Site Background", which can be set at the Browsing Options on your profile.

How does one open the Theme Dock? The Theme Dock can be opened by hovering over the gear icon found at the top right corner of the website and then clicking on the "Launch Theme Dock" button.

image

Theme Dock

The Theme Dock has three main buttons on top, the one with the cross closes the Theme Dock, the double headed arrow moves the Theme Dock from the left side of the screen to the right side and vice versa, the circle slider toggles whether you want to use custom themes or not.

image

Beneath these buttons is a selector which allows you to switch between Color Themes and Advanced Themes.

Color Themes

image

Color Themes are simple in nature; the user selects a base color and the add-on will extrapolate a colored theme from there. Color Themes can be accessed in the Theme Dock by clicking the "Color Themes" tab at the top of the Theme Dock.

In the Color Themes tab the user has 24 slots to save different colors to, the currently equipped theme is indicated by a big circle, whereas the theme that is currently selected in the editor is indicated by a small square.

By clicking on any of the 24 slots a little color editor will pop up which will allow you to pick a color, save the color to the current slot and set the current color as your theme. By clicking on the colored round preview next to the color HEX value, a color picker will spawn, making it easy for users to select a color.
One can also input colors through the HEX input field.

Advanced Themes

image

As their name might suggest, Advanced Themes offer more advanced options to create custom themes.

At the top you will find your Currently Selected Theme and two buttons, the Update button checks online to see if there are updates for this theme and apply them if they are found, the Remove button removes the equipped theme.

Under this section is a selector that allows you to switch between your own Themes and Themes published by other members.

My Themes
Because themes are saved on my own private server and are shared through this server, the Theme Dock will ask the user to Authenticate themselves. If the user decides to Authenticate with the Theme server, the add-on will do a one-time read of the Escapist's cookie data on your computer, this data is then used to create a token which from then on will be used to identify the user.

After Authenticating you will see a small bar with the avatar and username that you Authenticated as, at the right side of this bar are three little dots which will spawn a Context Menu if you hover over them. From this menu you can Create New Themes or Disconnect the Authorization.

Underneath this is a list of all your themes. These theme cards show the name of the theme, the name of the person who created it, how many times it has been downloaded and how many people have liked it, which is done by clicking the heart.
By clicking on a theme it will expand, showing several options:
- You can set the theme as your currently selected theme;
- You can preview the theme;
- You can Publish and Unpublish it, controlling whether other people will be able to view and download it;
- You can Delete it;
- You can Copy it;
- And you can Edit it.

Online Themes
This tab shows a list of all published themes. These theme cards show the name of the theme, the name of the person who created it, how many times it has been downloaded and how many people have liked it, which is done by clicking the heart.
By clicking on a theme it will expand, showing several options:
- You can set the theme as your currently selected theme;
- You can preview the theme;
- You can create a Copy of it in your My Themes list.

Theme Editor

image

Same as with the My Themes list, at the top of the Theme Editor sits a bar which indicates which user you are authenticated as. The Context Menu is used to Save the Theme and to Disconnect the Authorization.

Beneath this is a long list of values that the user can change in order to create their own Theme.

At places where a number is required, such as for example font sizes, you can input a unit along side the number, for example; 10px, 15em, 2cm, etc.

As with the Color Themes, clicking on the colored circle inside HEX Color input fields will spawn a little Color Picker which will help users in selecting a color.

Slots for creating a Gradient or Shadow will spawn a little editor window to help the user in creating and designing a proper Shadow or Gradient.

Because I have been lazy and haven't bothered to create an Image Uploader for the Theme Editor, slots that ask the user to input an URL to an Image will have to be URL's from http://imgur.com.
A direct link to an Image can be gotten by right-clicking the Image and selecting the appropriate option from the context menu.

Note: The expected Width of Full Background Images is 1920 pixels, the minimum height lies somewhere between 970 pixels and 1200 pixels.



And that pretty much sums up all that I wanted to say about the new Theme Dock, sadly I'm not that gifted with words so the above text might be a bit awkward to read and for that I apologize.

Although the Add-On hasn't been updated to include the above options yet, if there are any questions, feel free to ask, if you have come across bugs, feel free to report them, if you have come across an offensive theme, feel free to report it, if you want the editor to be expanded to be able to edit more aspects of the site in more detail, just ask.

Question: As the themes are saved on your server does that mean if one were to create NSFW image themes without publishing them that you'll still have access to them? Asking for a friend

Amazing stuff
Standing ovation from myself

Gauche:
Question: As the themes are saved on your server does that mean if one were to create NSFW image themes without publishing them that you'll still have access to them? Asking for a friend

Amazing stuff
Standing ovation from myself

If one were to create a NSFW image theme then technically I would indeed have access to the raw data of said theme, but I respect people's privacy enough to not go snooping in their private themes' raw data to find out what they have made. If a user doesn't opt to Publish his theme then I, just like anybody else, won't see it.

I'm actually happy that you saw and replied to this post!😄 Part of the inspiration for further developing the Theme Dock came from seeing your Dark Theme thread a couple of weeks ago. Although I'm still in the process of mapping out areas of the site to change the design of, I had wanted to ask you whether you'd be interested in porting your Dark Theme over once this update is finished.

Always happy to see people ask questions or give feedback😄

bluegate:

Gauche:
Question: As the themes are saved on your server does that mean if one were to create NSFW image themes without publishing them that you'll still have access to them? Asking for a friend

Amazing stuff
Standing ovation from myself

If one were to create a NSFW image theme then technically I would indeed have access to the raw data of said theme, but I respect people's privacy enough to not go snooping in their private themes' raw data to find out what they have made. If a user doesn't opt to Publish his theme then I, just like anybody else, won't see it.

I'm actually happy that you saw and replied to this post!😄 Part of the inspiration for further developing the Theme Dock came from seeing your Dark Theme thread a couple of weeks ago. Although I'm still in the process of mapping out areas of the site to change the design of, I had wanted to ask you whether you'd be interested in porting your Dark Theme over once this update is finished.

Always happy to see people ask questions or give feedback😄

Thanks, I'll let my friend know

Always glad to be partly inspiring - lol
I'll take a crack at porting my Dark Theme over. The color scheme should be easy enough.
I did remove lots of background images though so I don't see it being a smooth port job.
Unsure if you've already covered it or not but if feasible could you make is so users can set the hover-highlighting color?

Just days before I shared another userscript in the Creative Society group that one could easily edit to change the background image of the site but this blows it out of the water and into another galaxy
You keep doing you

Gauche:
Thanks, I'll let my friend know

Always glad to be partly inspiring - lol
I'll take a crack at porting my Dark Theme over. The color scheme should be easy enough.
I did remove lots of background images though so I don't see it being a smooth port job.
Unsure if you've already covered it or not but if feasible could you make is so users can set the hover-highlighting color?

Just days before I shared another userscript in the Creative Society group that one could easily edit to change the background image of the site but this blows it out of the water and into another galaxy
You keep doing you

You removed a lot of background images, did you? Interesting, I'll have to take a closer look at your Dark Theme and see in what ways I can accommodate the porting.
What kind of images did you remove?

Like I said, at the moment I am slowly scrolling over the site, identifying parts and bits for users to change the look of, parts of this also include hover and highlighting colors of certain aspects. Although the editor is basically a CSS editor, for a person who is used to being able to edit actual CSS directly, it might feel limiting. I'm trying to keep things simple and easy for general people to use, yet versatile enough to actually be of use. I want to give people the ability to change even the smallest of details, but doing so may make the editor seem too crowded, so at first I'll release the editor with a basic set of things to change and I will add and implement change depending on user's feedback.

In designing the editor I have tried to make it easy to update and maintain; rather than store the list of properties that make up a theme inside the add-on, the editor retrieves this list from my server, same goes for instructions on how to assemble raw theme data into proper CSS. Doing it like this allows me to update the structure and workings of themes without having to issue an update of the EscapistPlus add-on itself, so if there are any bits that you, or anyone else, would like to have added or changed, it would be easy to implement.

By the way, I hope that you don't feel like I'm trying to uproot you, your Dark Theme or your script for custom backgrounds. 😮💦

bluegate:
You removed a lot of background images, did you? Interesting, I'll have to take a closer look at your Dark Theme and see in what ways I can accommodate the porting.
What kind of images did you remove?

Like I said, at the moment I am slowly scrolling over the site, identifying parts and bits for users to change the look of, parts of this also include hover and highlighting colors of certain aspects. Although the editor is basically a CSS editor, for a person who is used to being able to edit actual CSS directly, it might feel limiting. I'm trying to keep things simple and easy for general people to use, yet versatile enough to actually be of use. I want to give people the ability to change even the smallest of details, but doing so may make the editor seem too crowded, so at first I'll release the editor with a basic set of things to change and I will add and implement change depending on user's feedback.

In designing the editor I have tried to make it easy to update and maintain; rather than store the list of properties that make up a theme inside the add-on, the editor retrieves this list from my server, same goes for instructions on how to assemble raw theme data into proper CSS. Doing it like this allows me to update the structure and workings of themes without having to issue an update of the EscapistPlus add-on itself, so if there are any bits that you, or anyone else, would like to have added or changed, it would be easy to implement.

By the way, I hope that you don't feel like I'm trying to uproot you, your Dark Theme or your script for custom backgrounds. 😮💦

Actually just four

Solid ideas all around - best of luck with it all
Will probably have future feedback for ya

Rid yourself of the thought!
The theme to begin with was not my own - the background image script is extremely basic
Sheesh, guess I ought to brush up on my praising of others

Gauche:
Actually just four

Solid ideas all around - best of luck with it all
Will probably have future feedback for ya

Thanks for the list of images that you have hidden!
The four that you currently have hidden, I have picked up in the editor as recolorable objects, so setting their Alpha to 0 should hide them, or changing their color to fit the theme would also be a possibility.

Sadly I haven't gotten around to the Video pages yet. Although it was to be expected, scrolling through the site it's as if the website has an infinite amount of pages that it just keeps throwing at me, it's a tad bit exhausting to be honest. 😅
And a part which annoys me immensely is this site has TWO Popular Forum Posts widgets, why must the design of the one on the front page be different than the one everywhere else... I'm thinking about just applying the front page's design to all other ones.

Yeah.. that PSN guy is annoying as all hell, he should be hidden, lol.

Looking forward to any future feedback.

Gauche:
Rid yourself of the thought!
The theme to begin with was not my own - the background image script is extremely basic
Sheesh, guess I ought to brush up on my praising of others

Well, you are the one who brought the Dark Theme and Background User Script back into the spotlight, I would guess that the original creators of both have long since left the Escapist. And you have been expanding on the theme and have provided documentation for the script, so ascribing them to you seems to make sense. 😄

bluegate:
Thanks for the list of images that you have hidden!
The four that you currently have hidden, I have picked up in the editor as recolorable objects, so setting their Alpha to 0 should hide them, or changing their color to fit the theme would also be a possibility.

Sadly I haven't gotten around to the Video pages yet. Although it was to be expected, scrolling through the site it's as if the website has an infinite amount of pages that it just keeps throwing at me, it's a tad bit exhausting to be honest. 😅
And a part which annoys me immensely is this site has TWO Popular Forum Posts widgets, why must the design of the one on the front page be different than the one everywhere else... I'm thinking about just applying the front page's design to all other ones.

Yeah.. that PSN guy is annoying as all hell, he should be hidden, lol.

Looking forward to any future feedback.

Was the least I could do
Neat!
How does the image recoloring work exactly?
Does it create a new image on your server to host?
If a user uses the same hex# from a previously made theme does it create a whole new image or does it pull from the old existing image?
How would recoloring an image consisting of several colors work?

Don't work too hard now - fully embrace the one byte at a time philosophy
I find discovering the nooks and crannies of the site extremely invigorating personally
For instance that Infamous Second Son image on the homepage is selectable but doesn't display - screams of abandonment
Never realized the site had so many search engines (global/forums/groups/reviews/users)
Feels like exploring a burial ground

Of the two I'd say the homepage version is easier on the eyes so I would agree with you decision if you follow through with it

There really is lots to this site
Just found out I completely missed these two parts here and here - never seen them before
These tables just happen to use different triangle images from the home page to boot
I'm fairly certain there are other sections of the site I've yet to come by

bluegate:

Gauche:
Rid yourself of the thought!
The theme to begin with was not my own - the background image script is extremely basic
Sheesh, guess I ought to brush up on my praising of others

Well, you are the one who brought the Dark Theme and Background User Script back into the spotlight, I would guess that the original creators of both have long since left the Escapist. And you have been expanding on the theme and have provided documentation for the script, so ascribing them to you seems to make sense. 😄

Despite that I don't feel all too comfortable with the idea
I still keep their long seemingly meaningless version number intact for honorifics

Gauche:
Was the least I could do
Neat!
How does the image recoloring work exactly?
Does it create a new image on your server to host?
If a user uses the same hex# from a previously made theme does it create a whole new image or does it pull from the old existing image?
How would recoloring an image consisting of several colors work?

Although recoloring images on my server would be a possibility, all things I have recolored up until now are done through CSS.

In general, I hide the actual image and then attempt to recreate the shapes and colors of the image through CSS, in most cases this leads to a convincingly similar result, similar enough to warrant giving the option to recolor them at least, I feel.

There is a lot one can accomplish with some creative use of CSS, especially with CSS3 and its more advanced functions.

Gauche:
Don't work too hard now - fully embrace the one byte at a time philosophy
I find discovering the nooks and crannies of the site extremely invigorating personally
For instance that Infamous Second Son image on the homepage is selectable but doesn't display - screams of abandonment
Never realized the site had so many search engines (global/forums/groups/reviews/users)
Feels like exploring a burial ground

Haha, I am currently mixing things up, leaving the mapping of css selectors and elements for a while and working on further improving the editor itself. For example, at the moment I'm about to start testing the advanced features on Firefox, although usually everything carries over 1:1 between Chrome and Firefox, sometimes there are some iffy bits that tend to be different.🤤

Discovering peculiarities in the site's code can indeed be fun, the long list of errors of files that failed to load that pops up when you open the developer console, the weird 400ms transition delay in some of the top menu's items, or some weird typo's in the code like "containter" rather than "container", or "onlick=''" rather than "onclick=''", sort of makes you wonder how broken code could just be sitting there without ever getting fixed.

This site's code could use a good scrubbing, homogenizing code, throwing away unused code, updating old code to make use of newer functions and all that and throwing out some of the dozens of included files from other servers, the number of server calls on some pages...

Gauche:
There really is lots to this site
Just found out I completely missed these two parts here and here - never seen them before
These tables just happen to use different triangle images from the home page to boot
I'm fairly certain there are other sections of the site I've yet to come by

Those tables look horribly unfinished, the buttons lack some decent padding, lol.

Incidentally, those pages where the pages that made me step away from the CSS side of the theme editor for a bit.🤤

Talking about pages, seen this one yet?
http://www.escapistmagazine.com/articles/view/video-games/columns/garwulfs-corner

Here is a little more additional documentation on the Advanced Theme Editor


Editor Nodes

The Editor consists of a couple of "nodes", most of which will allow you to change data of the editor, some of which are used to highlight sections or subsections.

image

Some nodes allow you to Expand them, showing their children.

image

Most nodes will have a square selection box to the left of the node title, this box will toggle whether this particular node is active or not. When turning off a normal node it only affects that particular style, but if you turn off a parent node, it will affect all children.

image


Shadow Editors

Certain parts of the Advanced Theme Editor allow you to create Drop Shadows for certain elements on the Escapist, for example Quotes.

image

By clicking on the rectangle next to the word "Drop Shadow" a little editor window will spawn.

image

All the options in the pop up might seem intimidating at first, but once you get used to them they are very easy to understand, and to help in that process, you can spawn a little Demo by clicking the "Expand" button.

Playing with the sliders and values a bit, creating a satisfactory shadow shouldn't be too hard.

image

Although the units of the input boxes default to "px", pixels, it is possible to insert other units.
These units include, but are not limited to; "em", "cm" ( centimeter ), "in" ( inch ).

When you have a certain input box selected, you can add and subtract one number by pressing up and down on your keyboard.

And although the sliders only move to a maximum of 20, it is possible to insert greater numbers in the input boxes. "Blur", however, can not be set to a negative value.


Gradient Editors

Certain parts of the Advanced Theme Editor allow you to create gradients for certain elements on the Escapist, for example Quote backgrounds.

Same as with the above mentioned Drop Shadow, clicking on the rectangle with gradient data in it will spawn an editor window.

imageThe green areas and purple arrows are added for this documentation and aren't present in the actual editor.

Gradients are made up of three different kinds of data; Color Data, Alpha Data and both of their Positional Data.

Color Data points are represented by the little rectangular arrows beneath the horizontal gradient bar. Clicking on them will allow you to change their color and their position, in percentages, ranging from 0 to 100. Aside from changing their position through the input box, you can also change their position by dragging them. Adding an additional Color Data point can be done by clicking inside the green box beneath the horizontal gradient bar. The mouse cursor should change to indicate the action that clicking the mouse will have.

image

Alpha Data points are represented by little rectangular arrows above the horizontal gradient bar. Clicking on them will allow you to change their alpha value and their position, in percentages, ranging from 0 to 100. Same as with the Color Data points, their position can also be changed by dragging them. Adding an additional Alpha Data point can be done by clicking inside the green box above the horizontal gradient bar. The mouse cursor should change to indicate the action that clicking the mouse will have.

Changing the Degrees will change the direction of the gradient; 90 is left-to-right, 180 is top-to-bottom, etc. The maximum value for this is 360 and the minimum value is 0.

Changing the Direction will change the gradient between a linear gradient and a radial gradient.

The Alpha, Degree and Location inputs can also be modified by pressing the up and down keys on your keyboard.


Full Image backgrounds

image

Aside from changing various colors on the Escapist's website, the Advanced Theme Editor also allows you to create themes with full image backgrounds.

To make this easier for people, there is a theme called Background Image Example by bluegate in the Online Themes list that people can Copy and edit to quickly create their own image based theme.

image

Almost all nodes not concerning image themes are turned off in this theme. A list of nodes necessary for this theme are;

Header

General Styles -> Site Header -> Side Bars
This changes the color of the bars next to the top section of the Escapist, to the left of the Logo and to the right of the Search Icon. This also changes the background color of the Motto / Ad container on top.

Because this node is type Gradient to hide it you need to add an Alpha Data point with Opacity set to 0.

General Styles -> Site Header -> Top Minimum Height
Optional
This changes the minimum height of the Motto / Ad container. THIS DOES NOT HIDE THE MOTTO OR AD.
For PubClub members who have no ad in this container, setting this and Top Padding to 0, and hiding the Motto, will leave no empty space above the Logo.
Setting this to a certain value will make the Logo section of the website start from that position, if the Ad isn't larger.

General Styles -> Site Header -> Top Padding
Optional
This changes the padding between the Motto / Ad and the top and bottom of the Motto / Ad container.
For PubClub members who have no ad in this container, setting this and Top Minimum Height to 0, and hiding the Motto, will leave no empty space above the Logo.

General Styles -> Site Header -> Top Background
Optional
This changes the background color of the Motto / Ad container.

General Styles -> Site Header -> Motto -> Hide
This allows you to hide the Motto.
Hiding this, in conjunction with setting Top Padding and Top Minimum Height to 0 will leave no empty space above the Logo.

Body

General Styles -> Site Container -> Background Color #1 & #2
These colors are the colors to the left and right of the Escapist's main body.
Setting both of their Alpha values to 0 will makes this part of the website transparent.

General Styles -> Site Body -> Background Image -> Image Url
The link to the Image that is to be used as the background image.
At the moment only links from imgur.com are accepted.
Width of the image should be 1920 pixels so ensure that at a 1080p resolution, users have full screen coverage.
Height of the image doesn't matter much, but for a full page coverage 1080 is recommended, some parts may get cut off, though.
The body of the Escapist is 1050 pixels wide, so take note that the center 1050 pixels will be behind the Escapist's body.

General Styles -> Site Body -> Background Image -> Background Color
This color is drawn behind the background image. Users will see this, for example, when using larger resolutions than the image, or when smaller images are used.

General Styles -> Site Body -> Background Image-Advanced
This list holds more advanced settings to position the background image.
Note that when changing the Position X or Position Y, Drop Down and Numeral can not be used at the same time.
You can use Drop Down for X and Numeral for Y, or vice versa, however.

Footer

General Styles -> Footer -> Background
This changes the background color on the sides of the Escapist's footer.
If this gradient has its alpha set to 0, the background image will be visible.

General Styles -> Footer -> Hide Top Border
This will hide the grey border on top of the footer section

General Styles -> Footer -> Top Inside Border
Optional
This will add a border between the footer section and the site section, but this border will not bleed over the background image.

And that's that!

Although this list might look a bit daunting, it's rather easy to grasp once you're scrolling through the list yourself. Also, as you make changes in the editor, a live preview will be generated, so you won't be going at it blindly 😄


So much for this little piece of documentation, I will probably add it all into one large post in a separate topic or something when it's all finished.

First mentioned in an update three months ago, the Theme Dock's Advanced Themes are finally in a state where I feel comfortable releasing them!🙌

For more detailed information on the Advanced Themes, please check out the link to the documentation thread down below.


Version: 1.4.1

Release Date: 5-7-2017

Changes

Themes - Advanced Themes
The Theme Dock has been updated to include Advanced Themes, allowing users to further customize the look of the Escapist Magazine, also allowing users to share their creations with other users.

For more information see the documentation thread


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

Following yesterday's release I have encountered a few bugs that I didn't quite run into during initial testing, either because of not testing thoroughly enough or because of unexpected effects caused by last minute code changes.


Version: 1.4.4

Release Date: 6-7-2017

Changes

Themes - Advanced Themes Bug Fixes
Fixed several little bugs and irregularities:

  • Fixed a bug where themes wouldn't properly equip when clicking 'Set as Theme' after previewing it;
  • Fixed a bug where themes wouldn't properly update themselves after saving and then closing the Theme Dock;
  • Fixed some Theme Dock CSS irregularities;
  • Fixed a bug that made the Theme Editor not generate proper preview styles on certain pages, for example Article pages;
  • Fixed the Gradient Editor not properly importing certain CSS cases.

If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

I know, a lot of updates over the past 24 hours,
some people might even say I prematurely released the Advanced Theme Dock, to them I say... let's keep that our secret!🕵️🤐

As for this update, it's a small one, but one that deserved a post because it adds a little bit of functionality which might be helpful for people creating themes, or people who are simply just using themes.

( Notice something odd about this post? )


Version: 1.4.5

Release Date: 6-7-2017

Changes

Themes - Advanced Themes Sharing
Added the ability to quickly share Themes in Forum Posts.

For more information, see the Sharing section of the first post of the documentation thread.


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.image

Version: 1.4.9

Release Date: 11-7-2017

Changes

Themes
Some changes to the Theme Editor and Theme Dock have been made in previous versions;

  • CSS Change to Theme Editor to make Sub Element Titles stretch fully ( 1.4.7 )
  • Added certain pages to different page headers ( 1.4.7 )
  • Fixed the currently selected theme disappearing when disconnecting authorization ( 1.4.8 )

Options
The Add-on now has a separate Options page which can be accessed through the menu that pops up when you click the Add-on's Icon.
Minor features and preferences will be added to this page in the future.

Replace Banned Avatars
This will replace "Perma Banned" avatars with their original avatars, if they are still available. If they are not available, they will be replaced with the default Male avatar.

Note: Avatars will not display instantly as the page loads as the Add-on has to do some work to retrieve these links, they will pop in over time.

This feature's toggle can be found in the Add-on's Options page, which can be accessed through the Add-on's menu.


If you're on Chrome, then the Chrome Webstore should push an updated version of the add-on automatically to your browser.
If that doesn't happen, you can also visit the Chrome Webstore page for the plugin and install it from there.

If you're on Firefox, if you have automatic updates for add-ons turned on, then Firefox should automatically check for updates and notify when it finds a new version.
You can also check for new versions manually by typing in "about:addons" in the address bar, clicking on "More" next to the EscapistPlus add-on and then selecting to manually check for updates.

 

Reply to Thread

Log in or Register to Comment
Have an account? Login below:
With Facebook:Login With Facebook
or
Username:  
Password:  
  
Not registered? To sign up for an account with The Escapist:
Register With Facebook
Register With Facebook
or
Register for a free account here