Site Skins: Difference between revisions

From PokéFarm Q Official Wiki
Jump to navigation Jump to search
m (You)
No edit summary
 
(18 intermediate revisions by 12 users not shown)
Line 1: Line 1:
[[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. 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.


'''Things to remember:'''
*There is currently no way to delete User made Site Skins.
*Once the Skin is saved, the name cannot be changed.
*After any changes are done to the Skin the user must clear their cache for the changes to come into effect.
**On a computer, use Ctrl+F5.
**On a mobile, google "Clear cache on (browser) (android/iphone)" and follow the directions.
__toc__
__toc__
== File ==  
== Skin Metadata ==  
[[File:Skin Editor.png|200px|thumb|right|The File tab in the Skin Editor.]]
[[File:SkinEditor.png|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 the user to change the name and description of the skin that they are working on.
 
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 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.  
* '''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. 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.
* '''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. With a preview below, the user can see if it clashes with any other colours.
* '''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 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]].  
* '''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 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.
[[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 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.
== User Link Colours ==
[[File:Usercolor.png|200px|thumb|right|The default user 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.


== Secondary Colours ==
== Extra Colours ==
The Secondary Colours affect the smaller parts of the site. Still, when changing the Main Colours dramatically the Secondary Colours also need adjustment.
[[File:All_berries.PNG|200px|thumb|right|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).]]
* '''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.
* '''Border (global):''' The colour that's beneath the NavBar and is used around the site,
* '''Party text:''' The information of the Pokémon in the [[Party]] are displayed in this colour.
* '''Border (title):''' The colour used for the border around the title background, also the secondary colour in the NavBar.
* '''Table border:''' This affects tables made by user, the Public Forums and the thin border of the site itself.
* '''Border (content):''' The colour surrounding all the content, the forum posts, the display boxes, etc.
* '''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.
* '''Flavour liked:''' The colour which will highlight the berry that a Pokémon prefers. Typically a shade of green.
* '''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.
* '''Flavour disliked:''' The colour which will highlight the berry that a Pokémon dislikes. Typically a shade of red.
* '''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.
== Extra CSS ==
[[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.]]
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.
* '''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.
{{Note|The Preview is unable to show the results of this extra CSS area.}}
* '''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.  
If users do not want to see the messages about the Egg Timer or the This is Your Profile they may add <code>#eggtimeinfo {display:none}</code> or <code>#thisisyourprofile {display:none}</code> to their skin.
* '''Textboxes:''' The appearance of the textboxes can be either changed with the skin or be left to the browsers default settings.  
 
== User Link 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.


== 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 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"


== Customise Buttons ==
[[Category:Pages]][[Category:Game Mechanics]]
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.

Latest revision as of 03:37, 15 March 2023

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.

Things to remember:

  • There is currently no way to delete User made Site Skins.
  • Once the Skin is saved, the name cannot be changed.
  • After any changes are done to the Skin the user must clear their cache for the changes to come into effect.
    • On a computer, use Ctrl+F5.
    • On a mobile, google "Clear cache on (browser) (android/iphone)" and follow the directions.

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.

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.

User Link Colours

The default user 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.

Extra Colours

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).
  • 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.

If users do not want to see the messages about the Egg Timer or the This is Your Profile they may add #eggtimeinfo {display:none} or #thisisyourprofile {display:none} to their skin.

Preview

  • 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"
Retrieved from ‘https://pokefarm.wiki/index.php?title=Site_Skins&oldid=87782’