Site Skins: Difference between revisions

From PokéFarm Q Official Wiki
Jump to navigation Jump to search
m (Recode template.)
No edit summary
Line 1: Line 1:
{{Recode|Needs to be updated in general.}}
{{Recode|Needs to be updated in general.}}


[[File:Default Skin.png|200px|thumb|right|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. To do this, the Skin Editor has to be accessed. It is on the [[Farm]] in the [[Tools/Options]] tab. The Skin Editor has six tabs. With File it is possible to view, edit and create a Skin. The other five tabs are necessary to edit the appearance of the Skin.  
[[File:Default Skin.png|200px|thumb|right|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. To do this, the Skin Editor has to be accessed. It is on the [[Farm]] in the [[Other Links]] tab. The Skin Editor has five tabs. You are first redirected to the '''Site Skins''' page, but you 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.


__toc__
__toc__
== File ==  
== Skin Metadata ==  
[[File:Skin Editor.png|200px|thumb|right|The File tab in the Skin Editor.]]
[[File:SkinEditor.jpg|200px|thumb|right|The Metadata tab in the Skin Editor.]]
File provides options to change the active Skin, open a Skin to edit it or to create a new Skin. To change the current Skin click on ''Change my active Skin'', a popup will appear to give the user the possibility to either chose an official Skin or to load a Skin by its address. When choosing an official Skin the address bar has to stay empty. To access a Skin created by another User the address of this Skin has to be known and the Skin's permission has to be set on anything besides private, then it is possible to load the Skin by entering the address.
The skin metadata allows you to change the name and description of the skin you are working on. This will also change the file directory, and therefore, if your skin is used by many people, you shouldn't change this around too much.
 
To edit an existing Skin either select the Skin from the list of the user's Skins or, if it does not belong to the user, click in ''Load a Skin by address'' and enter the Skin address, in that case the Skin's permission must be at least Open for this to work.
 
To create a new Skin or to save an edited Skin as a new Skin enter a name and start editing. After changing the appearance of the Skin simply click on Save Skin. The Skin will be saved but will not show up in the My Skins-list right away. Simply reload the page to see it and to be able to set it as an active Skin. To share the Skin the permission has to be changed to anything else than private and the address can be shared. Right now it is not possible to delete a Skin or to change its name, so chose wisely.


== Main Colours ==
== Main Colours ==
The main colours decide 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.  
The main colours decide 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.  
* '''Content:''' Background 1 is used on the main area while Background 2 is usually used in tabs, hide and display boxes and other areas. Therefore it is important that the text colour can be seen on both background colours. BG 2 Alpha is how opaque Background 2 is, while 100% is completely opaque and 0% makes Background 2 transparent.
* '''Background Image:''' The background image is displayed behind content on the site, and should usually go along with the colours. You should try to use images that you have permission for if you are going to distribute the skin, but otherwise, use any image that fits as a background.
* '''Heading/NavBar:''' These colours influence the [[NavBar]] and the heading of tabs, hide and display boxes, the heading of posts in the [[Public Forums]] and some big Buttons like the ones in the [[Shelter]]. Hover is what colour the background of the button in the NavBar or others change to, when hovering over them. The Text colour will only be used on the Background of the Heading/NavBar, not on the background colour of the Content.  
* '''Global Background:''' This colour influences tooltips and forum posts content. As you can see on the preview, it shouldn't clash with the main background color, and it shouldn't be hard to see any text.
* '''Buttons:''' This part is for the smaller buttons like the ones to navigate on the Farm or on top of the Party on the [[User Page]]. This colour is also used when feeding a Pokémon for the berries that it is neutral to, this means that it should be clearly distinguishable from the berries a Pokémon likes and dislikes. The Berry colour can be adjusted in the Secondary Colours tab. Buttons work the same as the Heading/NavBar.
* '''Content Background:''' This part is the main colour on the site. It will be the body of display boxes, the background of your Pokémon, above and below the [[NavBar]], the color of progress bars, and the content colour of your tasks. It is also the border around forum posts, and the body colour of many other places which you can access from the NavBar or the [[Other Links]].  
* '''Main area:''' This part is equivalent to the Background 1 on Content. It is possible to either chose Background 1 or to use an image instead. If the picture has transparency or does not cover the whole Main area then Background 1 is used to fill these places. In the URL field belongs the URL of the image, it has to be a direct link so the URL need to end with the file format. With Repeat the Main area can be filled with the image, even if it's smaller than necessary. Repeat X repeats the image from left to right, Repeat Y from top to bottom. Repeat both fills the whole Main area with the image. The Position is where the image should be located and Attachment decides whether the image is fixed on its place or does it move downwards while scrolling through the page. To delete the image from the Skin simply select ''Solid (Content Background 1)''.
* '''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 will just be the main text colour in general. Make sure it doesn't clash with the content background.
[[File:Buttons and Party.png|200px|thumb|right|The Party text and the Buttons while hovering over "Other Pokémon". The Pokémon dislikes the first berry (Sour) and likes the last (Bitter). It is neutral to the other berries.]]
* '''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 color of links, and typically Pokémon names. All links on the site will have this color. You may just want to make the link color the sme as the text color.
* '''Visited Link:''' This part is the colour of a link that you have already clicked. It should be different from the usual link color.
* '''Active Link:''' This is a link that you are a hovering over. The colour can be drastically different, as you can only see it when hovering over it.
[[File:Berry.jpg|200px|thumb|right|The colour of the berries that a Pokémon prefers. In this case, this one prefers the berry highlighted in green (sweet) and dislikes the one highlighted in red (bitter).]]


== Secondary Colours ==
== User Link Colours ==
The Secondary Colours affect the smaller parts of the site. Still, when changing the Main Colours dramatically the Secondary Colours also need adjustment.
The User Link Colours affect the names of users. Depending on their rank, each type of user will have a certain color. Automating visited user colors simply makes the 'visited' user colour lighter.
* '''Links:''' This colours affect the links at the top of the page, the thread links in the Public Forums and the links user posts. That means that links appear on Background 1 and Background 2 from the Main Colours and it is advised to make them readable on both colours. Visited Links are links that lead to a page which was already visited by the user. The Active colour is what the link looks like, when it gets clicked. An exception from the Link colours are the User links that are customized in the next tab.
* '''Normal User:''' The default user. This colour is used for a majority of of users.
* '''Party text:''' The information of the Pokémon in the [[Party]] are displayed in this colour.
* '''Staff:''' There are multiple colours for certain members of staff, ranging from the Graphics Team to Administrators. Once again, the automated 'visitor' user colour will simply be lighter.
* '''Table border:''' This affects tables made by user, the Public Forums and the thin border of the site itself.
[[File:usercolor.jpg|200px|thumb|right|The default user colors..]]
* '''Inactive Slider tab:''' This tabs appear on sites where [[Account Upgrades]] can be obtained. The Upgrades that are not obtained yet are the inactive ones and their page gets marked with this colour.
* '''Popups:''' The Background changes the background of the popup and the text colour will be used on this. Because of this it is advised to make the text colour readable on the background colour.
* '''Nature:''' This colour will be used on the [[Summary Page]] of a Pokémon. In the advanced tab the flavour that the Pokémon likes and dislikes is in the selected colour for the nature Up and Down.
[[File:Inactive Slider tab.png|200px|thumb|right|The Shelter upgrades with "Flute" as an Inactive Slider tab, as the Account Upgrade is not active. The only active upgrade is the first tab with the Shelter Passes.]]
* '''Berry:''' This colour is used when feeding a Pokémon. The berry that it likes or dislikes will have the colour selected here as its background. When sharing a Skin with others it is recommended to tell them the colour of the berry the Pokémon likes.
* '''Disabled:''' Something is disabled because it cannot be accessed at this moment or because the page is currently loading and clicking a link or a button is not possible yet. This text colour will be used on the Disabled Background but also on other background colours, to still make it readable a shadow is applied.
* '''Textboxes:''' The appearance of the textboxes can be either changed with the skin or be left to the browsers default settings.


== User Link Colours ==
== Extra Colours ==
These colours change the colour of the names of User and [[Staff]]. The colours will appear on Background 1 and Background 2 from the Main Colours, so it is advised to make them readable on both colours. It is not necessary to make a different colour for Normal and Visited, this is completely up to preference.
* '''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 color in the NavBar.
* '''Border (content):''' The color surrounding all the content, the forum posts, the display boxes, etc.
* '''Flavour liked:''' The color which will highlight the berry that a Pokémon prefers. Typically a shade of green.
* '''Flavour disliked:''' The color which will highlight the berry that a Pokémon dislikes. Typically a shade of red.


== Banner ==
== Preview ==
The Banner appears between the NavBar and the user information on top of the page. To fit perfectly, the image should be 915px wide and 128px tall. If it does not fit or has transparent parts then the Background colour will fill it. In case it is smaller or bigger than this measurements then it will be resized. The background colour can be either selected or generated automatically.
* '''Preview:''' A preview of what your skin will look like. Once you've finished editing your colors, go to skin metadata and save. You can get the directory of the skin by seeing its name - eg. "4PB/theme"


== Customise Buttons ==
Here the buttons used in the Public Forums, the User Page, the [[Personal Messages]], the Timeline of the Summary Page and other places can be changed. The Help button is 32x32 pixels tall and appears as a circle on pages where it is used. The other buttons are 16x16 pixels. If the image used is too big then only the left upper corner will be used.
[[Category:Pages]]
[[Category:Pages]]

Revision as of 13:34, 20 October 2016

Template:Recode

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. To do this, the Skin Editor has to be accessed. It is on the Farm in the Other Links tab. The Skin Editor has five tabs. You are first redirected to the Site Skins page, but you 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

File:SkinEditor.jpg
The Metadata tab in the Skin Editor.

The skin metadata allows you to change the name and description of the skin you are working on. This will also change the file directory, and therefore, if your skin is used by many people, you shouldn't change this around too much.

Main Colours

The main colours decide 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. You should try to use images that you have permission for if you 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. As you can see on the preview, it shouldn't clash with the main background color, and it shouldn't be hard to see any text.
  • Content Background: This part is the main colour on the site. It will be the body of display boxes, the background of your Pokémon, above and below the NavBar, the color of progress bars, and the content colour of your tasks. It is also the border around forum posts, and the body colour of many other places which you can access 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 will just be the main text colour in general. Make sure it doesn't clash with the content background.
  • 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 color of links, and typically Pokémon names. All links on the site will have this color. You may just want to make the link color the sme as the text color.
  • Visited Link: This part is the colour of a link that you have already clicked. It should be different from the usual link color.
  • Active Link: This is a link that you are a hovering over. The colour can be drastically different, as you can only see it when hovering over it.
File:Berry.jpg
The colour of the berries that a Pokémon prefers. In this case, this one prefers the berry highlighted in green (sweet) and dislikes the one highlighted in red (bitter).

User Link Colours

The User Link Colours affect the names of users. Depending on their rank, each type of user will have a certain color. Automating visited user colors 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 'visitor' user colour will simply be lighter.
File:Usercolor.jpg
The default user colors..

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 color in the NavBar.
  • Border (content): The color surrounding all the content, the forum posts, the display boxes, etc.
  • Flavour liked: The color which will highlight the berry that a Pokémon prefers. Typically a shade of green.
  • Flavour disliked: The color which will highlight the berry that a Pokémon dislikes. Typically a shade of red.

Preview

  • Preview: A preview of what your skin will look like. Once you've finished editing your colors, go to skin metadata and save. You can get the directory of the skin by seeing its name - eg. "4PB/theme"
Retrieved from ‘https://pokefarm.wiki/index.php?title=Site_Skins&oldid=15157’