[{"data":1,"prerenderedAt":512},["ShallowReactive",2],{"navigation":3,"/additional/stylization":115,"/additional/stylization-surround":507},[4,18,32,52,67,90,95,100,105,110],{"title":5,"path":6,"stem":7,"children":8,"icon":17},"Getting Started","/getting-started","1.getting-started/1.index",[9,12],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Overview","/getting-started/overview","1.getting-started/2.overview","i-lucide-eye",false,{"title":19,"path":20,"stem":21,"children":22,"page":17},"Develop","/develop","2.develop",[23,28],{"title":24,"path":25,"stem":26,"icon":27},"After Effects","/develop/develop-ae","2.develop/develop-ae","i-lucide:blocks",{"title":29,"path":30,"stem":31,"icon":27},"Premiere Pro","/develop/develop-pr","2.develop/develop-pr",{"title":33,"path":34,"stem":35,"children":36,"page":17},"Essentials","/essentials","3.essentials",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"Package Options","/essentials/package-options","3.essentials/1.package-options","i-lucide-cog",{"title":43,"path":44,"stem":45,"icon":46},"Group Options","/essentials/group-options","3.essentials/2.group-options","i-lucide-folder-cog",{"title":48,"path":49,"stem":50,"icon":51},"Element Options","/essentials/element-options","3.essentials/3.element-options","i-lucide-square-dashed-mouse-pointer",{"title":53,"path":54,"stem":55,"children":56,"page":17},"Additional","/additional","4.additional",[57,62],{"title":58,"path":59,"stem":60,"icon":61},"Customizer","/additional/customizer","4.additional/1.customizer","i-lucide-sliders-vertical",{"title":63,"path":64,"stem":65,"icon":66},"Stylization","/additional/stylization","4.additional/2.stylization","i-lucide-paint-roller",{"title":68,"path":69,"stem":70,"children":71,"page":17},"Verification Сodes","/verification-codes","5.verification-codes",[72,77,82,86],{"title":73,"path":74,"stem":75,"icon":76},"About Verification","/verification-codes/about","5.verification-codes/1.about","i-lucide-shield-check",{"title":78,"path":79,"stem":80,"icon":81},"VideoHive Integration","/verification-codes/vh","5.verification-codes/2.vh","i-lucide-message-circle-code",{"title":83,"path":84,"stem":85,"icon":81},"Gumroad Integration","/verification-codes/gumroad","5.verification-codes/3.gumroad",{"title":87,"path":88,"stem":89,"icon":81},"WordPress + WooCommerce Integration","/verification-codes/wordpress-woocommerce","5.verification-codes/4.wordpress-woocommerce",{"title":91,"path":92,"stem":93,"icon":94},"Examples","/examples","6.examples","i-lucide-download",{"title":96,"path":97,"stem":98,"icon":99},"Testing & Debugging","/testing-and-debugging","7.testing-and-debugging","i-lucide-flask-conical",{"title":101,"path":102,"stem":103,"icon":104},"Compilation & Release","/compilation-and-release","8.compilation-and-release","i-lucide-rocket",{"title":106,"path":107,"stem":108,"icon":109},"Personalized Extension","/personalized-extension","9.personalized-extension","i-lucide-brain",{"title":111,"path":112,"stem":113,"icon":114},"Branding","/branding","branding","i-lucide-hexagon",{"id":116,"title":63,"body":117,"description":500,"extension":501,"links":502,"meta":503,"navigation":504,"path":64,"seo":505,"stem":65,"__hash__":506},"docs/4.additional/2.stylization.md",{"type":118,"value":119,"toc":494},"minimark",[120,125,144,147,154,157,162,170,176,182,189,195,214,278,417,419,423,441,482,490],[121,122,124],"h2",{"id":123},"header-image","Header Image",[126,127,128,129,132,133,137,138],"p",{},"Each package can have its own image for header; that makes the visual style more unique.",[130,131],"br",{},"\nYou can use an image of ",[134,135,136],"strong",{},"any size"," of format ",[134,139,140],{},[141,142,143],"code",{},".PNG",[126,145,146],{},"The image is automatically aligned left-center.",[126,148,149],{},[150,151],"img",{"alt":152,"src":153},"Header alingment","/images/stylization/imageHeaderAlignment.jpg",[155,156],"hr",{},[158,159,161],"h3",{"id":160},"color-of-a-background-filling","Color of a background filling",[126,163,164,165,169],{},"An image of any size ",[166,167,168],"em",{},"including a small one)"," can be extended by a color of background filling.",[126,171,172],{},[173,174,175],"small",{},"To the left - a small image, to the right - a filling color.",[126,177,178],{},[150,179],{"alt":180,"src":181},"Example color continue","/images/stylization/exampleColorContinue.jpg",[126,183,184,185,188],{},"Add a gradient mask to your image to create a transition into a color of a common filling ",[166,186,187],{},"(to make the image proceed with the help of the color, not expanding beyond the header)",".",[126,190,191],{},[150,192],{"alt":193,"src":194},"Use gradient mask to create transition in color","/images/stylization/useGradientMaskHeader.jpg",[126,196,197,198,201,202,209,210,213],{},"Copy ",[141,199,200],{},"HEX"," ",[166,203,204,205,208],{},"(in our example it's ",[134,206,207],{},"#D81C52",")"," of the filing color and add into HEX to ",[141,211,212],{},"header_color_hex"," block.",[215,216,223],"pre",{"className":217,"code":218,"highlights":219,"language":221,"meta":222,"style":222},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\"stylization\": {\n    \"header_color_hex\": \"#D81C52\" \n}\n",[220],2,"json","",[141,224,225,247,272],{"__ignoreMap":222},[226,227,230,234,238,240,244],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"sMK4o","\"",[226,235,237],{"class":236},"sfazB","stylization",[226,239,233],{"class":232},[226,241,243],{"class":242},"sTEyZ",": ",[226,245,246],{"class":232},"{\n",[226,248,251,254,257,259,262,265,267,269],{"class":249,"line":220},[228,250],"highlight",[226,252,253],{"class":232},"    \"",[226,255,212],{"class":256},"spNyl",[226,258,233],{"class":232},[226,260,261],{"class":232},":",[226,263,264],{"class":232}," \"",[226,266,207],{"class":236},[226,268,233],{"class":232},[226,270,271],{"class":242}," \n",[226,273,275],{"class":228,"line":274},3,[226,276,277],{"class":232},"}\n",[215,279,286],{"className":217,"code":280,"filename":281,"highlights":282,"language":221,"meta":222,"style":222},"{\n    \"settings\": {\n      \"main\": {...},\n      \"inside_option_sets\": {...},\n      \"stylization\": {\n          \"header_color_hex\": \"#021523\",\n      }\n    },\n    \"structure\": {...}\n}\n","Example Package.atom",[283,284,285],5,6,7,[141,287,288,292,306,328,346,359,382,388,394,412],{"__ignoreMap":222},[226,289,290],{"class":228,"line":229},[226,291,246],{"class":232},[226,293,294,296,299,301,303],{"class":228,"line":220},[226,295,253],{"class":232},[226,297,298],{"class":256},"settings",[226,300,233],{"class":232},[226,302,261],{"class":232},[226,304,305],{"class":232}," {\n",[226,307,308,311,315,317,319,322,325],{"class":228,"line":274},[226,309,310],{"class":232},"      \"",[226,312,314],{"class":313},"sBMFI","main",[226,316,233],{"class":232},[226,318,261],{"class":232},[226,320,321],{"class":232}," {",[226,323,324],{"class":242},"...",[226,326,327],{"class":232},"},\n",[226,329,331,333,336,338,340,342,344],{"class":228,"line":330},4,[226,332,310],{"class":232},[226,334,335],{"class":313},"inside_option_sets",[226,337,233],{"class":232},[226,339,261],{"class":232},[226,341,321],{"class":232},[226,343,324],{"class":242},[226,345,327],{"class":232},[226,347,349,351,353,355,357],{"class":348,"line":283},[228,250],[226,350,310],{"class":232},[226,352,237],{"class":313},[226,354,233],{"class":232},[226,356,261],{"class":232},[226,358,305],{"class":232},[226,360,362,365,368,370,372,374,377,379],{"class":361,"line":284},[228,250],[226,363,364],{"class":232},"          \"",[226,366,212],{"class":367},"sbssI",[226,369,233],{"class":232},[226,371,261],{"class":232},[226,373,264],{"class":232},[226,375,376],{"class":236},"#021523",[226,378,233],{"class":232},[226,380,381],{"class":232},",\n",[226,383,385],{"class":384,"line":285},[228,250],[226,386,387],{"class":232},"      }\n",[226,389,391],{"class":228,"line":390},8,[226,392,393],{"class":232},"    },\n",[226,395,397,399,402,404,406,408,410],{"class":228,"line":396},9,[226,398,253],{"class":232},[226,400,401],{"class":256},"structure",[226,403,233],{"class":232},[226,405,261],{"class":232},[226,407,321],{"class":232},[226,409,324],{"class":242},[226,411,277],{"class":232},[226,413,415],{"class":228,"line":414},10,[226,416,277],{"class":232},[155,418],{},[158,420,422],{"id":421},"displaying-an-image-in-test-mode","Displaying an image in test mode",[126,424,425,426,428,429,432,433,438,439],{},"You can see how the package image will look like before the compilation.",[130,427],{},"\nJust place the header image near your package file ",[134,430,431],{},"(.ATOM)",", set name as ",[134,434,435],{},[141,436,437],{},"custom_header_name",", with image format ",[141,440,143],{},[215,442,446],{"className":443,"code":444,"language":445,"meta":222,"style":222},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","├── Package Folder/\n│   ├── Package File.atom\n│   │── custom_header_name.png\n","bash",[141,447,448,459,472],{"__ignoreMap":222},[226,449,450,453,456],{"class":228,"line":229},[226,451,452],{"class":313},"├──",[226,454,455],{"class":236}," Package",[226,457,458],{"class":236}," Folder/\n",[226,460,461,464,467,469],{"class":228,"line":220},[226,462,463],{"class":313},"│",[226,465,466],{"class":236},"   ├──",[226,468,455],{"class":236},[226,470,471],{"class":236}," File.atom\n",[226,473,474,476,479],{"class":228,"line":274},[226,475,463],{"class":313},[226,477,478],{"class":236},"   │──",[226,480,481],{"class":236}," custom_header_name.png\n",[126,483,484,485,188],{},"For information on how to start testing mode, see ",[486,487,489],"a",{"href":488},"/testing-and-debugging#test-mode","here",[491,492,493],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":222,"searchDepth":229,"depth":220,"links":495},[496],{"id":123,"depth":220,"text":124,"children":497},[498,499],{"id":160,"depth":274,"text":161},{"id":421,"depth":274,"text":422},"Settings for styling the package.","md",null,{},{"icon":66},{"title":63,"description":500},"7lidI_Exth1BdSOEqewCXebrQvvXYa1qb0tvb6lqgig",[508,510],{"title":58,"path":59,"stem":60,"description":509,"icon":61,"children":-1},"Customize elements directly through the extension.",{"title":73,"path":74,"stem":75,"description":511,"icon":76,"children":-1},"Checking the purchase code and its purpose",1773452494253]