Escapist Custom Themes & You

[bluegate]

[HEADING=2]Escapist Custom Themes & You[/HEADING]

More colors for you and me!

Aside from the Escapist's own Backgroud Color changer and Background Image selector, it is also possible to change the Escapist Magazine's look and feel through the Escapist Plus Add-on.
( If you're on either Chrome or Firefox, that is )

The Add-on allows users to either change the basic color scheme of the Escapist through Color Themes or to change the website's look in more detail through Advanced Themes.
I will attempt to explain the workings of this to the best of my abilities, but if there are questions feel free to ask them in this thread, through PM or through the Escapist Plus' User Group.
In any case, I hope that this will enrich people's experience on this website, even if only a little.[hr][HEADING=3]Post Index[/HEADING]

Theme Dock
A small description of the 'Theme Dock'.

Color Themes
A small description of the 'Color Themes', themes which lightly change the color of the Escapist.

Advanced Themes
A small description of the 'Advanced Themes', themes which allow you to change the design of the Escapist in greater detail.

Theme Editor
A small description of the part of the Add-on which actually let's users edit themes.

Editor Nodes
A small description of the inner parts of the 'Theme Editor'.

Shadow Editors
A small description of how shadow editors work.

Gradient Editors
A small description of how gradient editors work.

Full Image Backgrounds
A small description detailing how to create a 'Full Image Background' theme for the Escapist.

Sharing
A small description detailing how one can share their theme in forum posts, group chats or group news posts.

Editor Documentation
A small list of all top level editor nodes in the editor, giving examples of what the nodes do.

F.A.Q's
A section dedicated to frequently asked questions.

[hr][HEADING=3]Theme Dock[/HEADING]
Theme Dock is the name of the gadget which handles the editing, sharing and downloading of 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.

About this "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.

Beneath these buttons is a selector which allows you to switch between Color Themes and Advanced Themes.[hr][HEADING=3]Color Themes[/HEADING][img_inline align='right' width=350 src='https://luckymouse.nl/escapistplus/img/screenshot_themes_colors.png']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.

-Adding this line to neatly make the horizontal line slide under the image-[hr][HEADING=3]Advanced Themes[/HEADING][img_inline align='right' width=350 src='https://luckymouse.nl/escapistplus/img/screenshot_themes_advanced.png']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.[hr][HEADING=3]Theme Editor[/HEADING][img_inline align='right' width=350 src='https://luckymouse.nl/escapistplus/img/screenshot_themes_editor.png']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.
The design of the website will change as you edit values, so it shouldn't be too hard to figure out what is what by just changing values around.
CAUTION: Changes are not saved automatically!!! If you want to Save the changes you have made, you must select "Save Theme" from the Context Menu at the top right of the Editor!!!

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

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

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.

[hr][HEADING=3]Shadow Editors[/HEADING]Certain parts of the Advanced Theme Editor allow you to create Drop Shadows for certain elements on the Escapist, for example Quotes.

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

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.

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

[small]The green areas and purple arrows are added for this documentation and aren't present in the actual editor.[/small]​

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.

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

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.

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

[HEADING=3]Header[/HEADING]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
[small]Optional[/small]
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
[small]Optional[/small]
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
[small]Optional[/small]
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.

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

Click here for a .PSD example image, and here for a .PNG example image.

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.

[HEADING=3]Footer[/HEADING]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
[small]Optional[/small]
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 😄[hr][HEADING=3]Sharing[/HEADING]Obviously, people are free to promote the themes they create in whichever way they themselves like, but to help a little bit, the Escapist Plus Add-on also offers a quick and easy way to implement your theme into forum posts, group chat or group news posts.

Step 1.
Open the Theme Dock, navigate to your Theme and open the Theme Editor.

Beneath the Theme Name node you will see a Share BB Code node with some garbled BB code.

Thanks to how the Escapist's BB code works, it won't show up for people who don't have the Escapist Plus Add-on installed, it will only be visible for people who have the Escapist Plus Add-on installed.

Step 2.
Copy and paste the above BB code into a forum post.

Step 3.
Navigate to your post and you will find that there is now a blue button in the top right corner of your post!

Clicking on this button will spawn a little window from which the user can do all sorts of things, the user can instantly preview the theme, equip it, like it, remove as equipped theme, or check for updates if the theme is equipped. The window also shows the date that the creator last updated the theme.

And that concludes the Sharing section of this post, I hope that the little button and its widget will prove useful to people who want to share their themes and to users who want to use themes.
An example can be seen in the post beneath this post.[hr][HEADING=3]Editor Documentation[/HEADING]This is but a short and not too detailed documentation of the main nodes within the Theme Editor.

The aim of this documentation is to make it easier to understand which pages are affected by which nodes, as some are named rather cryptically.

Last updated on: 19th of July, 2017.

Spoiler: Let's do this!

These are general styles that can be found all over the Escapist's website

Spoiler: Sub Sections

General Styles > General Styles
A section of general styles that apply to all sorts of things on the website.

General Styles > General Styles > Box C
These are the little blue boxes with numbers on them that pop out from behind other elements.
They can be found on the main page and on all sorts of subsequent pages.

General Styles > General Styles > Panel Containers
These are the squares that can be found to the right side of Article pages and such.
For example, the "Popular Articles" panel, or the "Popular Comics" panel.

General Styles > General Styles > Popular Forum Posts
The Popular Forum Posts widget.
This can be found on the main page and articles and such.

General Styles > General Styles > Tooltips
These are the little square boxes that pop up when you hover over things, for example a badge.

General Styles > General Styles > Quiz Panel
This is the little panel highlighting the currently active quiz.
This can be found on the main page, or on the right side of articles and such.

General Styles > Site Header
This is the top section of the Escapist's website where the logo, navigation and user menu are located.
I assume that the sub sections of this are self explanatory.

General Styles > Site Container
This is the area on the left and right side of the Escapist's website.

General Styles > Site Body
This is the center area of Escapist's website.
This also includes Full Image Backgrounds and the General Background Color, which changes the white background color behind the Escapist's website.

General Styles > Footer
This is the section at the very bottom of the Escapist's website.

[hr]

These are styles that apply to the Escapist's Forum section

Spoiler: Sub Sections

Forum Styles > Forum Index
These styles apply to the forum index;
http://www.escapistmagazine.com/forums/

Forum Styles > Category Index
These styles apply to category indexi;
http://www.escapistmagazine.com/forums/index/18-Off-topic-Discussion

Forum Styles > Top Navigation
These are the links that sit above the forums, for example;
"THE ESCAPIST PORTAL > THE ESCAPIST FORUMS > OFF-TOPIC DISCUSSION"

Forum Styles > Top Menu Bar
This is the blue menu bar that sits atop of most forum pages.

Forum Styles > Bottom Menu Bar
This is the blue menu bar that sits beneath of most forum pages.

Forum Styles > Pagination
These are the page numbers found above and beneath the list of threads on category index pages;
http://www.escapistmagazine.com/forums/index/18-Off-topic-Discussion

Forum Styles > Posts
These styles apply to actual forum posts.

Forum Styles > Posting & Editing
These styles apply to the Create a new Topic page and Edit a Post pages.

Forum Styles > News Footer
These are the little boxes you can find at the bottom of all forum pages.

[hr]

These are styles that apply to the Escapist's main page, but also some other pages

Spoiler: Sub Sections

Index > Slideshow
This is the giant slide show that can be found at the top of the Escapist's main page.

Index > Columns
This is the "Columns" section on the Escapist's main page.

Index > Features
This is the "Features" section on the Escapist's main page.

Index > Weekly Content
This is the "Weekly Content" section on the Escapist's main page.

Index > Stream Panels
These are the boxes with tabs on top of them, for example the "News >>" section on the main page.
They can also be found at for example;
http://www.escapistmagazine.com/reviews/

Index > Boxes 2x2
These are little square boxes used to house information all over the Escapist.
For example the Review boxes on this page;
http://www.escapistmagazine.com/reviews/
They can also be found on this page;
http://www.escapistmagazine.com/articles/

Index > Boxes 3x2
These are little rectangular boxes used to house information all over the Escapist.
For example the big boxes on this page;
http://www.escapistmagazine.com/everything

Index > Boxes 3x1
These are little rectangular boxes used to house information all over the Escapist.
For example the small boxes on this page;
http://www.escapistmagazine.com/everything
They can also be found on this page;
http://www.escapistmagazine.com/news/

Index > Tags & Titles
These include the title lines for;
http://www.escapistmagazine.com/tag/view/nintendo%20switch?os=nintendo+switch
http://www.escapistmagazine.com/articles/

Index > Column Widgets
These are the Column panels found at;
http://www.escapistmagazine.com/articles/

Index > Featured Blocks
These are the square blocks that are present on the Escapist's main page, highlighting certain articles and such

[hr]

These are styles that apply to the Escapist's Video Gallery page;
http://www.escapistmagazine.com/videos/galleries

[hr]

These are styles that apply to the Escapist's article pages and video pages

Spoiler: Sub Sections

Articles > Article Lists
Pages with lists of articles on them, for example;
http://www.escapistmagazine.com/articles/view/video-games/columns/garwulfs-corner

Articles > Comment Bubble
The blue bubble at the top right of articles which shows the number of comments.

Articles > Header
The Header section of an article, this houses the article's title, category, user and date.

Articles > Body
The actual body of an article.

Articles > Tags
The line of tags beneath an article.

Articles > Video Articles
Pages which house a video, such as Zero Punctuation pages.

Articles > Pagination
The page navigator at the bottom of paged articles.

Articles > Comment and Share
The Comment & Share section at the bottom of articles.

Articles > Related Content
The Related Content section at the bottom of articles.

Articles > Facebook Comments
The Facebook Comments section at the bottom of articles.

[hr]

These are styles that apply to the Escapist's "Latest Columns" pages, for example;
http://www.escapistmagazine.com/articles/view/tabletop/columns

Spoiler: Sub Sections

Latest Columns > Comment Bubble
The blue bubble at the top right of the page

Latest Columns > Latest Article
The highlighted article at the top of the page.

Latest Columns > Folders
The boxes with lists of articles in them.

Latest Columns > Archived Columns
The "Archived Columns" section sometimes found at the bottom of the pages, for example at;
http://www.escapistmagazine.com/articles/view/movies-and-tv/columns

[hr]

These styles apply to Groups related pages

Spoiler: Sub Sections

Groups > Title Bars
The blue title bars found on a lot of group pages

Groups > Group Index
These styles apply to;
http://www.escapistmagazine.com/groups/

Groups > Group Page
These styles apply to separate group's pages

[hr]

These styles apply to Profile related pages

Spoiler: Sub Sections

Profiles > Profile Page
These styles apply to profile pages

Profiles > Messaging
These styles apply to the messaging section within profiles

[hr]

These styles apply to the My Escapist page;
http://www.escapistmagazine.com/profiles/

[hr]

These styles apply to Quiz related pages

Spoiler: Sub Sections

Quizzes > Quiz
These styles apply to pages hosting actual quizzes

Quizzes > Popular Quizzes
The "Popular Quizzes" box on the Quiz main page;
http://www.escapistmagazine.com/quizzes/

Quizzes > Quiz Masters
The "Quiz Masters" box on the Quiz main page;
http://www.escapistmagazine.com/quizzes/

Quizzes > Quizzes Tables
The "Latest Quizzes" box on the Quiz main page;
http://www.escapistmagazine.com/quizzes/

[hr]

These styles apply to a few miscellaneous pages

Spoiler: Sub Sections

Miscellaneous Pages > Privacy Policy
http://www.escapistmagazine.com/content/privacy

Miscellaneous Pages > Terms of Use
http://www.escapistmagazine.com/content/termsofuse

Miscellaneous Pages > About the Escapist
http://www.escapistmagazine.com/content/about

Miscellaneous Pages > Submission Guidelines
http://www.escapistmagazine.com/content/contact

Miscellaneous Pages > Contact
http://www.escapistmagazine.com/contact/

[hr]

These styles apply to the content of Facebook Comments included in articles.
Because of how the Add-on is built, the styles applying to the comments on Facebook have to be a separate section.

And that wraps up the scrubby Editor Documentation.
[hr][HEADING=3]F.A.Q's[/HEADING]( I actually haven't been asked any questions yet... )

I unpublished my theme, can other users still see it?
When you unpublish a theme it is removed from the "Online Themes" list and users can't download it anymore, however, users that have the theme already downloaded will still be able to use it as long as they have it equipped although they can't download updates from it anymore. Once it is unequipped third-party users won't be able to download it anymore.

I deleted my theme, can other users still see it?
Pretty much the same story as the above answer.

I have accidentally deleted my theme, what do I do?
Deleted themes reside on my server for a set period of time, message me with the name of the theme and I'll probably be able to restore it.

Why must updates be downloaded manually?
This was done to lighten the load on my own server, to lighten the load on the Escapist Magazine's loading time and to allow users to stick to older versions of themes if they don't like new versions put out by people.

There is a part of page I want to change the design of, but the Advanced Theme Editor doesn't let me change it,
what can I do?
The Theme Editor has been designed to allow me to add or change how themes work and are designed without having to issue an update to the add-on itself, so feel free to ask me to make adjustments or additions. Simply clicking "Edit" should usually suffice to download a new version of the editor.

How are we supposed to know when the editor has been updated??
I will try to keep changes to the Editor's workings documented in either this topic or in the Escapist Plus' User Group[hr]Respect to any person that actually read all of the above! To people who haven't read it; feel free to ask for a TLR or inform yourself through other questions, even if they may already have been answered in my too long post.

 

[bluegate]

To start things a little bit, I'll throw a little theme in the pool of themes;

Lady Maria - [small]Theme Last Updated: 14 September, 2017[/small]

Loosely inspired by the character Maria from Bloodborne, it is a theme that primarily uses brown colors for backgrounds and bordeaux colors for accents, such as Links, Thread Titles, Article Titles and such.

It still has plenty of room for improvement, but I thought I'd share it already.

Spoiler: Example Screenshot Gallery

The Escapist's main index page

The Escapist's Forum Index

A Forum Post
​

The Theme can be found in the Online Themes list of the Theme Dock under the name "Lady Maria" by bluegate.

 

[Elvis Starburst]

How have you not been hired yet? Like, this shit is crazy o3o

 

[Aerosteam]

Get the fuck hired and get rid of these spambots.

 

[bluegate]

#1 add-on 2017

Well I was going to write lots and make this all flow but then decided against it
I'm no good with long winded written text and it would've taken me far too long to improve upon it so have my chicken scratch

Spoiler: Feedback/criticism/praise/requests/what have you:

Mis-clicked the back button and lost my work - I was actually reaching for the swap left to right button
Maybe space those two out further? (not like I foolishly didn't read a certain blatant warning or something)
Having the save button be immediately visible instead of having it hidden away in the vertical ellipsis button would be most welcomed

Editing certain sections took forever and a half in advance mode
Maybe make an "apply to all" toggle or something for applicable sections of repetition

Index>blocks>
When you get rid of the container background you can't adjust container border to reflect the smaller area
A toggle for small container would be nice

Could you add in global hover background color for links?
Far superior to hover text imo - image

Image edit requests:
Edit color of icon images for menu - the joystick - shopping cart - magnifying glass - widget

Maybe make the "+" sign in the "my escapist" menu a separate field for color adjustments

Serves as a placeholder but I find the ~18kb of bandwidth best used loading actually page content instead of a fake loading bar

The smallest of cares:
I noticed you took the bottom white body margin out in a past version but it still technically exists - just out of sight
If you zoom out past 50% the site header menus screw up revealing the same white body underneath image
If you could fix the zoom out bug that would be great or give us a means to edit the body#index background color
Knowing there be a sea of white back there drives me nuts but it honestly doesn't matter much
Buuut - If the content doesn't load in an instant (and I do mean instantly) then you get flashed with white before everything loads in - not fun
Turned into really big deal - huh

hover font veiw all/everything - I no more know what this meant

index/stream panels/buttons/submenu- no option for border
escapistmagazine.com/news/#news_stream_sub_head - general bleeds through
quiz/poular quizes/hover font - hover missing
articles/pagnation - back button options are screwy
forum styles/category index/even-odd rows/no name color for mods
couldnt find select forum drop down hover color
forum posts/footer - the warnings - no username color - default escapist site highlights the whole link including the username - looks like you excluded it - odd
small headers are globally linked to popular forum posts sub menu
homepage/featured - wold like to edit font color - maybe didn't find the option idk
forum style/posts in general - to the right of quote there is no border - default site doesnt have one there either but with it the borders actually close - feels so wrong without it
post box for group chat - background color plz
boxes 2x2 - no author hover color- default site doesn't have any either but could you add that in - it leads to the author profile so it would be nice to distinguish

A bug - some elements wouldn't change despite toggling them off/on repeatedly
had to make a new theme then toggle the entire section containing the element on/off then back and reload my theme again
then it would work - came across it ~5 times or so

some spelling errors could be corrected - xbawk allowed
noticed lots in quiz section

Making a detailed advance theme with this tool takes some serious commitment I find

Will probably have even more words in future

Seeing as I put little effort in the above feel free to ignore but hope it is acknowledged

---

Per glassdoor, Defy Media ain't the best company to work for - might want to stay away actually

 

[bluegate]

#1 add-on 2017

Well I was going to write lots and make this all flow but then decided against it
I'm no good with long winded written text and it would've taken me far too long to improve upon it so have my chicken scratch

Spoiler: Feedback/criticism/praise/requests/what have you:

-snipsnipsnip!-

Seeing as I put little effort in the above feel free to ignore but hope it is acknowledged

Nonsense!😄

I actually enjoy criticism like this, it keeps me on my toes and improves the product for all to use.
I'm actually thankful for you pointing those things out and requesting things, and your chicken scratch 'format' was easy to read and work off of, a bit like a to-do list.😄

Spoiler: The results of your feedback

Mis-clicked the back button and lost my work - I was actually reaching for the swap left to right button
Maybe space those two out further? (not like I foolishly didn't read a certain blatant warning or something)
Having the save button be immediately visible instead of having it hidden away in the vertical ellipsis button would be most welcomed

I'm sorry to hear that you lost your work and I feel fully responsible for it as it is an easy mistake to make and I really didn't do anything to protect against it, so in version 1.4.6 of the Add-on a message will pop up reminding you to save and ask you whether you really want to close the editor. I hope that this will prevent future loss of data.

There is now also a Save button sitting at the top of the Editor, I guess that it should have been there from the start...
My reasoning for putting it in the Authentication Bar's context menu to indicate that it is an action that requires authentication, ah well, it can still be found there, though.

I hope that this will be sufficient? If not then I'd be happy to add something else.

Version 1.4.6 will release within the following two or so hours of posting this post, I won't make a post for it in the forum thread as it is rather low-content, but I will make a news post of it in its User Group, so you can subscribe to that if you want to be kept up to date. Version 1.4.6 should be up for download.

Editing certain sections took forever and a half in advance mode
Maybe make an "apply to all" toggle or something for applicable sections of repetition

I could personally do with things taking forever, but that extra half really does tip the scales, doesn't it?
Tell me which sections you are thinking about and I'll change some things around.
Currently added a singular Rows section for the Forum indexi.

Index>blocks>
When you get rid of the container background you can't adjust container border to reflect the smaller area
A toggle for small container would be nice

I'm assuming that you are referring to Index > Slideshow > Blocks?
I assume that you want the padding of the container to be gone and the container to only be the width of its children?
If so, you can now find this under:
Index > Slideshow > Blocks > Small Width Container

Could you add in global hover background color for links?
Far superior to hover text imo - image

Sure thing;
General Styles > General Styles > Link Background
General Styles > General Styles > Hover Link Background

As you requested, this is a global style and will add it to all a tags, so beware.
If there are specific links that you would like to only have backgrounds, then just tell me which ones and I'll add them.

Image edit requests:
Edit color of icon images for menu - the joystick - shopping cart - magnifying glass - widget
Maybe make the "+" sign in the "my escapist" menu a separate field for color adjustments

This will require some more creative tinkering, I will start to work on it during the weekend. ( Had planned to do it after posting this, but it's almost 2AM already so... )

EDIT: You can now find those options in the theme editor under;
General Styles > Site Header > Buttons > The applicable buttons

Serves as a placeholder but I find the ~18kb of bandwidth best used loading actually page content instead of a fake loading bar

Chances are the image is already cached on your machine at the moment, but consider it potentially gone
The option to hide it can now be found at:
Index > Slideshow > Hide Loader Image
And you can change the background color of that div, if you'd like to, at
Index > Slideshow > Loader background

The smallest of cares:
I noticed you took the bottom white body margin out in a past version but it still technically exists - just out of sight
If you zoom out past 50% the site header menus screw up revealing the same white body underneath image
If you could fix the zoom out bug that would be great or give us a means to edit the body#index background color
Knowing there be a sea of white back there drives me nuts but it honestly doesn't matter much
Buuut - If the content doesn't load in an instant (and I do mean instantly) then you get flashed with white before everything loads in - not fun
Turned into really big deal - huh

That white margin at the bottom of pages that I removed was caused by two tracker images by Viacom. ( Just open the source and do a search for "Viacom" and you'll find the little critters )
Although they have their width and height attributes set to 0, they were still being rendered as taking up space, showing the HTML's background color, I merely took them out of the page's DOM flow.

Now the menu getting all garbled when you zoom out on the page, that is an entirely different beast altogether now, isn't it?
As you probably already know, it is caused by rounding of the pixels values used for the menu items when shrinking them, for example 90% of 774 or 191 are never going to be a pretty numbers.
So in order to fix this you'd need to take away the menu items' dependency on pixel values for their width.

But, as per your request I have changed the way the top menu is built, this will be included by enabling;
General Styles > Site Header
You can turn off all children if you so desire.

Spoiler: If you're interested, here is the css involved

The menu now basically uses display: flex; to fix its zoom-out quirks.
Some button's will slightly change their width, but they won't mess with the overall menu anymore when zooming out.

#menuBottom .itemTops
{
	display: none;
}
#menuBottom > #itemContainter
{
	width: 100% !important;
	display: flex !important;
	flex-flow: row wrap;
	justify-content: space-around;
}
#menuBottom > #itemContainter .menu_box
{
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0px , rgba(0,0,0,0) 5px, #1c1c1c 5px,#4D4D4D 100%) !important;
	height: 45px !important;
	width: auto !important;
	text-align: center !important;
	white-space: nowrap;
	flex-grow: 1;
	padding-top: 5px !important;
	box-sizing: border-box !important;
}
#menuBottom .menu_box::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 5px;
	background-color: wheat;
	top: 0px;
	left: 0px;
}
#menuBottom #videogames.menu_box::before {
	background-color: #000653 !important;
}
#menuBottom #moviesandtv.menu_box::before {
	background-color: #b29d22 !important;
}
#menuBottom #comicsandcosplay.menu_box::before {
	background-color: #8a0005 !important;
}
#menuBottom #tabletop.menu_box::before {
	background-color: #3d0358 !important;
}
#menuBottom #scienceandtech.menu_box::before {
	background-color: #006812 !important;
}
#menuBottom .menu_box.active:after, #menuBottom .menu_box:hover:after
{
	width: 100% !important;
	background-size: 100% 100% !important;
}
#menuBottom #moviesandtv.menu_box.active > a:after, #menuBottom #moviesandtv.menu_box:hover > a:after
{
	border-right: 67px solid transparent !important;
}
#menuTop #loginBar #profile
{
	box-sizing: border-box !important;
	width: 43% !important;
}
#menuTop #loginBar #messages
{
	box-sizing: border-box !important;
	width: 57% !important;
}
#menuTop #loginBar #messages:hover
{
	border-bottom-style: none !important;
}
#menuTop #loginBar #register
{
	box-sizing: border-box !important;
	width: 48% !important;
}
#menuTop #loginBar #login
{
	box-sizing: border-box !important;
	width: 52% !important;
}
#menuTop #loginBar
{
	width: auto !important;
	position: absolute !important;
	top: 0px !important;
	right: 2px !important;
	left: 632px !important;
}
#menuTop #loginBar #profile:hover
{
	border-bottom-style: none !important;
}
#menuTop #loginBar #profile:hover #profileCont
{
	top: 30px !important;
}

As for a way to color the entire background of the page, you will now be able to find it under;
General Styles > Site Body > General Background Color
This changes the background color of the HTML tag, so it should fix the color of the white space which you described.

hover font veiw all/everything - I no more know what this meant

If you don't, how are you expecting me to know, ha!
Index > Weekly Content > View All / View Everything
Just kidding. I assume that you meant that turning one of those two on will remove the background color for the other button?
That isn't a bug but actually intended behaviour, because they both get their normal background color from their parent, changing one of their backgrounds sets the parent's background to nothing, in case you want to use Alpha channels for the buttons backgrounds, can't have a black square sitting behind the buttons in that case, now can we?

I guess I could also have added an option to remove the black background... I'll just do that...
Index > Weekly Content > "All" / "Everything" Shared Background

index/stream panels/buttons/submenu- no option for border

That would be because the sub menus I encountered didn't have borders. Which borders would you like added? And did you encounter stream panels with sub menus that did have borders but weren't able to be edited?
EDIT: I added some styles and lines to add left and right borders to all sub menus ( all that I have found thus far ) and even the ability to add borders to the header sections of stream panels, to give them all one unified look.

escapistmagazine.com/news/#news_stream_sub_head - general bleeds through

Not entirely sure what you mean by general bleeds through, but that page is indeed a bit of a problem page and a page that I haven't made css rules for yet.

It is a great example of the Escapist's schizophrenic approach to design, though. Those boxes are basically the same as the 3x1 boxes, but don't have their classes. And the little buttons inside them have classes which are used for something entirely different on other parts of the website, causing some weird mix up of styles to happen.

To be honest, I only stumbled upon that page after I released the advanced themes and was planning on creating styles for those pages this weekend, hope this doesn't inconvenience you too much.

EDIT: I made some preliminary styles and the appropriate box?x? styles are applied to the boxes on that page and on the Features page ( escapistmagazine.com/articles/ )

quiz/poular quizes/hover font - hover missing

Whoops! Forgot to properly name those...
The bottom Background and Font were actually the Hover styles.

articles/pagnation - back button options are screwy

Whoops, the section named "Active" inside that back button was wrongly named, it should be ( and now is ) named "Inactive".
When you're on the first or last page of a multi-page article then the Back and Front buttons will be flagged as inactive.

forum styles/category index/even-odd rows/no name color for mods

Whoops, they have been added beneath the Premium options.

couldnt find select forum drop down hover color

I assume you are referring to the options in the drop down list? For as far as I can tell, you can't change their hover colors, they are browser defined.
But if you know of a way, feel free to share.

forum posts/footer - the warnings - no username color - default escapist site highlights the whole link including the username - looks like you excluded it - odd

I excluded the username because the default layout also doesn't give it an extra color, it just makes it bold, but there is now an option to recolor the username, and although it doesn't do much, also a hover style. You can find them beneath the Warning Toggle Color.

small headers are globally linked to popular forum posts sub menu

Could you elaborate this a little bit further?

homepage/featured - wold like to edit font color - maybe didn't find the option idk

That option was indeed not present.
You can now find it at:
Index > Features > Items
As for why I didn't initially add it, it's because I figured that some colors might not mix well with future background images.

forum style/posts in general - to the right of quote there is no border - default site doesnt have one there either but with it the borders actually close - feels so wrong without it

I see what you are getting at, you can now find it under;
Forum Styles > Posts > Top Bar > Right Most Border

post box for group chat - background color plz

You can now find it under;
Groups > Group Page > Chat Posts > Chat Box Background

boxes 2x2 - no author hover color- default site doesn't have any either but could you add that in - it leads to the author profile so it would be nice to distinguish

I added it, but the author name isn't a link to the author's profile, at least, not on the page which I tested it on;
http://www.escapistmagazine.com/movies-and-tv/reviews

Maybe there is some other page where they the author name is a link? Feel free to share if there is.

A bug - some elements wouldn't change despite toggling them off/on repeatedly
had to make a new theme then toggle the entire section containing the element on/off then back and reload my theme again
then it would work - came across it ~5 times or so

Do you happen to remember which pages this happened on?
I encountered a bug where instant-preview styles weren't applied to pages, for example the Article pages, and I rolled out an update of the Add-on to fix this ( 1.4.4 ).
It could be that you were experiencing this bug.

I also encountered a bug where MyEscapist > User Reviews > Buttons > Sub Menu styles wouldn't be applied if Hover Active Title wasn't set, which should also have been fixed.

If you still run into this phenomenon, then I would like to ask you to provide me the following information so that I can try and replicate the problem;
- Page URL
- The Nodes that aren't working
- Browser you are using

And if at all possible, I would like to ask you to look at the browser's Error Console ( right click anywhere on the page, "Inspect Element", and then click on Console ) and see if there are any class.themedock.js related errors popping up. If so, a screenshot would help tons.

some spelling errors could be corrected - xbawk allowed
noticed lots in quiz section

I found a couple, for example "Highlighter Row", "Linkes", I guess it shows that I made those sections late at night
I'll keep on searching for other spelling errors though!

Making a detailed advance theme with this tool takes some serious commitment I find

Using it to create the Lady Maria theme I experienced the same thing, lol
I guess I failed at finding a good enough balance of editable details and number of nodes

Will probably have even more words in future

- Will be looking forward to them, and thanks a bunch, really!

By the way, when I say "you can find it under", I don't mean to say that you didn't look for them good enough, but that I added them and that they are now there.

Newly added nodes like this should show up by simply opening the theme editor.

If there were points that I didn't address or didn't address properly, feel free to throw them in my face again as I'm getting a bit groggy.🤤

Per glassdoor, Defy Media ain't the best company to work for - might want to stay away actually

Interesting, never heard of glassdoor.com before.

[hr]

How have you not been hired yet? Like, this shit is crazy o3o

Luckily, pulling off stuff like this doesn't require me being hired 🙃

Get the fuck hired and get rid of these spambots.

It appears they found a way to combat the spam bots 😄 . Your avatar is most intriguing, by the way.🤔

*Claps* Most impressive. I definitely admire your work my man, thank you so very much for this.

No problem, happy to give a little something back to the community around here, glad to hear it's being appreciated.👍

 

[Poetic Nova]

Too bad I can't instal it, the stubborn git I am I have yet to upgrade Firefox since 3 years or so now, purely because they keep messing with the layout.

 

[Lil devils x_v1legacy]

YAY! TOYS! This should be stickied!

 

[Tanis]

Glad to see there's still someone out there who cares.
<3

 

[Drathnoxis]

Would it be possible to add an option to remove the stupid perma-ban avatar and just let it display their regular one that's still on their profile?

I sometimes like to browse through old threads and I hate seeing half the users having this avatar:

 

[bluegate]

Would it be possible to add an option to remove the stupid perma-ban avatar and just let it display their regular one that's still on their profile?

I sometimes like to browse through old threads and I hate seeing half the users having this avatar:

-snip, because one of those images on a page is enough, lol-

Sadly, the link to the original avatar is no longer included in the post of a banned user, so it would be impossible for a theme to restore the previous avatar within a forum post.
However, I have added an option to the Theme Editor to allow people to hide the perma-ban avatar and an option to replace it with an opaque version of the default male avatar. The replacing with a default avatar would be done so that there is still some space to click on to navigate to a user's profile.

It is up to creators of themes to enable this feature, though. If people aren't willing to accommodate you then you could always create your own with just that option turned on, or copy their theme for yourself and add it.
[small]( Lady Maria currently has it set to Hide & Replace, if you want to see how it works )[/small]

For people who are interested in this option, it can be found under;
Forum Styles > Posts > Left Side > Banned Users > Hide Avatar
Forum Styles > Posts > Left Side > Banned Users > Hide & Add Stock Avatar


As for adding the user's original avatar, this could probably be done through the plugin itself, but for every banned user that it would find in a thread that you are watching, the add-on would make a request to that person's profile page and extract the avatar from there.
Certainly not impossible to add as a feature if you'd like, but it might result in a slightly longer spinning icon at the top of the browser &#128540;

Too bad I can't instal it, the stubborn git I am I have yet to upgrade Firefox since 3 years or so now, purely because they keep messing with the layout.

Sadly I'm not that well versed in the old ways that Firefox used to support browser add-ons. &#128532;

YAY! TOYS! This should be stickied!

That'd be funny, there'd be more stickied threads by me in the Off-Topic section than staff stickies&#128514; And going by alphabetical order, mine would sit right at the top &#128514;
Might be a bit too much

 

[Lil devils x_v1legacy]

YAY! TOYS! This should be stickied!

That'd be funny, there'd be more stickied threads by me in the Off-Topic section than staff stickies&#128514; And going by alphabetical order, mine would sit right at the top &#128514;
Might be a bit too much

Maybe we should just add a section to the forums for " forum toys" and put them all in there so we can find all the cool stuff in one place! I have this bookmarked, but anyone new coming in later would never be able to find these things.

 

[Drathnoxis]

As for adding the user's original avatar, this could probably be done through the plugin itself, but for every banned user that it would find in a thread that you are watching, the add-on would make a request to that person's profile page and extract the avatar from there.
Certainly not impossible to add as a feature if you'd like, but it might result in a slightly longer spinning icon at the top of the browser &#128540;

Would that be hard to do? I usually open up the person's profile manually to see their avatar anyway, so the extra load times wouldn't matter to me.

 

[bluegate]

Maybe we should just add a section to the forums for " forum toys" and put them all in there so we can find all the cool stuff in one place! I have this bookmarked, but anyone new coming in later would never be able to find these things.

How many posts would fill such a section though &#129300;.

But you're right, once this thread is swallowed up by the sands of time, it would be rather difficult for new users to ever find it.

As for adding the user's original avatar, this could probably be done through the plugin itself, but for every banned user that it would find in a thread that you are watching, the add-on would make a request to that person's profile page and extract the avatar from there.
Certainly not impossible to add as a feature if you'd like, but it might result in a slightly longer spinning icon at the top of the browser &#128540;

Would that be hard to do? I usually open up the person's profile manually to see their avatar anyway, so the extra load times wouldn't matter to me.

As of now it is part of the Escapist Plus Add-on.

You will have to turn the option ON in the Add-on's options page which can be reached by clicking the word "Options" at the bottom of the Add-on's menu.

I hope that this works well enough for you, I tested it on this page.

Page loading time doesn't seem to be affected, but the avatars don't show up instantly on loading the page, they will pop in over time as the add-on collects the avatar url's from each user's profile page. Also, for profiles that have been deleted ( e.g. Furburt ), the add-on will replace the avatar with the default male avatar.

 

[Drathnoxis]

As of now it is part of the Escapist Plus Add-on.

You will have to turn the option ON in the Add-on's options page which can be reached by clicking the word "Options" at the bottom of the Add-on's menu.

I hope that this works well enough for you, I tested it on this page.

Page loading time doesn't seem to be affected, but the avatars don't show up instantly on loading the page, they will pop in over time as the add-on collects the avatar url's from each user's profile page. Also, for profiles that have been deleted ( e.g. Furburt ), the add-on will replace the avatar with the default male avatar.

Fantastic! =D
You're too good for this site!

 

[bluegate]

#1 add-on 2017

Well I was going to write lots and make this all flow but then decided against it
I'm no good with long winded written text and it would've taken me far too long to improve upon it so have my chicken scratch

Spoiler: Feedback/criticism/praise/requests/what have you:

-snipsnipsnip!-

Seeing as I put little effort in the above feel free to ignore but hope it is acknowledged

Nonsense!&#128516;

I actually enjoy criticism like this, it keeps me on my toes and improves the product for all to use.
I'm actually thankful for you pointing those things out and requesting things, and your chicken scratch 'format' was easy to read and work off of, a bit like a to-do list.&#128516;

Spoiler: The results of your feedback

snip

By the way, when I say "you can find it under", I don't mean to say that you didn't look for them good enough, but that I added them and that they are now there.

Newly added nodes like this should show up by simply opening the theme editor.

If there were points that I didn't address or didn't address properly, feel free to throw them in my face again as I'm getting a bit groggy.&#129316;

You work fast
This took a while to respond to

Spoiler: Far too many thanks

Mis-clicked the back button and lost my work - I was actually reaching for the swap left to right button
Maybe space those two out further? (not like I foolishly didn't read a certain blatant warning or something)
Having the save button be immediately visible instead of having it hidden away in the vertical ellipsis button would be most welcomed

I'm sorry to hear that you lost your work and I feel fully responsible for it as it is an easy mistake to make and I really didn't do anything to protect against it, so in version 1.4.6 of the Add-on a message will pop up reminding you to save and ask you whether you really want to close the editor. I hope that this will prevent future loss of data.

There is now also a Save button sitting at the top of the Editor, I guess that it should have been there from the start...
My reasoning for putting it in the Authentication Bar's context menu to indicate that it is an action that requires authentication, ah well, it can still be found there, though.

I hope that this will be sufficient? If not then I'd be happy to add something else.

Version 1.4.6 will release within the following two or so hours of posting this post, I won't make a post for it in the forum thread as it is rather low-content, but I will make a news post of it in its User Group, so you can subscribe to that if you want to be kept up to date. Version 1.4.6 should be up for download.

That pop-up is a data saver which to I already owe some of my life

Editing certain sections took forever and a half in advance mode
Maybe make an "apply to all" toggle or something for applicable sections of repetition

I could personally do with things taking forever, but that extra half really does tip the scales, doesn't it?
Tell me which sections you are thinking about and I'll change some things around.
Currently added a singular Rows section for the Forum indexi.

I'd have to get back to you on that when I make another theme and have a fresh experience again
I remember the site header/buttons being a daunting task to edit though
Also odd/even rows - I ended up applying the same settings to both rows in every case
They pop up in lots of places too - forums/groups/messages - basically anywhere with a table of data - oh, just reread that last bit - nvm
Colors too (h1,h2,h3) - shows up lots and ended up applying the same settings everywhere

Index>blocks>
When you get rid of the container background you can't adjust container border to reflect the smaller area
A toggle for small container would be nice

I'm assuming that you are referring to Index > Slideshow > Blocks?
I assume that you want the padding of the container to be gone and the container to only be the width of its children?
If so, you can now find this under:
Index > Slideshow > Blocks > Small Width Container

Yes, I was - oops
Exactly what I had in mind - Thank you

Could you add in global hover background color for links?
Far superior to hover text imo - image

Sure thing;
General Styles > General Styles > Link Background
General Styles > General Styles > Hover Link Background

As you requested, this is a global style and will add it to all a tags, so beware.
If there are specific links that you would like to only have backgrounds, then just tell me which ones and I'll add them.

Thank you

Image edit requests:
Edit color of icon images for menu - the joystick - shopping cart - magnifying glass - widget
Maybe make the "+" sign in the "my escapist" menu a separate field for color adjustments

This will require some more creative tinkering, I will start to work on it during the weekend. ( Had planned to do it after posting this, but it's almost 2AM already so... )

EDIT: You can now find those options in the theme editor under;
General Styles > Site Header > Buttons > The applicable buttons

Thanks
No reason to lose sleep over tho

Serves as a placeholder but I find the ~18kb of bandwidth best used loading actually page content instead of a fake loading bar

Chances are the image is already cached on your machine at the moment, but consider it potentially gone
The option to hide it can now be found at:
Index > Slideshow > Hide Loader Image
And you can change the background color of that div, if you'd like to, at
Index > Slideshow > Loader background

Probably but it don't hurt
Thank you

The smallest of cares:
I noticed you took the bottom white body margin out in a past version but it still technically exists - just out of sight
If you zoom out past 50% the site header menus screw up revealing the same white body underneath image
If you could fix the zoom out bug that would be great or give us a means to edit the body#index background color
Knowing there be a sea of white back there drives me nuts but it honestly doesn't matter much
Buuut - If the content doesn't load in an instant (and I do mean instantly) then you get flashed with white before everything loads in - not fun
Turned into really big deal - huh

That white margin at the bottom of pages that I removed was caused by two tracker images by Viacom. ( Just open the source and do a search for "Viacom" and you'll find the little critters )
Although they have their width and height attributes set to 0, they were still being rendered as taking up space, showing the HTML's background color, I merely took them out of the page's DOM flow.

Now the menu getting all garbled when you zoom out on the page, that is an entirely different beast altogether now, isn't it?
As you probably already know, it is caused by rounding of the pixels values used for the menu items when shrinking them, for example 90% of 774 or 191 are never going to be a pretty numbers.
So in order to fix this you'd need to take away the menu items' dependency on pixel values for their width.

But, as per your request I have changed the way the top menu is built, this will be included by enabling;
General Styles > Site Header
You can turn off all children if you so desire.

Spoiler: If you're interested, here is the css involved

The menu now basically uses display: flex; to fix its zoom-out quirks.
Some button's will slightly change their width, but they won't mess with the overall menu anymore when zooming out.

snip[/code]

As for a way to color the entire background of the page, you will now be able to find it under;
General Styles > Site Body > General Background Color
This changes the background color of the HTML tag, so it should fix the color of the white space which you described.

Huh, never thought there were images down there - just thought it was a clear margin of space
I knew nothing so thanks for the informative solution

hover font veiw all/everything - I no more know what this meant

If you don't, how are you expecting me to know, ha!
Index > Weekly Content > View All / View Everything
Just kidding. I assume that you meant that turning one of those two on will remove the background color for the other button?
That isn't a bug but actually intended behaviour, because they both get their normal background color from their parent, changing one of their backgrounds sets the parent's background to nothing, in case you want to use Alpha channels for the buttons backgrounds, can't have a black square sitting behind the buttons in that case, now can we?

I guess I could also have added an option to remove the black background... I'll just do that...
Index > Weekly Content > "All" / "Everything" Shared Background

As I still can't actually confirm with absolute certainty that that is indeed what I had meant I'm gonna have to say maybe
Sounds right though
Thanks

index/stream panels/buttons/submenu- no option for border

That would be because the sub menus I encountered didn't have borders. Which borders would you like added? And did you encounter stream panels with sub menus that did have borders but weren't able to be edited?
EDIT: I added some styles and lines to add left and right borders to all sub menus ( all that I have found thus far ) and even the ability to add borders to the header sections of stream panels, to give them all one unified look.

In your search you got the one I was inadequately addressing so hooray
http://www.escapistmagazine.com/tag/ - at the time the border did in fact appear but the color was not editable

Looking at it some more it seems the right border as well as add container border are slightly unaligned to the right from 90-100% magnification
67-80% it becomes correctly aligned
50% down it becomes unaligned to the left
Or maybe its the stream panel border that is unaligned depending on perspective
Either way something is off

escapistmagazine.com/news/#news_stream_sub_head - general bleeds through

Not entirely sure what you mean by general bleeds through, but that page is indeed a bit of a problem page and a page that I haven't made css rules for yet.

It is a great example of the Escapist's schizophrenic approach to design, though. Those boxes are basically the same as the 3x1 boxes, but don't have their classes. And the little buttons inside them have classes which are used for something entirely different on other parts of the website, causing some weird mix up of styles to happen.

To be honest, I only stumbled upon that page after I released the advanced themes and was planning on creating styles for those pages this weekend, hope this doesn't inconvenience you too much.

EDIT: I made some preliminary styles and the appropriate box?x? styles are applied to the boxes on that page and on the Features page ( escapistmagazine.com/articles/ )

At the time general styles was also affecting that page
It was general styles/popular forum posts/posts/comments box
I thought it was intentional but it loaded in real funky and unaligned
Left the page unedited but now everything seems fine and dandy

quiz/poular quizes/hover font - hover missing

Whoops! Forgot to properly name those...
The bottom Background and Font were actually the Hover styles.

Thanks

articles/pagnation - back button options are screwy

Whoops, the section named "Active" inside that back button was wrongly named, it should be ( and now is ) named "Inactive".
When you're on the first or last page of a multi-page article then the Back and Front buttons will be flagged as inactive.

Thanks

forum styles/category index/even-odd rows/no name color for mods

Whoops, they have been added beneath the Premium options.

Thanks

couldnt find select forum drop down hover color

I assume you are referring to the options in the drop down list? For as far as I can tell, you can't change their hover colors, they are browser defined.
But if you know of a way, feel free to share.

Yup
Didn't even know that was a thing
No clue

forum posts/footer - the warnings - no username color - default escapist site highlights the whole link including the username - looks like you excluded it - odd

I excluded the username because the default layout also doesn't give it an extra color, it just makes it bold, but there is now an option to recolor the username, and although it doesn't do much, also a hover style. You can find them beneath the Warning Toggle Color.

Thanks

small headers are globally linked to popular forum posts sub menu

Could you elaborate this a little bit further?

For example, Groups/small headers - if you enable it it also affects the popular forum posts sub menu
Happens elsewhere when ?small headers? is a menu category - can't remember where exactly but it feels like I saw it elsewhere

homepage/featured - wold like to edit font color - maybe didn't find the option idk

That option was indeed not present.
You can now find it at:
Index > Features > Items
As for why I didn't initially add it, it's because I figured that some colors might not mix well with future background images.

Yeah, I can see that
Background colors help in that department but since titles on the escapist tend be super long they mostly block the majority of the image - short titles look real crisp tho
No compromise to be had unless you can implement outer strokes on text via css

forum style/posts in general - to the right of quote there is no border - default site doesnt have one there either but with it the borders actually close - feels so wrong without it

I see what you are getting at, you can now find it under;
Forum Styles > Posts > Top Bar > Right Most Border

Thanks

post box for group chat - background color plz

You can now find it under;
Groups > Group Page > Chat Posts > Chat Box Background

Chat box - font color please
Made the background color black but the default font color is also black

boxes 2x2 - no author hover color- default site doesn't have any either but could you add that in - it leads to the author profile so it would be nice to distinguish

I added it, but the author name isn't a link to the author's profile, at least, not on the page which I tested it on;
http://www.escapistmagazine.com/movies-and-tv/reviews

Maybe there is some other page where they the author name is a link? Feel free to share if there is.

I'm starting to think I made this up as I can't find one anymore
Feel free to scrap it

Just a thought but could you make the "boxes" a bit more descriptive as to what they actually affect
I still have to toggle them off/on just to tell which one I'm working with - the theme I'm working on has 3x2 toggled off as I don't know what it does
One kinda has to know the site's css to identity them

A bug - some elements wouldn't change despite toggling them off/on repeatedly
had to make a new theme then toggle the entire section containing the element on/off then back and reload my theme again
then it would work - came across it ~5 times or so

Do you happen to remember which pages this happened on?
I encountered a bug where instant-preview styles weren't applied to pages, for example the Article pages, and I rolled out an update of the Add-on to fix this ( 1.4.4 ).
It could be that you were experiencing this bug.

I also encountered a bug where MyEscapist > User Reviews > Buttons > Sub Menu styles wouldn't be applied if Hover Active Title wasn't set, which should also have been fixed.

If you still run into this phenomenon, then I would like to ask you to provide me the following information so that I can try and replicate the problem;
- Page URL
- The Nodes that aren't working
- Browser you are using

And if at all possible, I would like to ask you to look at the browser's Error Console ( right click anywhere on the page, "Inspect Element", and then click on Console ) and see if there are any class.themedock.js related errors popping up. If so, a screenshot would help tons.

Not anymore sorry but I'll make sure to grab all that in future occurrences

some spelling errors could be corrected - xbawk allowed
noticed lots in quiz section

I found a couple, for example "Highlighter Row", "Linkes", I guess it shows that I made those sections late at night
I'll keep on searching for other spelling errors though!

Get some sleep

Making a detailed advance theme with this tool takes some serious commitment I find

Using it to create the Lady Maria theme I experienced the same thing, lol
I guess I failed at finding a good enough balance of editable details and number of nodes

More is always better than less with customization

Will probably have even more words in future

- Will be looking forward to them, and thanks a bunch, really!

Thank you for the add-on

Spoiler: More words

I should probably number these...

1. Latest columns/archived columns affects popular forum posts - this page

2. Groups - recommended groups - edit background color/hover?

3. Remove general background gradient of site?

4. Groups/chat posts/spoiler - no hover flavor color - saw it on other places but not here

5. Post previews - cant edit date/time/username color
also I cant see footnotes in the preview since they are default black text - general preview color editing would help

6. When creating new topic - option to change subject box background color as well as poll question/poll boxes - along with their respective font colors

7. New message/subject/to - box background color/font color plz

8. Profile - search bar - box background color/font color plz

9. Site footer - search bar - box background color/font color plz

10. User title color also affects "BANNED" font color - anyway to differentiate the two?

11. Can't edit font color - this page - Erin is tempted by the devil weed./They're awful./etc

You know the sub menu in a general forum post that pops up when selecting the username bar? Anyway to make that bar an actual linking object (mouse changes when hovered)? Didn't even know it served purpose for the longest time - just thought it was there for username contrast

Messages - menus inbox/sent/trash - anyway to expand their selection area to their entire background? As it is one needs to select the text to actually link - seems unnatural considering the "new message" box above acts differently

Profiles/messaging/"with checked" - also affects forward/delete when viewing message - wanted to implement red hover for "delete" and a different color for "forward" - can that be done?

Came across this article - link
Anyway to make the link coloring override the font color of the emphasized tag?
Essentially I want the emphasized/linked "Diablo 3 Eternal Collection" to look exactly like the linked "closed beta since April" but emphasized of course

[hr]

Too bad I can't instal it, the stubborn git I am I have yet to upgrade Firefox since 3 years or so now, purely because they keep messing with the layout.

Might want to look into Classic Theme Restorer
Most of the add-ons I use would break with updating so I'm still on v28

 

[bluegate]

You work fast
This took a while to respond to

I took your advice and did some sleeping and took things easy for a few days.

Spoiler: Some scribbles

I'd have to get back to you on that when I make another theme and have a fresh experience again
I remember the site header/buttons being a daunting task to edit though
Also odd/even rows - I ended up applying the same settings to both rows in every case
They pop up in lots of places too - forums/groups/messages - basically anywhere with a table of data - oh, just reread that last bit - nvm
Colors too (h1,h2,h3) - shows up lots and ended up applying the same settings everywhere

I added a section which applies background and font styles to the Arcade, Store, My Escapist, Forums, Profile and Messages buttons, I hope that it will help out in the future.
General Styles > Site Header > Buttons > All Buttons

The escapist itself also uses the same colors for H1, H2 and H3 within their articles, posts and chat messages so one should feel no shame in applying the same color oneself, right? &#128517; I could add a section to the general styles that applies to all H1, H2 and H3 tags all over the site, but I'm not sure whether that will have unforeseen side effects, I'll look into it.

In your search you got the one I was inadequately addressing so hooray
http://www.escapistmagazine.com/tag/ - at the time the border did in fact appear but the color was not editable

Looking at it some more it seems the right border as well as add container border are slightly unaligned to the right from 90-100% magnification
67-80% it becomes correctly aligned
50% down it becomes unaligned to the left
Or maybe its the stream panel border that is unaligned depending on perspective
Either way something is off

That's the same issue that popped up with the site's menu, pixel width values being rounded weirdly when zooming out. I'll look into changing their display to flex to get rid of the pixel dependencies over the coming week, the positioning of the slanted bits might change because of this, but I doubt many people will notice.

small headers are globally linked to popular forum posts sub menu

Could you elaborate this a little bit further?

For example, Groups/small headers - if you enable it it also affects the popular forum posts sub menu
Happens elsewhere when ?small headers? is a menu category - can't remember where exactly but it feels like I saw it elsewhere

The Small Headers section shouldn't affect the popular forum posts sub menu anymore on the group pages.

And I noticed that the Group Page section was also affecting the Group Index section, something which shouldn't have happened and now doesn't happen anymore.

Yeah, I can see that
Background colors help in that department but since titles on the escapist tend be super long they mostly block the majority of the image - short titles look real crisp tho
No compromise to be had unless you can implement outer strokes on text via css

Adding a stroke around only text that overflows is impossible through CSS for as far as I know, however I have added an option to contain titles, this will stop titles in these little boxes from overflowing over the author.
Index > Features > Items > Contain Title

Chat box - font color please
Made the background color black but the default font color is also black

Whoops, should have seen that one coming.
Groups > Group Page > Chat Posts > Chat Box Font

I'm starting to think I made this up as I can't find one anymore
Feel free to scrap it

Just a thought but could you make the "boxes" a bit more descriptive as to what they actually affect
I still have to toggle them off/on just to tell which one I'm working with - the theme I'm working on has 3x2 toggled off as I don't know what it does
One kinda has to know the site's css to identity them

You're pretty much right about that, but I can't really think of a more descriptive name for those boxes, they are used on several locations and describing them as their size seemed like the most uniform way to go about it ( I totally didn't look at their CSS class... nah ).

Slightly anticipating questions such as this, a few days ago I added an Editor Documentation section to the opening post of this topic ( I should have made a separate post drawing attention to it... ) which lightly documents the main sections and nodes of the editor with a little description and in some cases a link to a page where that element can be found.

To save you the hassle of scrolling up, you can find box3x2 on this page;
http://www.escapistmagazine.com/everything

Get some sleep

Sounds like a good idea.

1. Latest columns/archived columns affects popular forum posts - this page

Shouldn't happen anymore. Thanks.

2. Groups - recommended groups - edit background color/hover?

Wait a minute, was that Recommended Groups box always there? I can't believe I totally missed it.
Groups > Group Index > Recommended Groups

3. Remove general background gradient of site?

Not sure which background you were referring to, but I added a couple of options;
General Styles > Site Container > Remove Background
General Styles > Site Body > Remove Inner Background

Although these things were already possible by settings the alpha of the gradient to 0.
If you meant something else, then just let me know.

4. Groups/chat posts/spoiler - no hover flavor color - saw it on other places but not here

Good catch.
Groups > Group Page > Chat Posts > Spoilers > Hover Flavor Color

5. Post previews - cant edit date/time/username color
also I cant see footnotes in the preview since they are default black text - general preview color editing would help

Whoops!
Forum Styles > Posting & Editing > Preview Date
Forum Styles > Posting & Editing > Preview Username
Forum Styles > Posting & Editing > "Live Preview"

As for the footnotes, normal footnote styles from the posts should apply to previews, they do when I tested them, at least?
Forum Styles > Posts > Footnote Font Color

I did add two new styles that can color the [1] footnote reference link.
Forum Styles > Posts > Footnote Reference Color
Forum Styles > Posts > Hover Footnote Reference Color

6. When creating new topic - option to change subject box background color as well as poll question/poll boxes - along with their respective font colors

Forum Styles > Posting & Editing > Subject Input
Forum Styles > Posting & Editing > Poll Question Input
Forum Styles > Posting & Editing > Poll Option Input

7. New message/subject/to - box background color/font color plz

Profiles > Messaging > New Message > Subject Input
Profiles > Messaging > New Message > To Input
Profiles > Messaging > New Message > Message Input

8. Profile - search bar - box background color/font color plz

Profiles > Search Box

9. Site footer - search bar - box background color/font color plz

General Styles > Footer > Search Box

10. User title color also affects "BANNED" font color - anyway to differentiate the two?

User title will no longer affect "BANNED" and "BANNED" now has its own field, I hadn't bothered to look for banned users when creating this initially...
Forum Styles > Posts > Left Side > "BANNED"

11. Can't edit font color - this page - Erin is tempted by the devil weed./They're awful./etc

This site keeps coming up with new ways to surprise.
Articles > Article Lists > Head Summary
Articles > Article Lists > Item Summary

You know the sub menu in a general forum post that pops up when selecting the username bar? Anyway to make that bar an actual linking object (mouse changes when hovered)? Didn't even know it served purpose for the longest time - just thought it was there for username contrast

Sure, you can now find the option under;
Forum Styles > Posts > Left Side > User Name Click Cursor

Messages - menus inbox/sent/trash - anyway to expand their selection area to their entire background? As it is one needs to select the text to actually link - seems unnatural considering the "new message" box above acts differently

This is now included by default in themes, pressing update should implement it in your theme.

Profiles/messaging/"with checked" - also affects forward/delete when viewing message - wanted to implement red hover for "delete" and a different color for "forward" - can that be done?

Several nodes have been added to address this;
Profiles > Messaging > "With Checked" > Appropriate Nodes

Came across this article - link
Anyway to make the link coloring override the font color of the emphasized tag?
Essentially I want the emphasized/linked "Diablo 3 Eternal Collection" to look exactly like the linked "closed beta since April" but emphasized of course

Good catch, normal link styles from the Article section should now apply.

At the risk of sounding like a broken record; thanks for the feedback! &#128516;

And if there are things I missed or didn't properly address... well, you know the drill.

 

[bluegate]

Spoiler: not enough thanks

I'm starting to think I made this up as I can't find one anymore
Feel free to scrap it

Just a thought but could you make the "boxes" a bit more descriptive as to what they actually affect
I still have to toggle them off/on just to tell which one I'm working with - the theme I'm working on has 3x2 toggled off as I don't know what it does
One kinda has to know the site's css to identity them

You're pretty much right about that, but I can't really think of a more descriptive name for those boxes, they are used on several locations and describing them as their size seemed like the most uniform way to go about it ( I totally didn't look at their CSS class... nah ).

Slightly anticipating questions such as this, a few days ago I added an Editor Documentation section to the opening post of this topic ( I should have made a separate post drawing attention to it... ) which lightly documents the main sections and nodes of the editor with a little description and in some cases a link to a page where that element can be found.

To save you the hassle of scrolling up, you can find box3x2 on this page;
http://www.escapistmagazine.com/everything

Ah, thanks for the link
Couldn't find it for the life of me
Completely overlooked that edit

2. Groups - recommended groups - edit background color/hover?

Wait a minute, was that Recommended Groups box always there? I can't believe I totally missed it.
Groups > Group Index > Recommended Groups

Yeah, it was either just implemented or recently re-enabled
Otherwise I'm sure I would have requested its editing if I had saw it
Escapist Plus group is featured in those recommendations so I'm guessing Frappe has something to do with it

3. Remove general background gradient of site?

Not sure which background you were referring to, but I added a couple of options;
General Styles > Site Container > Remove Background
General Styles > Site Body > Remove Inner Background

Although these things were already possible by settings the alpha of the gradient to 0.
If you meant something else, then just let me know.

Sorta fumbled with this one
Long story short I mistook a drop shadow for an implausible gradient

5. Post previews - cant edit date/time/username color
also I cant see footnotes in the preview since they are default black text - general preview color editing would help

Whoops!
Forum Styles > Posting & Editing > Preview Date
Forum Styles > Posting & Editing > Preview Username
Forum Styles > Posting & Editing > "Live Preview"

As for the footnotes, normal footnote styles from the posts should apply to previews, they do when I tested them, at least?
Forum Styles > Posts > Footnote Font Color

I did add two new styles that can color the [1] footnote reference link.
Forum Styles > Posts > Footnote Reference Color
Forum Styles > Posts > Hover Footnote Reference Color

I have a hunch that I was looking at my old userscript theme and wrongly attributed the black-on-black footnotes to Escapist Plus
My bad
Switching back and forth between browsers mixes one up

11. Can't edit font color - this page - Erin is tempted by the devil weed./They're awful./etc

This site keeps coming up with new ways to surprise.
Articles > Article Lists > Head Summary
Articles > Article Lists > Item Summary

Oh, didn't even notice the head summary wasn't editable either

I had another list of requests for you but a crash led it to being unsaved
Memory is like goldfish so I only remember a few things

Facebook comments - edit font color
Homepage - edit font color of box above News stream - currently featuring Diablo 3 DLC stuff
Quote/spoiler editable - this page

Think I'm done making requests for now

One I'll have in the future though is background color for all loose hanging font not in a table throughout the site
For instance the homepage - popular forum posts/news/features/columns/weekly content schedule
Will make for some nice image themes where the background color is disabled

Spoiler: something like this but better

Funky bg image is due to how chrome extension takes the screenshot

 

[bluegate]

I had another list of requests for you but a crash led it to being unsaved
Memory is like goldfish so I only remember a few things

My thoughts go out to your lost data. &#128519;

Facebook comments - edit font color

As you might be aware, CSS can't affect pages within iframes, so I would have to update the add-on itself to also inject custom CSS in certain pages on Facebook.com.
I have added it to my to-do list which I will try to work through over the current week.

Homepage - edit font color of box above News stream - currently featuring Diablo 3 DLC stuff

Should now be able to edit this to some extent through;
Index > Featured Boxes

Quote/spoiler editable - this page

Funny that, I assumed the quotes wouldn't work in Group News Posts because they don't work in Group Chats properly either... silly me.
Groups > Group Page > News Posts > Quotes

One I'll have in the future though is background color for all loose hanging font not in a table throughout the site
For instance the homepage - popular forum posts/news/features/columns/weekly content schedule
Will make for some nice image themes where the background color is disabled

Have added mapping of floating text to my to-do list for now.

 

[Redlin5_v1legacy]

Making the community signature background happen was a lot of work back in the day and I just had to type a bunch.

Hats off to you bluegate, you deserve money for the work you're doing here.