[{"data":1,"prerenderedAt":669},["ShallowReactive",2],{"navigation_docs_en":3,"-en-touchify-studio-elements-background-and-borders":314,"-en-touchify-studio-elements-background-and-borders-surround":664},[4,40,116,124,225,253,266],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/en/getting-started","en/1.getting-started",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/en/getting-started/introduction","en/1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Create a Project","/en/getting-started/create-project","en/1.getting-started/2.create-project","i-lucide-file-plus-2",{"title":21,"path":22,"stem":23,"icon":24},"Studio Interface","/en/getting-started/studio-ui","en/1.getting-started/3.studio-ui","i-lucide-layout-panel-left",{"title":26,"path":27,"stem":28,"icon":29},"Interactive Content","/en/getting-started/create-interactive-content","en/1.getting-started/4.create-interactive-content","i-lucide-fingerprint",{"title":31,"path":32,"stem":33,"icon":34},"Digital Signage","/en/getting-started/create-signage-content","en/1.getting-started/5.create-signage-content","i-lucide-images",{"title":36,"path":37,"stem":38,"icon":39},"Publish and Broadcast","/en/getting-started/publish","en/1.getting-started/6.publish","i-lucide-rss",{"title":41,"path":42,"stem":43,"children":44,"page":6},"Touchify Studio","/en/touchify-studio","en/2.touchify-studio",[45,49,74,97],{"title":11,"path":46,"stem":47,"icon":48},"/en/touchify-studio/introduction","en/2.touchify-studio/1.introduction","i-lucide-home",{"title":50,"path":51,"stem":52,"children":53,"page":6},"Elements","/en/touchify-studio/elements","en/2.touchify-studio/2.elements",[54,59,64,69],{"title":55,"path":56,"stem":57,"icon":58},"Texts","/en/touchify-studio/elements/texts","en/2.touchify-studio/2.elements/1.texts","i-lucide-case-sensitive",{"title":60,"path":61,"stem":62,"icon":63},"Media","/en/touchify-studio/elements/media","en/2.touchify-studio/2.elements/2.media","i-lucide-image-play",{"title":65,"path":66,"stem":67,"icon":68},"Background and Borders","/en/touchify-studio/elements/background-and-borders","en/2.touchify-studio/2.elements/3.background-and-borders","i-lucide-square-dashed-top-solid",{"title":70,"path":71,"stem":72,"icon":73},"Shapes","/en/touchify-studio/elements/drawing","en/2.touchify-studio/2.elements/4.drawing","i-lucide-sparkle",{"title":75,"path":76,"stem":77,"children":78,"page":6},"Interactions","/en/touchify-studio/interactions","en/2.touchify-studio/3.interactions",[79,82,87,92],{"title":11,"path":80,"stem":81,"icon":29},"/en/touchify-studio/interactions/introduction","en/2.touchify-studio/3.interactions/1.introduction",{"title":83,"path":84,"stem":85,"icon":86},"Navigation","/en/touchify-studio/interactions/navigation","en/2.touchify-studio/3.interactions/2.navigation","i-lucide-navigation",{"title":88,"path":89,"stem":90,"icon":91},"Manipulation","/en/touchify-studio/interactions/manipulation","en/2.touchify-studio/3.interactions/3.manipulation","i-lucide-fullscreen",{"title":93,"path":94,"stem":95,"icon":96},"Windows","/en/touchify-studio/interactions/dialogs","en/2.touchify-studio/3.interactions/4.dialogs","i-lucide-message-square-text",{"title":98,"path":99,"stem":100,"children":101,"page":6},"Animations","/en/touchify-studio/animations","en/2.touchify-studio/4.animations",[102,106,111],{"title":11,"path":103,"stem":104,"icon":105},"/en/touchify-studio/animations/introduction","en/2.touchify-studio/4.animations/1.introduction","i-lucide-bring-to-front",{"title":107,"path":108,"stem":109,"icon":110},"Customization","/en/touchify-studio/animations/customize","en/2.touchify-studio/4.animations/2.customize","i-lucide-columns-3-cog",{"title":112,"path":113,"stem":114,"icon":115},"Storyboards","/en/touchify-studio/animations/storyboards","en/2.touchify-studio/4.animations/3.storyboards","i-lucide-clipboard-clock",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Touchify Publisher","/en/touchify-publisher","en/3.touchify-publisher",[121],{"title":11,"path":122,"stem":123,"icon":14},"/en/touchify-publisher/introduction","en/3.touchify-publisher/1.introduction",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Touchify Player","/en/touchify-player","en/4.touchify-player",[129,132,156,215],{"title":11,"path":130,"stem":131,"icon":14},"/en/touchify-player/introduction","en/4.touchify-player/1.introduction",{"title":5,"path":133,"stem":134,"children":135,"page":6},"/en/touchify-player/getting-started","en/4.touchify-player/2.getting-started",[136,141,146,151],{"title":137,"path":138,"stem":139,"icon":140},"The Application","/en/touchify-player/getting-started/application","en/4.touchify-player/2.getting-started/1.application","i-lucide-app-window-mac",{"title":142,"path":143,"stem":144,"icon":145},"Connect","/en/touchify-player/getting-started/connection","en/4.touchify-player/2.getting-started/2.connection","i-lucide-key-round",{"title":147,"path":148,"stem":149,"icon":150},"Home Screen","/en/touchify-player/getting-started/home-screen","en/4.touchify-player/2.getting-started/3.home-screen","i-lucide-grid-2x2",{"title":152,"path":153,"stem":154,"icon":155},"Options","/en/touchify-player/getting-started/settings","en/4.touchify-player/2.getting-started/4.settings","i-lucide-settings",{"title":157,"path":158,"stem":159,"children":160,"page":6},"Installation","/en/touchify-player/installation","en/4.touchify-player/3.installation",[161,166,170,175,180,185,190,195,200,205,210],{"title":162,"path":163,"stem":164,"icon":165},"The Guides","/en/touchify-player/installation/introduction","en/4.touchify-player/3.installation/01.introduction","i-lucide-badge-question-mark",{"title":93,"path":167,"stem":168,"icon":169},"/en/touchify-player/installation/windows","en/4.touchify-player/3.installation/02.windows","i-cib-windows",{"title":171,"path":172,"stem":173,"icon":174},"Android","/en/touchify-player/installation/android","en/4.touchify-player/3.installation/03.android","i-cib-android",{"title":176,"path":177,"stem":178,"icon":179},"ChromeOS","/en/touchify-player/installation/chromeos","en/4.touchify-player/3.installation/04.chromeos","i-cib-google-chrome",{"title":181,"path":182,"stem":183,"icon":184},"Tizen","/en/touchify-player/installation/tizen","en/4.touchify-player/3.installation/05.tizen","i-cib-samsung",{"title":186,"path":187,"stem":188,"icon":189},"BrightSign","/en/touchify-player/installation/brightsign","en/4.touchify-player/3.installation/06.brightsign","i-lucide-cpu",{"title":191,"path":192,"stem":193,"icon":194},"Linux","/en/touchify-player/installation/linux","en/4.touchify-player/3.installation/07.linux","i-cib-linux",{"title":196,"path":197,"stem":198,"icon":199},"macOS","/en/touchify-player/installation/macos","en/4.touchify-player/3.installation/08.macos","i-cib-apple",{"title":201,"path":202,"stem":203,"icon":204},"iOS","/en/touchify-player/installation/ios","en/4.touchify-player/3.installation/09.ios","i-cib-app-store-ios",{"title":206,"path":207,"stem":208,"icon":209},"Android TV","/en/touchify-player/installation/android-tv","en/4.touchify-player/3.installation/10.android-tv","i-lucide-tv",{"title":211,"path":212,"stem":213,"icon":214},"LG webOS","/en/touchify-player/installation/webos","en/4.touchify-player/3.installation/11.webos","i-cbi-lg",{"title":216,"path":217,"stem":218,"children":219,"page":6},"Troubleshooting","/en/touchify-player/troubleshooting","en/4.touchify-player/4.troubleshooting",[220],{"title":221,"path":222,"stem":223,"icon":224},"Kiosk mode unlocking","/en/touchify-player/troubleshooting/kiosk","en/4.touchify-player/4.troubleshooting/1.kiosk","i-lucide-bug",{"title":226,"path":227,"stem":228,"children":229,"page":6},"Tips & Tricks","/en/tips-tricks","en/5.tips-tricks",[230,233,238,243,248],{"title":11,"path":231,"stem":232,"icon":14},"/en/tips-tricks/introduction","en/5.tips-tricks/1.introduction",{"title":234,"path":235,"stem":236,"icon":237},"Keyboard Shortcuts","/en/tips-tricks/shortcuts","en/5.tips-tricks/2.shortcuts","i-lucide-keyboard",{"title":239,"path":240,"stem":241,"icon":242},"Optimize a Video","/en/tips-tricks/optimize-video","en/5.tips-tricks/3.optimize-video","i-lucide-file-play",{"title":244,"path":245,"stem":246,"icon":247},"Interactive Image","/en/tips-tricks/interactive-image","en/5.tips-tricks/4.interactive-image","i-lucide-image-plus",{"title":249,"path":250,"stem":251,"icon":252},"Scrollable area","/en/tips-tricks/scrollable-content","en/5.tips-tricks/5.scrollable-content","i-lucide-gallery-vertical",{"title":254,"path":255,"stem":256,"children":257,"page":6},"Guides and Advice","/en/guides","en/6.guides",[258,261],{"title":11,"path":259,"stem":260,"icon":14},"/en/guides/introduction","en/6.guides/1.introduction",{"title":262,"path":263,"stem":264,"icon":265},"Stripe Terminal","/en/guides/stripe-terminal","en/6.guides/2.stripe-terminal","i-lucide-credit-card",{"title":267,"path":268,"stem":269,"children":270,"page":6},"Applications","/en/applications","en/7.applications",[271,274],{"title":11,"path":272,"stem":273,"icon":14},"/en/applications/introduction","en/7.applications/1.introduction",{"title":275,"path":276,"stem":277,"children":278,"page":6},"Rooms Manager","/en/applications/rooms-manager","en/7.applications/2.rooms-manager",[279,284,289,294,299,304,309],{"title":280,"path":281,"stem":282,"icon":283},"Login","/en/applications/rooms-manager/login","en/7.applications/2.rooms-manager/1.login","i-lucide-rectangle-ellipsis",{"title":285,"path":286,"stem":287,"icon":288},"Sites","/en/applications/rooms-manager/sites","en/7.applications/2.rooms-manager/2.sites","i-lucide-hotel",{"title":290,"path":291,"stem":292,"icon":293},"Meeting rooms","/en/applications/rooms-manager/meeting-rooms","en/7.applications/2.rooms-manager/3.meeting-rooms","i-lucide-ratio",{"title":295,"path":296,"stem":297,"icon":298},"Users","/en/applications/rooms-manager/users","en/7.applications/2.rooms-manager/4.users","i-lucide-users",{"title":300,"path":301,"stem":302,"icon":303},"Booking","/en/applications/rooms-manager/booking","en/7.applications/2.rooms-manager/5.booking","i-lucide-ticket-check",{"title":305,"path":306,"stem":307,"icon":308},"Tablet Booking","/en/applications/rooms-manager/tablet-booking","en/7.applications/2.rooms-manager/6.tablet-booking","i-lucide-tablet",{"title":310,"path":311,"stem":312,"icon":313},"Mobile Booking","/en/applications/rooms-manager/mobile-booking","en/7.applications/2.rooms-manager/7.mobile-booking","i-lucide-smartphone",{"id":315,"title":65,"body":316,"description":655,"extension":656,"links":657,"meta":658,"navigation":659,"path":66,"seo":660,"stem":67,"__hash__":663},"docs_en/en/2.touchify-studio/2.elements/3.background-and-borders.md",{"type":317,"value":318,"toc":644},"minimark",[319,324,333,339,358,362,369,374,389,408,412,415,425,439,442,454,469,473,480,485,492,505,509,516,520,526,532,536,546,550,583,589,593,600,606,611],[320,321,323],"h2",{"id":322},"panel-description","Panel Description",[325,326,327,328,332],"p",{},"Like all panels arranged on the right side of the interface, ",[329,330,331],"strong",{},"\"Background and borders\""," contains a set of tools for customizing the selected element.",[334,335],"nuxt-img",{"alt":336,"src":337,"width":338},"Background and borders section","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-section.webp",450,[340,341,342,346,349,352,355],"ol",{},[343,344,345],"li",{},"Apply a background color",[343,347,348],{},"Add an outline on the border(s) of your choice",[343,350,351],{},"Round the corner(s) of your choice",[343,353,354],{},"Generate a drop shadow",[343,356,357],{},"Set internal margins",[320,359,361],{"id":360},"background","Background",[325,363,364,365,368],{},"Modify your element's background by selecting the ",[329,366,367],{},"\"Background\""," icon (1). Click on the color dot to choose a new shade, then adjust the opacity with the slider.",[334,370],{"alt":371,"src":372,"provider":373},"Configure page background","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background.webp","none",[375,376,377,378,381,384,385,388],"tip",{},"Do you want to ",[329,379,380],{},"save the color you just created?",[382,383],"br",{},"\nClick the ",[329,386,387],{},"\"Add\""," button in the colors window, below the palette. Enter the name of your new color and validate.",[390,391,398,399,398,404],"div",{"className":392},[393,394,395,396,397],"mt-4","grid","sm:grid-cols-2","gap-4","max-w-full","\n  ",[400,401],"img",{"src":402,"alt":403},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter.webp","Add a color to the palette",[400,405],{"src":406,"alt":407},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-background-ajouter-nommer.webp","Name a color in the palette",[320,409,411],{"id":410},"masks","Masks",[325,413,414],{},"An element's shape can be modified using a mask.",[325,416,417,418,420,421,424],{},"In the ",[329,419,367],{}," subsection, click on the ",[329,422,423],{},"\"Add a mask\""," option and select the shape you want to give to your element.",[390,426,398,429,398,433],{"className":427},[393,394,428,396,397],"sm:grid-cols-3",[400,430],{"src":431,"alt":432},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-formes.webp","List of shapes usable for masks",[400,434],{"src":435,"alt":436,"className":437,"provider":373},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-mask-config.webp","Configure a mask for an element",[438],"sm:col-span-2",[325,440,441],{},"Customize the mask settings in the same subsection.",[325,443,444,445,448,449,453],{},"To change shape, delete the current mask by clicking the ",[329,446,447],{},"\"Delete mask\""," button ",[450,451,452],"em",{},"(trash icon)"," then create a new one in the same way.",[455,456,457,458,461,462,465,466,468],"note",{},"Transform your outline into a mask using the ",[329,459,460],{},"\"Apply mask to border\""," switch available in the ",[329,463,464],{},"\"Border\""," tab.\nApply a mask in ",[329,467,367],{}," first to use this function.",[320,470,472],{"id":471},"borders","Borders",[325,474,475,476,479],{},"To add an outline to your element, click the ",[329,477,478],{},"\"Borders\""," button (2). Choose a line thickness and color; you can also apply a line type like dots, dashes...",[334,481],{"alt":482,"src":483,"width":484},"Border styles","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-style.webp",400,[325,486,487,488,491],{},"Treat your borders case-by-case by unlocking them. Click the ",[329,489,490],{},"\"Unlock\""," icon (padlock) to display borders independently. Modify them according to your needs.",[390,493,398,495,398,499],{"className":494},[393,394,395,396,397],[400,496],{"src":497,"alt":498},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes.webp","Separate border configuration",[400,500],{"src":501,"alt":502,"className":503},"/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-border-separes-exemple.webp","Example of separate border configuration",[504],"sm:self-end",[320,506,508],{"id":507},"rounded-corners","Rounded Corners",[325,510,511,512,515],{},"To modify the rounded corners of your element, click the ",[329,513,514],{},"\"Rounded corners\""," button (3). Choose the desired rounding intensity.",[334,517],{"alt":518,"src":519,"width":484},"Rounded corners configuration","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-config.webp",[325,521,522,523,525],{},"Treat your element's corners case-by-case by unlocking them. Click the ",[329,524,490],{}," icon (padlock) to modify angles independently.",[325,527,528],{},[400,529],{"alt":530,"src":531},"Separate rounded corners configuration","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-radius-separes.webp",[320,533,535],{"id":534},"drop-shadow","Drop Shadow",[325,537,538,539,542,543,545],{},"To add a drop shadow to your element, select the ",[329,540,541],{},"\"Shadow\""," button (4). Click the ",[329,544,387],{}," icon then adjust the shadow settings to your liking.",[334,547],{"alt":548,"src":549,"width":484},"Drop shadow configuration","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-config.webp",[551,552,553,559,566,576],"ul",{},[343,554,555,556],{},"The color/opacity bar works the ",[329,557,558],{},"same way as for background color",[343,560,561,562,565],{},"ΔX and ΔY define the ",[329,563,564],{},"shadow offset"," on the X and Y axes",[343,567,568,569,572,573],{},"Blur ",[329,570,571],{},"modifies the shadow diffusion","; spread ",[329,574,575],{},"affects its intensity",[343,577,578,579,582],{},"The shadow is, by default, outside the element; it can be applied inside using the ",[329,580,581],{},"\"Inner shadow\""," function.",[325,584,585],{},[400,586],{"alt":587,"src":588},"Drop shadow and inner shadow","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-shadow-interieur.webp",[320,590,592],{"id":591},"internal-margins","Internal Margins",[325,594,595,596,599],{},"To apply internal margins to your element, click the ",[329,597,598],{},"\"Internal margins\""," button (5). Choose the size of your margins in pixels.",[325,601,602,603,605],{},"Click the ",[329,604,490],{}," icon (padlock) to modify margins independently.",[334,607],{"alt":608,"src":609,"width":610},"Example of internal margin application","/2-touchify-studio/2-elements/3-background-and-borders/fr-studio-box-padding-exemple.webp",550,[455,612,613,616,618,620,621,624,625,628,629,631,633,634,639,640,643],{},[329,614,615],{},"Reminder:",[382,617],{},[382,619],{},"\nYou can reproduce your customization using styles. Click the ",[329,622,623],{},"\"Add a style\""," button next to the ",[329,626,627],{},"\"Style\""," dropdown button to save the formatting: apply this style to other elements to modify them with one click.\n",[382,630],{},[382,632],{},"\nFor more details, take a look at the ",[635,636,638],"a",{"href":637},"texts#styles","Text customization"," article, ",[329,641,642],{},"\"Styles\""," section.",{"title":645,"searchDepth":646,"depth":646,"links":647},"",2,[648,649,650,651,652,653,654],{"id":322,"depth":646,"text":323},{"id":360,"depth":646,"text":361},{"id":410,"depth":646,"text":411},{"id":471,"depth":646,"text":472},{"id":507,"depth":646,"text":508},{"id":534,"depth":646,"text":535},{"id":591,"depth":646,"text":592},"Customize the background and borders of your elements.","md",null,{},{"icon":68},{"title":661,"description":662},"Background and borders in Touchify Studio","Use Touchify Studio's creation tools to customize the background and borders of your elements.","pUF0FLHYhU5nfQrL-GMynzwIitVFYa-UpgeY3O5h8Z0",[665,667],{"title":60,"path":61,"stem":62,"description":666,"icon":63,"children":-1},"Get familiar with the file explorer and import your media: images, videos, documents...",{"title":70,"path":71,"stem":72,"description":668,"icon":73,"children":-1},"Draw your own shapes using Studio tools.",1761669904335]