Site Skins

From PokéFarm Q Official Wiki
Jump to: navigation, search
The default Skin of PokéFarm Q
A Site Skin changes the appearance of the site. It is possible to choose the default Skin, use an official Skin, create a Skin or use a Skin another User made. In order to create a new Skin, the Skin Editor has to be accessed. It is on the Farm in the Other Links tab. The Skin Editor has five tabs. The user is first redirected to the Site Skins page, but they can click the bottom link to view, edit and create a Skin. The first tab is used to name the skin, while the other four are used for editing.

Skin Metadata

The Metadata tab in the Skin Editor.

The Skin Metadata allows the user to change the name and description of the skin that they are working on.

Note: Once the Skin is saved, the name cannot be changed.

Main Colours

The Main Colours depict the basic outline of the site. To change to colour of something either enter the Hex values into the text field or select a colour by clicking on the colour picker.

  • Background Image: The background image is displayed behind content on the site, and should usually go along with the colours. The user should try to use images that they have permission for if they are going to distribute the skin, but otherwise, use any image that fits as a background.
  • Global Background: This colour influences tooltips and forum posts content. With a preview below, the user can see if it clashes with any other colours.
  • Content Background: This part is the main colour on the site. It will be the body of display boxes, the background of any users' Pokémon, above and below the NavBar, the colour of progress bars, and the content colour of tasks. It is also the border around forum posts, and the body colour of many other places which can be accessed from the NavBar or the Other Links.
  • Text: This colour is the colour of the main text that will be against the colour of the content background. It will also be used for server time, titles and is the main text colour in general. Once again, as there is a preview, it should not be too hard for a user to decide which colours go well together.
  • Title Background: This is the background of the top of the dropdown/display tabs, as well as the colour of the tabs of the NavBar.
  • Title Text: This is the colour of the text in the top of the drop-down/display tabs, and the text of the tabs of the NavBar. It should typically be lighter if the title background is darker, and lighter vice versa.
  • Link: This will be colour of links, and typically Pokémon names. All links on the site will have this colour. It is, however, acceptable to leave this the same colour as the main text.
  • Visited Link: This part is the colour of a link that has already been clicked. It should be different from the usual link colour, as an indicator.
  • Active Link: This is a link that is being hovered over. The colour can be drastically different, as it is only seen when hovering over it.
The colour of the berries that a Pokémon prefers. In this case, this one prefers the berry highlighted in green (dry) and dislikes the one highlighted in red (spicy).

User Link Colours

The User Link Colours affect the names of users. Depending on their rank, each type of user will have a certain colour. Automating visited user colours simply makes the 'visited' user colour lighter.

  • Normal User: The default user. This colour is used for a majority of of users.
  • Staff: There are multiple colours for certain members of staff, ranging from the Graphics Team to Administrators. Once again, the automated 'visited' user colour will simply be lighter.
The default user colours..

Extra Colours

  • Border (global): The colour that's beneath the NavBar and is used around the site,
  • Border (title): The colour used for the border around the title background, also the secondary colour in the NavBar.
  • Border (content): The colour surrounding all the content, the forum posts, the display boxes, etc.
  • Flavour liked: The colour which will highlight the berry that a Pokémon prefers. Typically a shade of green.
  • Flavour disliked: The colour which will highlight the berry that a Pokémon dislikes. Typically a shade of red.

Extra CSS

The Extra CSS tab is an area in which a user, that has knowledge of CSS and Developer Tools, can add any extra CSS that they would to add to the skin.

Note: The Preview is unable to show the results of this extra CSS area.


  • Preview: A preview of what the skin will look like. Once the skin is satisfactory, the user should click on the skin metadata tab and save. They can get the directory of the skin by seeing its name - eg. "4PB/theme"