help-with-coding: Meta Tags:Meta tags are what allow people to customise their themes in the appea

help-with-coding: Meta Tags: Meta tags are what allow people to customise their themes in the appearance panel (without having to edit the html). There are 6 different kinds of meta tags: Colours, Fonts, Images, Text, Drop-down lists and Booleans (these are the things that you can toggle on and off). Meta Tags get put in head of the html document. Most people usually put them at the very top, above . Meta tags are written like this: The content part will be the theme default. You can have as many meta tags as you want in your theme. Colours: The most important thing to note about using colours in html is that it has to be spelt the American way (color). An example of the colour meta tag: This will come out looking like this: Notice that I have set the default colour to white. Whenever you want to use this in your code you need to use this: {color:Background} Contextual example: body {background-color: {color:Background}} Example 2: When you want to use this in your code you will use this: {color:Body Text} See how the space is included. It is very important that you include any spaces or it won’t work. This applies to ALL meta tags except the boolean, which we will go into detail about later. Fonts: The font meta tag allows the user to select from the same list of fonts that you can select for the mobile version of your blog. An example of the font meta tag: This will come out looking like this: Whenever you want to use this in your code you need to use this: {font:Body} Contextual example: body {font-family: {font:Body}} Images: These are the meta tags that allow users to upload their own sidebar image, background image etc. An example of the image meta tag: Notice how the content has been left blank? This will come out looking like this: If you want a default background already loaded you would need to add something in the content. This has to be a direct URL to the image. You can ue tumblr's static file uploader if you need somewhere to host it. An example with content: This is what it looks like with content: Whenever you want to use this in your code you need to use this: {image:Background} Contextual example: body {background-image: {image:Background}} Text: These are the meta tags that allows users to add there own text. These are most commonly used for custom links. An example of the text meta tag: The content for text meta tags usually gets left blank. This will come out looking like this: Whenever you want to use this in your code you need to use this: {text:URL 1} Contextual example: {Text:Link 1} Drop-down Lists These meta tags allow users to switch between a set of options. Here is an example of the drop-down meta tag: The above example allows the user to select what kind of border they would like. The first option listed will be what automatically is selected. With drop-down lists, the title is what the name of the option is and the content is what will show up when you use it. Often these are the same. This example will come out looking like this: Whenever you want to use this in your code you need to use this: {select:Border} Contextual example: .posts {border: 1px {select:Border} black} Booleans: Booleans give the user the ability to switch something on and off. Booleans work like blocks. Here is an example of the boolean/if meta tag: With booleans, the content can be either 0 or 1. 0 = false/off and 1 = true/on. This will end up looking like this: Whenever you want to use this in your code you need to use this block: {block:IfTiledBackground} {/block:IfTiledBackground} Booleans also provide blocks for if the boolean is turned off. So in regards of this example, we would need an option to make the background cover if it is turned off. This is what you will need to use this block: {block:IfNotTiledBackground} {/block:IfNotTiledBackground} Important: With booleans do NOT use spaces in the blocks Contextual example: body {background: {color:Background} url(’{image:Background}’){block:IfNotTiledBackground}no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; {/block:IfNotTiledBackground} {block:IfTiledBackground} repeat; background-attachment:fixed; {/block:IfTiledBackground}} The above example implements both the on and off versions of the block. -- source link
Tumblr Blog : help-with-coding.tumblr.com

More pics about