{"__v":2,"_id":"56c7a7d5f9aa3b0d00c8457b","category":{"__v":34,"_id":"555627c5ea5e120d001884ff","pages":["555627c6ea5e120d00188501","55562fbdea5e120d00188526","5556368b150ba30d00f4e0b7","5556590e26e9bc0d0044eb61","55567be0150ba30d00f4e248","55567bf026e9bc0d0044ec55","55567c08150ba30d00f4e24a","55567c14150ba30d00f4e24c","55567c4426e9bc0d0044ec59","55567c501026001900d72abc","55567c5926e9bc0d0044ec5d","55567c9a1026001900d72abf","55567cd9150ba30d00f4e24f","55567ce4150ba30d00f4e251","55567ced26e9bc0d0044ec61","555698d62f6b480d0034d9a4","55e0c386dc6b2e170074f2e3","55e0c5e15087cb1900986c16","55e0f99926f51b0d009b1744","567b35067c40060d0056041d","567b3531ee052b1700dbd9da","56846a5a65976e0d00001c57","5684783bc11c7e0d00aaff71","56847cb55a66610d006eabbd","56848a0cf72e9e0d00e098e5","568ccdf38602880d001ce230","569431fcd8c04d1700e5ae05","569ebe1ad233620d007055fb","569edd718f6d4b0d00f13b91","56aa5c3d13a69a0d00a77a09","56aa6eda4d38401900199f7a","56c7a7d5f9aa3b0d00c8457b","56d0ab1440d36e1d00bc143b","56ec9c5a493ce620008ea4c8"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T17:07:17.512Z","from_sync":false,"order":0,"slug":"design","title":"Design Studio"},"project":"555627c4ea5e120d001884fb","user":"55d7b65b9510f00d007ec6e7","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2016-02-19T23:40:05.193Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":14,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Overview\"\n}\n[/block]\nStyle Inheritance enables you to point to a CSS file from a Flite ad. The Flite ad can then inherit the font and style elements within the CSS file. Style Inheritance provides a native advantage, enabling your ad to conform to it's environment. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advantages\"\n}\n[/block]\n1) Ad will conform to it's environment. \n\n2) Publishers can use their purchased fonts within a Flite ad unit. \n\n3) Change the font in a referenced CSS file and all units pointing to the CSS will reflect those changes. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/Day2A3ZFRnKnFMqiB5aD\",\n        \"style_1.gif\",\n        \"750\",\n        \"256\",\n        \"#945b58\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Ad Info Global Setting\"\n}\n[/block]\nIn the Ad Info dialog, you'll see an option to Include External CSS.  Enter the path to your CSS file that the Flite ad will inherit. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/xct0EHc7SNu22rx0WOIc\",\n        \"style_2.png\",\n        \"309\",\n        \"379\",\n        \"#74a9d0\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Text Component Styling Option\"\n}\n[/block]\nIn the Text Component, there is a new option to remove the default styling that Flite provides. Once checked, you'll have a blank Text Component where you can then write in the same CSS selectors that is being referenced in the CSS file, which can be ID's, classes or elements.  \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://www.filepicker.io/api/file/mUCW2R06Sg1AWwdkSOga\",\n        \"style3.gif\",\n        \"296\",\n        \"313\",\n        \"#b2845f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Notes\"\n}\n[/block]\n1) A Flite FIF file needs to be mapped in the Flite database. If you do not have a FIF file, please contact support:::at:::flite.com who will assist with the setup. \n\n2) The ad inheriting a CSS file must live in the same environment as the referenced file. For example, the example GIF above lives on Flite.com/demo which is also where the CSS file being referenced resides.","excerpt":"","slug":"design-studio-style-inheritance-css","type":"basic","title":"Style Inheritance (CSS)"}

Style Inheritance (CSS)


[block:api-header] { "type": "basic", "title": "Overview" } [/block] Style Inheritance enables you to point to a CSS file from a Flite ad. The Flite ad can then inherit the font and style elements within the CSS file. Style Inheritance provides a native advantage, enabling your ad to conform to it's environment. [block:api-header] { "type": "basic", "title": "Advantages" } [/block] 1) Ad will conform to it's environment. 2) Publishers can use their purchased fonts within a Flite ad unit. 3) Change the font in a referenced CSS file and all units pointing to the CSS will reflect those changes. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/Day2A3ZFRnKnFMqiB5aD", "style_1.gif", "750", "256", "#945b58", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Ad Info Global Setting" } [/block] In the Ad Info dialog, you'll see an option to Include External CSS. Enter the path to your CSS file that the Flite ad will inherit. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/xct0EHc7SNu22rx0WOIc", "style_2.png", "309", "379", "#74a9d0", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Text Component Styling Option" } [/block] In the Text Component, there is a new option to remove the default styling that Flite provides. Once checked, you'll have a blank Text Component where you can then write in the same CSS selectors that is being referenced in the CSS file, which can be ID's, classes or elements. [block:image] { "images": [ { "image": [ "https://www.filepicker.io/api/file/mUCW2R06Sg1AWwdkSOga", "style3.gif", "296", "313", "#b2845f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Notes" } [/block] 1) A Flite FIF file needs to be mapped in the Flite database. If you do not have a FIF file, please contact support@flite.com who will assist with the setup. 2) The ad inheriting a CSS file must live in the same environment as the referenced file. For example, the example GIF above lives on Flite.com/demo which is also where the CSS file being referenced resides.