Theme Editor Guide Version 0.1 (BETA)


Important Notes

The Theme Editor is currently in BETA, this means you may notice certain bugs or functionality

issues. Please feel free to test everything and let us know of any issues you may encounter.


For the best performance we strongly recommend using the latest version of Firefox Browser with the Theme Editor.


We are aware that Internet Explorer 8 and Internet Explorer 7 browsers are causing slow responsiveness issues with editor controls and image uploading does not work. Please use Firefox instead.



Introduction

Welcome to the Enjin Theme Editor! With the theme editor you can truly make your website look unique. It's extremely flexible and powerful and with no knowledge of coding or css required, you will be able to theme your website easily with amazing results. Every single theme on Enjin was created using the Theme Editor.


By reading this help guide, you will be able to get the most out of this editor and we highly recommend it.


Launching the editor

You can launch the theme editor via a number of ways.


1. Click edit on any theme you have access to in the Theme Browser in your Site Editor.

2. Click "Editor" in your Theme Editor List.


TIP: To quickly jump to your Theme Editor List from your website, hover over the gear icon and click the paintbrush icon.


Theme Editor Top Bar

Section drop-down

In the top left corner there is a large drop down which lists all the separate sections of the theme you can jump to and edit. Each section features grouped settings you can change that will effect a particular part of your theme.

Theme name

Displays the name of the theme your are currently editing.

Save as

Save any theme to your custom theme list. Note Advanced plans can only have 1 custom theme at any one time. If you edit any theme, a custom theme will be automatically created for you. Ultimate plan users can have unlimited custom themes.

Load

Load an existing custom theme from your theme list.

Minimize / Maximize

To get a bigger preview area, click on the top right minus button on the theme editor. To bring the editor back, click on the plus button.

Close Editor

Pressing the x will save the theme and close the editor window.



Settings & Previews

Preview Area 

Under the theme editor you'll notice your website is displayed with the current content however the theme you are viewing is not active to the public. The theme preview is fully functional and you can navigate through your website just as you would regularly. We highly advise that you navigate to pages that features the elements you are editing.



How Editing works

Automatic saving

The theme editor saves every action you make dynamically, this means as you work on the theme it automatically saves. There is no "undo" button. When the editor is saving, you will notice a saving animation to the right of the section drop-down. Please wait till the saving animation has finished before moving onto a new section.

Dynamic Editing

As you edit your theme in various sections, your website will dynamically reflect these changes. In the preview area, navigate to the page that has the elements you're editing to see your changes take place dynamically.



Colors

Throughout the editor you can edit the Hex and Color value of various elements. You will see the preview of the color on the left and hex on the right. There are two ways to change the color value:


1. Click on the color box and select a color with the color picker

2. Input a valid hex value

Transparency

By selecting Transparent in the color picker, the color of the element will disappear and become see-through. This is useful and important to achieve certain looks, such as allowing the background or lower layers to been seen.



Images

Throughout the Editor, there will be areas where you can upload your own images.

Images are always placed on top of the colored area of the element.


Uploading Images

Click the green browse link and select the image from your hard drive and click "Ok" to upload.

Once the upload is successful you will see the file name of the image in green text

If you wish to replace the image with another, click the file name to start the upload process again.


PNG Format

We recommend most images you upload to be in the PNG format type. This will allow you to use alpha transparency and is the most flexible and lossless format available. For very large backgrounds JPG format type is most recommended.


Deleting Images

Click the bin icon and then confirm to remove an image.


Image settings

Some images may have extra settings such as:


Alignment (first drop down)

This allows you to position an image within the element area

Images can be positioned as:

Center

Top

Bottom

Left

Right

Top-Left

Top-Right

Bottom-Left

Bottom-Right


Repeat (second drop down)

This defines how an image will be repeated.

Repeat : Image will repeat both vertically and horizontally

Repeat-x : Image will repeat only horizontally

Repeat-y : Image will repeat only vertically

No-Repeat : Image will not repeat


Scroll / Static (Square icon on the right)

When the scroll icon is enabled (green), the image will scroll with the website.

When the scroll icon is disabled (grey), the image will be fixed and the website will scroll over it.



Sliding Images

Sliding images are special images you will need to create for areas in the theme editor such as for Container Headers and various other areas.


You must create the image this way:


The image size must be at least 1800 pixels wide in most cases unless defined otherwise. Sliding Images work by equally displaying the left and right sides of the image. Because the image can vary in width, for example, on a liquid layout, both left and right sides of the image will equally show, which is why it's important for the image to be very wide so it can stretch to wide monitors such as 24 inch ones.


If using a fixed layout, you may make the images 1100 pixels wide instead.


Generally you would create the wide image in photoshop placing unique graphical elements on the left and right side and a more repeating element in the middle.



Anatomy of an Enjin Website

Your website page is made up of 4 nested items.

Areas

3 main areas : Top, middle and bottom, all of which sit on top of the page background and website background.

Columns

Areas are divided into columns. The top and bottom area can only have 1 column, the middle can have 1, 2, or 3 columns. Each column can have many containers placed inside.

Containers

Containers are added to columns.
Each container can be then be filled with 1 module, or a grid of up to 8x4 modules.

Modules

Modules are content and applications such as news, shout-box, gallery, forums etc.. which are placed inside containers.



Editor Section Guides


Website Background

The website background is the most distant layer of your website.

A website background can be a solid color, or combined with up to 3 images. By using background images you can create various unique designs.


Background image 1 is the most distant image, while image 2 and 3 stack closer.


By using 3 images with layering and tiling and enabling scroll for some and not others, you can achieve some dramatic results.


Solid color

At it's most basic you can have a solid colored background. Click the color box to change it.

You also can also mix solid colors with images. For example, align an image to "top" and set the background color to match the color of the bottom of the image.


Large background image

This is generally done with a large wide image consisting of illustration, textures or designs. The website page sits on top the illustrated background. Commonly the image is aligned to "top" and fades at the bottom. Setting page background color to transparent in the page background section is recommended.


Tiled background

An easy way to make a good background is to use a repeat tiling image. We recommend using larger and seamless images to create a better effect. Commonly you would set the image to "top-left" and "repeat".


Background-Header (Advanced)

You can use a background image to act as the header of your website. To do this, create a large image with the details such as logo and header designs and set it as the background image. Set the image to "top" and "no-repeat". Then in the website spacer section, set the height of the gap at the top of the website page to reflect how much of the background-header you wish to show.



Page Background

The page background sits on top of the website background and does not expand towards the side. You can set the background to be a solid color or use a single image.


Transparent page background

By selecting transparent in the color box for page background, this will allow the website background to show through the gaps between containers. This is a useful technique in creating a floating website look.


Tiled page background

An easy way to make a good background is to use a repeat tiling image. We recommend using larger and seamless images to create a better effect. Commonly you would set the image to "top-left" and "repeat".



Website Sides

A website can have a left and a right side. Sides appear to the left and right respectively expanding from the edge of your page background. You can set the width in pixels using the slider, and set the color or an image for each side.


Depending on the design you are going for, you may wish to disable the website sides by selecting transparent for each side color which will let the website background show through.



Website Spacers

Please refer to The anatomy of an Enjin website  to better understand this section.

There are 9 specific spacing gaps on your website page. These gaps create distance between certain elements. Click on one of the green gaps on the image on the left to edit them.


Column Gaps

You have 2 types of column gaps:


1. Outer Border

This gap is the width of the page background starting from the outer column edges.

2. Inner Divider

This is the width of the gap between inner columns.


Container Gaps

There are 3 types of container gaps


1. Middle Spacer (Gap between containers)

These gaps are the distance in height between 2 containers that are in the same area.

2. Middle First Spacer (Gap above the first containers in the middle area)

These gaps are the distance in height between the first containers placed in the middle area.

3. Middle Last Spacer (Gap under the last containers in the middle area)

These gaps are the distance in height between the last containers placed in the middle area.


Area Gaps

There are 4 types of Area Gaps

1. Top First Spacer (Gap above the Top area)

This gap is the distance in height above the Top area.

2. Top Last Spacer (Gap between the Top and Middle area)

This gap is the distance in height between the Top and Middle area.

3. Bottom First Spacer (Gap between the Middle and Bottom area)

This gap is the distance in height between the Middle and Bottom area.

4. Bottom Last Spacer (Gap below the Bottom Area)

This gap is the distance in height below the Bottom area.


Generally it's best to keep all the spacers equal in distance and in the region of 5 -20 pixels.


Spacer Images

Container gaps and area gaps can also feature a spacer image. This is used to create effects such as chains connecting a container to another. The image will appear in the gap area and it's position can be defined with margin controls (Top Margin & Bottom Marging) and can overlap container images.The spacer images use sliding images.




Website Footer


The footer always appears as the last element on your website page.

At it's basic form you can define the footer background color and the footer height.

You can also control the position of the footer text and html with left, center and right position and further define it's position using offset x and offset y.


Footer background images

You can upload a footer background image and control the alignment and tiling options.


Good use of footers

By combining the footer html text and the settings of the Website footer, you can create informative and useful footers.


It's good practice to include contact details and brief information about the site and important links such as copyright information and terms of service.



Containers

The anatomy of a container

A container is made up of 4 distinct items:


1. Container Header

2. Container Edges

3. Container Footer

4. Container Base


Styling the 4 elements of a container is a very important part that defines the theme of your website as it is the outer shell that holds your modules and content.


You can make simple or highly decorative containers which will greatly impact the way your website looks.


By removing all 4 items of styling of a container you'd be left with invisible shells that holds the content of your website (Modules).


Tip: Containers can also have the Container Header or Footer on or off in the Layout Editor.

How to design a container

We recommend that you design the entire container in photoshop or favorite imaging first.

It's important to understand that the container header, the edges ,and footer connect to each other and should be designed to be seamless.


Once you have finished the design, you can then cut up the individual elements required to create the container.



Container Header

Container headers are the top titles of each container and usually feature the most decorative elements of the website. By default they appear but can be turned off in the layout editor.

At it's basic form, you can edit the height, background color, title font settings and the precise position of the title by changing the left, right, and top margins.


Container Header background image

The container Header background image uses a sliding Image

We recommend keeping container headers relatively short in height in the range of 20-50 pixels. If you're using a container header image, make sure the height is set to the same height your image is.


Alternate (First) Container Header Image

Sometimes you may want the first container in columns to have it's own separate header image.This allows you to set a different image for the other regular containers that aren't the first container in the column. The alternate Container features it's own title margin settings.



Container Edges

There are 4 container edges: Top, Left, Right, Bottom

There are also 2 alternate container edges: Top alternate and Bottom Alternate

 

For each edge you can define a color, height for top and bottom edges, and width for left and right edges.


Container Edge Images

Each edge can also have an image defined.

For left and right edges, the image will repeat on the y axis. (repeat-y)

The top and bottom edge image uses a sliding image

Alternate top edge is for first containers and alternate bottom edge is for last container.


Edge Corners

When you design the top and bottom edges, all 4 corners will be in those edges.

The left and right edges are sandwiched in between the top and bottom edges. When you design the four edges, make sure the the left and right edges seamlessly connect to the top and bottom edges.


When you turn the container header or footer title off in the layout editor, the top and bottom edges are shown. In essence they act as simplified versions of container header and footer.

So container edges are basically the border that surrounds the content and modules.


TIP: We recommend keeping Container edges thin in the region of 1-8 pixels



Container Footer

Container footers are at the bottom of each container and usually feature footer text that is linked. By default they appear but can be turned off in the layout editor.

At it's basic form, you can edit the height, background color, footer text font settings and the precise position of the footer text by changing the left, right, and top margins.


Container footer background image

The container footer background image uses a sliding image.

We recommend keeping container footer relatively short in height in the range of 15-25 pixels. If you're using a container footer image, make sure the height is set to the same height your image is.


Secondary image

The secondary image is used when you want to layer another image ontop of the footer image. The secondary image is special in that the footer text position is related to the secondary image's position, thus, footer text margins are used to control the position of the secondary image relative to the footer text.


Alternate (Last) Container footer Image

Sometimes you may want the last container in columns to have it's own separate footer image.

This allows you to set a different image for the other regular containers that aren't the last container in the column.



Container Base

The region within the edges of the container is the Container Base.


Container Background

At it's basic form, you can edit container background color or have a background image with position and repeat settings.


Modules are placed ontop of Container backgrounds so Container Background is rarely seen, but can be seen when there is a grid of modules in a single container. It is the space that is shown when the height of 2 modules side by side are not equal.


Module dividers

These are two 1 pixel thick lines that divide modules between each other. You can set the color of each line.


We recommend setting 1 line to transparent, and the other something subtle that works with the color of the module or container background.


Module Background

At it's basic form, you can edit module background color or have a background image with position and repeat settings.We usually advise against using images here, but if you do, it should be a subtle texture as text will be placed on it.


This background is used predominately across many modules and is important to get right. This also is a major contributor to the dark or light feel of your website. Depending on the color of the module background, you must pay special attention to the text color that will be placed on-top of this color.


Note: We advise you select good contrasting colors for easy readability and stick to subdued or grey hues.


Alternate Module Background

This has the exact same settings as module background and is mainly used to emphasize certain content.


We highly suggest that you set this color slightly darker or lighter than the module background color. And if you're using an image, it also applies.



Fonts

This is a great way to give your site a quick unique look, by changing the global text and link colors. Always aim to create good contrast with your module backgrounds and font colors for good usability.


Font Style

Choose the type of font across your website. Arial is a good neutral font.


Font Size

Choose the general size of your text across your entire website. 12 px is a good default size.


Regular text color

This is the most common text item on your website and used in most modules. Try to aim for an easy to read color that is usually a grey hue.


Emphasis text color

This is mainly used for certain titles and others areas that emphasize the text. White or black are good colors for this, or something lighter or stronger than regular text.


Alternate text color

This is less common and is used to de-emphasise certain text items. We suggest that you make this a darker version of regular text.


Link color

Any links on your website will use this link color. Aim to use a color that will work well with your regular text and stand out, so user can quickly tell its a link.


Link Hover color

When a user hovers thr mouse over the link text, this is the color they will see. Aim to keep this a similar color to link color but lighter or darker instead.


Display name color:

This is a the link color for display names specifically, you can choose to keep this the same as your link color or complement it with another color.


Valid text color:

This is used to show a valid result or indicate some positive action. Aim to make this green or something similar.


Invalid text color:

This is used to show errors or a negative action. Aim to make this red or something similar.


Warning text color:

Used to show certain warning text for some modules. Aim to make this yellow or something similar.


TIP: Remember to pay special attention to the text colors and the background they will be placed on and choose colors that will be easy to read and complementary.



Input Boxes

Input Text color and size

This is the color and size that is used inside input boxes. Keep this color close to regular text color.


Input box styles

This is the box that is used for things like email input, password input, input for forum posts etc. You can define a border color and background color. Make sure the background color works with the input text color.


Padding Control

This allows you position where the text input will begin. Note: Padding Y will expand the regular input box in height.



Buttons

A variety of buttons are used throughout modules. There are 3 sizes:

1. Large

2. Medium

3. Small


At it's basic form you can define the border, background, text color and text hover for all 3.

If you'd like to create custom image buttons you will need to use a sliding image but can be around 500 pixels wide instead.

When creating custom button images, we recommend keeping all button styles the same and only varying the height to emphasize size.


1. Large Button

Keep this in the range of 25-50 pixels in height. The width will be automatically set


2. Medium Button

This is the most common button found on your website.

Keep this in the range of 20-35 pixels in height. The width will be automatically set


3. Small Button

Keep this in the range of 15-25 pixels in height. The width will be automatically set

You can set the left, right padding and y offset for each button. Aim to position your button text consistently across all 3 types of buttons.



Avatars

Here you will be defining the shell that holds the avatar images. A basic shell is made of 2 one-pixel borders: the outer border and inner border.

You can define the colors of each border.


TIP: It's a good idea to make the outer and inner border contrast each other.


Avatar Shell Image

The avatar will be placed on top of this image, the x and y padding controls how much of the image you see extending past the avatar. This is a sliding image but the height and width can be around 150 x 150 pixels.

Note: Some modules will use the simple avatar shell instead of the image shell even if you have uploaded one.



 Title Bars

There are 2 title bars:

1. Regular

2. Large


Title bars are used in many modules. Mostly used to group items or just indicate a title of some kind.


For both Regular and Large title bars you can define text color, background color and border color. You can also define the height, top and left margin of the title text position.


Regular Title bars

This is the most common title used in modules.

If you'd like to upload an image background, use a sliding image with a height range of 20-30 pixels.


Large Title bars

If you'd like to upload an image background, use a sliding image with a height range of 30-50 pixels.



Popups

Regular pop-ups are small boxes that pop-up for various confirmation functions such as when clicking delete. You can define background color and border colors. Aim to have pop-up boxes mimic your module background style, but with some slight contrast as they appear above your website.


Tiny pop-ups are currently used in the profile section for quote and avatar functions.



Progress Bars

This is a visual element used to indicate progress in bar form. For example, poll votes or paypal donation goal.


At it's basic form you can define the background color, bar color, border color, text color and bar height.


TIP: Make sure the text color is readable on both bar color and background color.


Progress Bar Images


You can define an image for the background and the bar.

The bar image will sit on-top of the bar background image.

Both images use a sliding image. Aim for a height range of 30-60 pixels for both images.



Icons

Your website uses various icons. You can upload your own icons here, please note to keep these icons within the size displayed on the right of each icon.


Misc Settings

BBcode

Define a light or dark version of the bbcode toolbar icons. If you website uses light text on a dark background then choose the dark version.


Special container spacing

Advanced use only. Keep this at 0, unless you are using spacer images and need to create extra gaps under the header and menu modules only.


System menu

This is the text menu that you see at the very top of your website with text such as home, account, login, register etc.


You can change the text color and the division line between each link. You can also change the mail icon here. We suggest keeping the mail icon small.




Module Guides


Module: Header

The header module is the shell around your website header.

At it's basic form you can define the background color, border color, and border width.


Header border image

This uses a sliding Image. Aim to make it 1600 wide x 800 height at minimum.


Padding

The header padding allows you to position how your header will sit within the shell. We advise that you set the padding to the minimum of your header border width or height.



Module: Content Box

The content box is used inside many modules and defines the box that holds content such as comments, forums, events, matches, etc...

The content box is used with the Table grid section to define major modules.


Top Title

At it's basic form you can define the background color, border, and height of the Top title. The Top title features 2 types of text, left title text and right title text.


Box background color (Box BG)

This is the background color inside the content box. Aim to keep this similar in color to your module background. You can see this background used in comments.


Left Title text,

Is usually large and serves to title the box, for example, the thread name when viewing the forum thread. You can define the size and left and top position of the left text. Keep the text large and centered vertically.


Right Title text

Is usually smaller and displays secondary data, such as "Add comment" in the comment box. You can define the size and right and top position of the right text. Keep this small and centered vertically.


Top title bar image

You can upload a sliding image for the top title. Set the height correctly and position the left and right text to fit nicely.


Edges

Left border image, defines the left edge of the content box and is a repeat-y tiling image.

Right border image, define the right edge of the content box and is a repeat-y tiling image.

Bottom cap image, this a sliding image for the bottom border of the content box and covers both left and right border images.


Content Margins

There are left, right, top, and bottom margin controls  that define the position of the content from the outer edges of the content box. You should usually set the top margin to 0 and the other margins relative to the size of your border thickness.



Module: Table Grid

The forum module is constructed with a table grid inside a content box. Other modules such as event list, matches list use this also. Edit the content box section with this section together.


Main elements to define are:


Table Label

This is the top label area for the various columns. For example the area in the forum list, where it shows, forum threads, replies, views and latest posts.You can define the height of this label area and its background color. The alternate background color is used to separate certain label sections, as seen in the "replies" and "views" columns.


You can also define a sliding image for the table label and alternate label area.


Table cell backgrounds

These are the backgrounds for the various cells in a table grid such as the background of posts in the forum thread. Keep these colors similar to your module backgrounds and slightly contrasting to each other.


Table cell Styles and Images

Each row and column in a table grid features cells. You can define cell images for both large and small cells or use cell background colors instead.


Small Cells are mainly used in the forum module to show listing of thread names, post and view counts.


Small alternate and small alternate 1, these images are specifically used for post and view count in the forum module thread list.


Large cells are used in the forum thread view module and other modules. These define the backgrounds of various parts of the table that are larger in size.


TIP: We usually advise against using images here, but if you do, it should be a subtle texture as lots of text will be placed on it.


Depending on the color of the cell backgrounds, you must pay special attention to the text color that will be placed ontop of this color.We advise you select good contrasting colors for easy readability and stick to subdued or grey hues.


Table Division lines

There are 2 main division lines, Vertical and Horizontal lines that define the rows and columns of a table grid.Each division line can be made up of two 1-pixel thick lines.


TIP: You can make 1 line transparent or use a dark and lighter line to create a bevel effect.



Module: Tab box

This defines elements that use a tab button navigated box . This is mainly used in user profiles and in some modules such as events.


You can define the outer and inner border of the box. The background color, and unselected tab color.


2 images can also be defined. The selected tab image and the box background image.


Note: The tab box is also used for the admin box for forum thread administration.


Division line

1 pixel thick line that divides certain elements inside a tab box.


Sub Tabs

Used on the account pages (website settings), these define the selected and unselected tab color.



Module: Vertical Menu

The vertical menu is constructed with separate button areas, each having a text link displayed on top. These buttons are stacked from top to bottom.


You can define a vertical menu button's background, color and hover, border and border hover.


You can also set the height of the button.


Text Margins

Position text precisely with the left, right and top margin.

The left margin is the distance between the left edge of the button and where the text link starts.

The right margin defines the space where the text is masked out from the right edge of the button.

The top margin allows you to position the text on the y axis.


Menu Images

You can define 2 images.

1. Button

2. Button hover


This is the image that appears when a user hovers the mouse cursor over the button.

Both images are separated by a 1 pixel thick border color. Both images use a sliding Image.


Note the font color and link is defined in the Font section


Outer Border
To be done soon.


Module: News

You can define the news bubble. The news bubble is a graphical way to show how many comments have been posted on a news article.


You can define the background and border color of the news bubble, alternatively you can upload an image.


You can also define the height and width of the bubble. If you're using an image, make sure to set the width and height correctly.


Ontop of the news bubble is the count and comments text. You can define the color, style, and size of these texts. To position the text, define the left, right, top, and common gap padding.


Post comment image


This image appears to the left of "post comment" text link under the news bubble. You can define the height, width and offset for this image.



Module: Mini Calendar

The mini calendar is made of:


Month bar

You can define a hex color background or an image background. This automatically repeats-x


Week bar

You can define a hex color background, text color or an image background. This automatically repeats-x


Normal days

Normal days are normal non-event days of the month. You can define a normal day image or background color. The image automatically repeats-x


Other days

Other days are the days from the previous or next month. Aim to make these very subdued.

You can define an image or background color. The image automatically repeats-x


Current day

This is the current day as per your website time zone settings. You can define the background color or an image background. The image automatically repeats-x.


Inner and Outer Borders

These border go around each day. You can define a hex color for each.


Event day

Any events will display with the event border and text. Aim to make the border and text contrast well so you can tell it apart from normal days.



Module: Forum Icons & Breadcrumb

Forums icons

Here you can upload your own custom forum Icons. Keep these smaller in size around 25x25 pixels.


Breadcrumb  bar & text

You can set the color background and height of the breadcrumb bar, or keep it transparent. You can also upload a bar image that will automatically set to repeat-x. This bar appears at the very top of your forum module and serves as the main navigation.


Using the top, left and right padding you can set the position of the breadcrumb text.




Module: Horizontal Menu


To be done soon.




Module: Widgets

To be done soon.