EscapistPlus - A Firefox & Chrome Add-On

[bluegate]

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. 😮💦

Spoiler: Incidentally, this is what the site now looks like for me with random data inserted into a theme

 

[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. 😮💦

Spoiler: Incidentally, this is what the site now looks like for me with random data inserted into a theme

Actually just four

Spoiler: and more like hid - mostly white images that contrasted harshly with all the black

Homepage
[link]http://cdn.themis-media.com/media/global/images/library/deriv/698/698161.png[/link]
[link]http://cdn.themis-media.com/media/global/images/library/deriv/491/491414.png[/link]

Forum post
[link]http://cdn.themis-media.com/media/global/images/library/deriv/109/109305.png[/link]

Forum post sidebar
[link]http://cdn.themis-media.com/themes/escapistmagazine/default/images/greybg_3x3.png[/link]

Thinking about hiding

Videos
[link]http://cdn.themis-media.com/media/global/images/library/deriv/81/81985.png[/link]
[link]http://cdn.themis-media.com/media/global/images/library/deriv/81/81987.png[/link]

Forum post sidebar
[link]http://cdn.themis-media.com/themes/escapistmagazine/default/images/tabbedheader.png[/link]


Definitely will hide - PSN guy
[link]http://cdn.themis-media.com/media/global/images/library/deriv/111/111539.jpg[/link]

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

 

[bluegate]

Actually just four

Spoiler: and more like hid - mostly white images that contrasted harshly with all the black

Homepage
[link]http://cdn.themis-media.com/media/global/images/library/deriv/698/698161.png[/link]
[link]http://cdn.themis-media.com/media/global/images/library/deriv/491/491414.png[/link]

Forum post
[link]http://cdn.themis-media.com/media/global/images/library/deriv/109/109305.png[/link]

Forum post sidebar
[link]http://cdn.themis-media.com/themes/escapistmagazine/default/images/greybg_3x3.png[/link]

Thinking about hiding

Videos
[link]http://cdn.themis-media.com/media/global/images/library/deriv/81/81985.png[/link]
[link]http://cdn.themis-media.com/media/global/images/library/deriv/81/81987.png[/link]

Forum post sidebar
[link]http://cdn.themis-media.com/themes/escapistmagazine/default/images/tabbedheader.png[/link]


Definitely will hide - PSN guy
[link]http://cdn.themis-media.com/media/global/images/library/deriv/111/111539.jpg[/link]

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.

Spoiler: For Example;

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.

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.

Spoiler: For Example;

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

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

 

[bluegate]

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.

Spoiler: Example Images

Spoiler: For example, this is how I did the green arrows on the main page

I have hidden the image through;

Spoiler: Code Example

.control_set_1 .control_set_1_inner .previous_button, 
.control_set_1 .control_set_1_inner .next_button {
    background: transparent !important;
}

Then I added a ::before and ::after pseudo-element to both buttons, one for the top half, one for the bottom half.
Their backgrounds are set to a linear-gradient with a 90 degree angle, the background starts out with a color, goes on for 60 pixels, then makes a dead-stop from 100 to 0 opacity, 10 pixels later the opacity is switched from 0 to 100 again, another
10 pixels later the opacity goes from 100 to 0 again. This creates the same color distribution as the original image.

And then to tilt them I used the CSS "transform" property with the "skew" function; 345 degrees on the ::before- ( the top part ) and 12 degrees on the ::after ( the bottom part ) pseudo-element.

Spoiler: Code Example

.control_set_1 .control_set_1_inner .previous_button::before, 
.control_set_1 .control_set_1_inner .previous_button::after {
    content: '';
    position: absolute;
    width: 90px;
    background: linear-gradient(to right,rgba( 0,255,0,1 ) 0px ,rgba( 0,255,0,1 ) 60px,rgba(255,255,255,0) 60px,rgba(255,255,255,0),70px,rgba( 0,255,0,1 ) 70px,rgba( 0,255,0,1 ) 80px,rgba( 255,255,255,0 ) 80px,rgba( 255,255,255,0 ) 100% );
    -webkit-backface-visibility: hidden;
    z-index: 1;
}

The gradient and skew angles would have to be inverted for the .next_button, of course.

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

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...

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

 

[bluegate]

- snip -

The previous content of this post can be found in the Theme Dock documentation thread which can be found here.

 

[bluegate]

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.

[hr][HEADING=2]Version: 1.4.1[/HEADING]
Release Date: 5-7-2017

[HEADING=3]Changes[/HEADING]
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[hr]

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.

 

[bluegate]

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.[hr][HEADING=2]Version: 1.4.4[/HEADING]
Release Date: 6-7-2017

[HEADING=3]Changes[/HEADING]
Themes - Advanced Themes Bug Fixes
Fixed several little bugs and irregularities:
[ul]
[li]Fixed a bug where themes wouldn't properly equip when clicking 'Set as Theme' after previewing it;[/li]
[li]Fixed a bug where themes wouldn't properly update themselves after saving and then closing the Theme Dock;[/li]
[li]Fixed some Theme Dock CSS irregularities;[/li]
[li]Fixed a bug that made the Theme Editor not generate proper preview styles on certain pages, for example Article pages;[/li]
[li]Fixed the Gradient Editor not properly importing certain CSS cases.[/li]
[/ul][hr]

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.

 

[bluegate]

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.

[small]( Notice something odd about this post? )[/small][hr][HEADING=2]Version: 1.4.5[/HEADING]
Release Date: 6-7-2017

[HEADING=3]Changes[/HEADING]
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.[hr]

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.

 

[bluegate]

[HEADING=2]Version: 1.4.9[/HEADING]
Release Date: 11-7-2017

[HEADING=3]Changes[/HEADING]
Themes
Some changes to the Theme Editor and Theme Dock have been made in previous versions;
[ul]
[li]CSS Change to Theme Editor to make Sub Element Titles stretch fully [small]( 1.4.7 )[/small][/li]
[li]Added certain pages to different page headers [small]( 1.4.7 )[/small][/li]
[li]Fixed the currently selected theme disappearing when disconnecting authorization [small]( 1.4.8 )[/small][/li]
[/ul]

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.

[small]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.[/small]

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

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.

 

[bluegate]

A bit of a small and petty update, but here it is 😝[hr][HEADING=2]Version: 1.4.13[/HEADING]
Release Date: 26-7-2017

[HEADING=3]Changes[/HEADING]
Hide User Avatars
This will enable users to hide particular users' avatars in Forum Posts.
Maybe you've come across a seizure inducing gif, or a picture of that one character from that show you don't like, now you have the ability to hide the 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.

Hiding or showing avatars can be done by clicking on the username above a forum post.

[hr]

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.

 

[bluegate]

Ah, it seems like only a month ago that I released version 1.4.0 with the Advanced Themes in it... oh wait, it was a month ago...[hr][HEADING=2]Version: 1.5.0[/HEADING]
Release Date: 2-8-2017

[HEADING=3]Changes[/HEADING]
Up-Votes
This will allow users to Up-Vote Forum Posts, giving other users a kind of "micro feedback" about their posts.
For those times that creating a post to say that you agree with someone feels a bit too excessive, or for those times that you feel like clicking buttons.

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

Notifications
This will enable or disable receiving notifications regarding EscapistPlus related subjects, such as for example when people Upvote your posts.

This feature's toggle can be found in the Add-on's Options page, which can be accessed through the Add-on's menu.[hr][HEADING=3]Up-Votes[/HEADING]Some additional information on the Up-Vote feature.

Turning this feature on will spawn a little button at the top of Forum Posts, this button indicates the number of Up-Votes that post has received and when clicked it will add or subtract an Up-Vote.

You can also hover over the button, no need to press it, for roughly a second and a half and a little sub menu should pop up.

In this sub menu you can further refine your Up-Vote's reaction by clicking on one of the images.
Your selected "reaction" will be highlighted by a blue circle.

The numbers to the right of the images indicate the number of users that have shared that particular "reaction", clicking on this number will create another little sub menu which will show the usernames of all users that have selected that "reaction".
Clicking on a user will open their profile in a new window.

[small]Names and Votes added for display purposes.[/small]​

[HEADING=3]Notifications[/HEADING]From version 1.5.0 onward a new "+Notifications" button will be added to your user menu at the top of the Escapist's web site.

Clicking this button will spawn a Notifications Panel to the side of the screen which will show all sorts of notifications regarding the EscapistPlus Add-on.

[small]Notifications of your own Up-Votes won't show up in the actual version.[/small]​

The "Notifications" toggle in the Add-on's Options page determines whether the Add-on should periodically check for notifications and display their number besides the "+Notifications" button, very much like how the Escapist does with its Inbox and Quote notifications.[hr]

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.

 

[bluegate]

Just a quick update, don't mind the previous updates, they were mostly behind the scenes stuff that one wouldn't notice.
You can find more information on them on the website.[hr][HEADING=2]Version: 1.5.6[/HEADING]
Release Date: 28-11-2017

[HEADING=3]Changes[/HEADING]
Group Chat Box Augmentation
This will allow users to position the Chat Box of Group Chats on top of the page, making it easier to reply to the newest message.

There is also an option that will stick the Chat Box to the side of the screen, keeping it in place even when you scroll, making typing replies to multiple messages even easier. This new floating box can be resized by dragging the bottom right corner, same way you would resize a text input field or a normal application window.

You can now find the "Toggle Chat Location" button next to the "Group Chat" bar.

Clicking on it will make the chat box toggle between being above and beneath the chat messages.

There is also the "Toggle Float" button next to the "Post Chat" bar, clicking on this will snap the chat box to the side of the screen.
[hr]

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.

 

[Kae]

So that is what you were thinking about when you said using the chat was annoying

 

[bluegate]

So that is what you were thinking about when you said using the chat was annoying

Yup.

I never really actively used Group chats so I never thought of implementing something like this, but scrolling up and down the other day to read and reply to posts was rather annoying so I thought I'd throw this little update out there. Hard to imagine how people put up with it over the years, in forum threads the newest post is right above the comment box, but in chats there's an entire page between them.

 

[bluegate]

Here's a small update at request of another user.

Also a new little disclaimer;
As the Escapist Magazine is undergoing restructuring and development, some functions of this add-on may not work as described.
Further major development of the add-on will be paused until the Escapist Magazine's new website and forums are in a stable state.

I have noticed other small functions breaking down ( for example, hiding avatars ), but unless there is demand for them to be fixed, I'll put them on hold until V2 of the forums is online.[hr][HEADING=2]Version: 1.5.8[/HEADING]
Release Date: 13-10-2018

[HEADING=3]Changes[/HEADING]
Fixed the Post Assistant
Apparently the Post Assistant stopped working a little while ago, so I rolled out a fix that should bring it back again.

Temporary fix for Embedded YouTube Videos
Decided to also throw in a fix that will properly show embedded YouTube videos again in forum threads, until the Tech Team fixes it properly.

Note that videos might pop in a little later after the page finishes loading.
[hr]

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.