Escapist Custom Themes & You
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.
A small description of the 'Theme Dock'.
A small description of the 'Color Themes', themes which lightly change the color of the Escapist.
A small description of the 'Advanced Themes', themes which allow you to change the design of the Escapist in greater detail.
A small description of the part of the Add-on which actually let's users edit themes.
A small description of the inner parts of the 'Theme Editor'.
A small description of how shadow editors work.
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.
A small description detailing how one can share their theme in forum posts, group chats or group news posts.
A small list of all top level editor nodes in the editor, giving examples of what the nodes do.
A section dedicated to frequently asked questions.
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.
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-
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.
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.
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.
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.
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.
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.
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.
The green areas and purple arrows are added for this documentation and aren't present in the actual editor.
Gradients are made up of three different kinds of data; Color Data, Alpha Data and both of their Positional Data.
Color Data points are represented by the little rectangular arrows beneath the horizontal gradient bar. Clicking on them will allow you to change their color and their position, in percentages, ranging from 0 to 100. Aside from changing their position through the input box, you can also change their position by dragging them. Adding an additional Color Data point can be done by clicking inside the green box beneath the horizontal gradient bar. The mouse cursor should change to indicate the action that clicking the mouse will have.
Alpha Data points are represented by little rectangular arrows above the horizontal gradient bar. Clicking on them will allow you to change their alpha value and their position, in percentages, ranging from 0 to 100. Same as with the Color Data points, their position can also be changed by dragging them. Adding an additional Alpha Data point can be done by clicking inside the green box above the horizontal gradient bar. The mouse cursor should change to indicate the action that clicking the mouse will have.
Changing the Degrees will change the direction of the gradient; 90 is left-to-right, 180 is top-to-bottom, etc. The maximum value for this is 360 and the minimum value is 0.
Changing the Direction will change the gradient between a linear gradient and a radial gradient.
The Alpha, Degree and Location inputs can also be modified by pressing the up and down keys on your keyboard.
Full Image Backgrounds
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;
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
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
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
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.
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.
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
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 😄
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.Beneath the Theme Name node you will see a Share BB Code node with some garbled BB code.
Open the Theme Dock, navigate to your Theme and open the Theme Editor.
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.
Copy and paste the above BB code into a forum post.
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.
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.
And that wraps up the scrubby Editor Documentation.
( 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
Respect to any person that actually read all of the above! To people who haven't read it; feel free to ask for a TL:DR or inform yourself through other questions, even if they may already have been answered in my too long post.