| summary | Installation & Configuration Guide Instructions for installing and configuring Apliqo UX Changes in the scss file & running gulp Copying files to apply changes without running gulp Adding custom classes to css file App customization - changes in the custom variables App Customization Guide In this section, we'll guide you through the fundamentals of app customization. Learn how to update default.constant file to change e.g. application name; run gulp & make modifications in the SCSS file; add custom classes, customize the variables (e.g. adjusting colors), and seamlessly apply custom branding from one app to another without the need to run gulp again. Changes in default.constant Update scss files & run gulp Add custom classes to css file Copy custom branding |
|---|
| page | {"premium":true,"name":"page","children":[{"id":"nY2AvEj6pvilP_W3SNRAl","params":{"padding":014,"gap":10,"image":{"value":"https://images.unsplash.com/photo-1578577133030-78394054ee83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMzg3MzF8MHwxfHNlYXJjaHwxNjJ8fGdyYWRpZW50fGVufDB8MHwxfHwxNjYzMjY2ODk0&ixlib=rb-1.2.1&q=80&w=1080","target":"_self","att2560524341","target":"_blank","type":"linkattachment"},"imagePosition":"top center"},"children":[{"id":"Zl2yf4Rsd9wIm9G2zgky3","name":"row","children":[{"id":"RtW1ITSQy-o73xUABAt8f","name":"column","children":[{"name":"text","params":{"value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"text":"Installation & Configuration App Customization","letterSpacing":0,"color":"#ffffff","fontSize":64,"fontFamily":"Montserrat, sans-serif"}],"align":"center"}]}]}]},"children":[],"id":"IZILWs7eBBcnKDQnpkhac"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"qTkmX-VsBXVIi3XL8-6d3","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"UcnZeGng6Z_vVTuPLnTqq","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"AMEt659jLh-2O7f0iGLCg","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"Gc6Yfg0i3MTgvVay-EFz3","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"YWo4y23smnoNJi2yaDd3b","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}}],"params":{"layout":[1],"gap":10,"minHeight":70,"padding":10,"borderRadius":0,"size":"medium"}}],"name":"section"},{"idparams":{"ciRqTS38yM4U6q3TfouFDbackground","params":{"background":":"#ffffff","padding":0,"gap":10},"children":[{"idname":"MUtqurdNPWWAprqwzX8KDrow","children":[{"name":"rowcolumn","children":[{"idname":"Aw66DE4n0dFfTVi9YHELmspacer","nameparams":{"columnspace":0},"children":[],"id":"XOz-g-GMwPWiQ5mT-WJzW"},{"name":"divider","params":{"templateId":"solid icon 1text start","color":{"#e4e4e4light":"#1f2d3857"},"alignment":"center","fontSize":24,"fontColor":{"#202020light":"#1f2d38b3"},"height":21,"borderStyle":"solid","icontext":"angles-downGuide"},"children":[],"id":"tLChxOxC1C4Nlij30M6x_rB_T05xfwB0GTKHkY3rU"}],{"name":"text","params":{"borderRadiustemplateId":{"allsimple paragraph":0,"btlvalue":0,[{"bbltype":0"paragraph","btrchildren":0,[{"bbrtype":0,"isIndividualCornersparagraph":false},"paddingchildren":0,[{"gapfontSize":2016,"verticalAlignmentlineHeight":"center24px"}},{"id":"0b5H2CjBxcY4hkZOz22VF","name":"column","children":[],"params":{"borderRadius":{"all":"letterSpacing":0,"btltext":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"4aaLxE3acX_D_pMi3x9CO","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"iXTOLrIYq4tFISFwxHMvX","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"GVC-owHHbPuAKx6E73SwK","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}},{"id":"6im72qkNnSAy_1UU8l_Lq","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}}],"params":{"layout":[1],"gap":10,"minHeight":50,"padding":10,"borderRadius":0,"size":"full"}},{"id":"KREwd-agHg71Jmdh-LN-C","name":"row","children":[{"id":"1bXqVxp5yjNy6_3hJB14_","name":"column","children":[{"name":"text","params":{"templateId":"headline and paragraph","value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"text":"Guide ","fontWeight":700,"letterSpacing":-1,"lineHeight":"unset","fontFamily":"unset","fontSize":32}]},{"type":"paragraph","children":[{"text":"","fontSize":16,"lineHeight":"24px","color":"#555","letterSpacing":0,"fontFamily":"Open Sans, sans-serif"}]},{"type":"paragraph","children":[{"lineHeight":"24px","color":"#555","letterSpacing":0,"text":"Instructions for installing and configuring Apliqo UX","fontFamily":"Open Sans, sans-serif","fontSize":18}],"align":"left"}]}]},"children":[],"id":"F6I2GWSLN7it_Kwyl2Qld"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}},{"id":"1osvDhVRqDbh-AX_XAC5P","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}},{"id":"16aiy57yZBDvRykMuinR2","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}},{"id":"lJGnz0uukSKNrVTks3SaJ","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}},{"id":"5luNJj1DKqLUmWODVfefS","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}},{"id":"EMnvirN6hOhiKX7_hftsl","name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"}}],"params":{"layout":[1],"gap":10,"minHeight":50,"padding":10,"borderRadius":0}}],"name":"section"},{"params":{"background":"#f8fafb","padding":22,"gap":10},"children":[{"name":"row","children":[{"name":"column","children":[{"name":"card","params":{"gap":10,"padding":28,"borderRadius":{"all":20,"isIndividualCorners":false,"bbl":0,"bbr":0,"btl":0,"btr":0},"background":"#ffffff","boxShadows":[{"y":0,"blur":50,"spread":-12,"color":"#00000040"}],"hover":"elevate","link":{"value":"2463891513","target":"_blank","type":"page"}},"children":[{"name":"icon","params":{"size":24,"color":"#ffffff","alignment":"center","icon":"download","shape":"circular","background":"#0673e1"},"children":[],"id":"PsLemsCiDN-NMKtL5wuHG"In this section, we'll guide you through the fundamentals of app customization. Learn how to update default.constant file to change e.g. application name; run gulp & make modifications in the SCSS file; add custom classes, customize the variables (e.g. adjusting colors), and seamlessly apply custom branding from one app to another without the need to run gulp again.","fontFamily":"Montserrat, sans-serif","color":"#202E39"}],"align":"center"}]}]},"children":[],"id":"Y1KufGHQY_wnlF7nb658a"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"OiyZSpb7cnZbMl_8c9lXO"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"Os68_Hun0HdempWdRPL_g"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"7bGc8t5-aDtKeC1kZasE_"},{"name":"spacer"column","children":[],"params":{"borderRadius":{"spaceall":5}0,"childrenbtl":[]0,"idbbl":0,"F8etFZu5dbqTOY7pQvcQ6btr"}:0,{"namebbr":0,"textisIndividualCorners":false},"paramspadding":{0,"valuegap":[{20,"typeverticalAlignment":"paragraphcenter"},"childrenid":["XYsgBQd_0FVZMhv2KO3o8"},{"typename":"paragraphcolumn","children":[{],"typeparams":{"paragraph","childrenborderRadius":[{"typeall":0,"paragraphbtl":0,"childrenbbl":[{0,"textbtr":"Changes in the scss file & running gulp","fontFamily":"unset","color":"#000000","fontSize":24}],"align0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"}]}]}]}]},"childrenid":[],"id"gqCy3Ge96CoP_xHHdHVJu"},{"name":"JJhytGJAlLZaZJTCTXspCcolumn"}],"idchildren":"GEwsLUKmneRKKy2AJTWMM"}[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"topcenter"},"id":"9LIwq9TYscyU1aiEaLxt34Vh6Y9hRDB6mE8z6wNG_D"}],{"nameparams":{"column",layout"children":[{"name":"card","params":{1],"gap":10,"minHeight":50,"padding":2810,"borderRadius":{0,"allsize":20"medium"},"isIndividualCornersid":false"J4Nq9nqABBHNfrJhOH_kA"}],"bblname":0"section","bbrid":0"dT1A1kHHur754wNfmXdBo"},{"btlparams":0,{"btrbackground":0}"#ffffff","backgroundpadding":40,"#ffffffgap":10},"boxShadowschildren":[{"yname":0,"blurrow":50,"spreadchildren":-12,"color[{"name":"#00000040column"}],"hover,"children":[{"name":"elevatecard","linkparams":{"valuegap":10,"2463793221padding":28,"targetborderRadius":{"_blankall":20,"typeisIndividualCorners":"page"}}false,"childrenbbl":[{0,"namebbr":"icon"0,"paramsbtl":{0,"sizebtr":240},"colorbackground":"#ffffff","alignmentboxShadows":[{"centery":0,"iconblur":50,"gearsspread":-12,"shapecolor":"circular#00000040"}],"backgroundhover":"#0673e1elevate"},"childrenlink":[],{"idvalue":"8pS4A4NNVU1P97fwiIXDL2575532061"},{"nametarget":"spacer_blank","paramstype":{"spacepage":5}},"children":[],"id":"rftfDC_Y-Gwx0sDeE4Fsi"},[{"name":"texticon","params":{"valuesize":[{24,"typecolor":"paragraph#ffffff","childrenalignment":[{"type"center","icon":"paragraphdownload","childrenshape":[{"type"circular","background":"paragraph#1E76BC"},"children":[],"id":"PsLemsCiDN-NMKtL5wuHG"},{"typename":"paragraphtext","childrenparams":[{"textvalue":"Copying files to apply changes without running gulp[{"type":"paragraph","fontSizechildren":24,[{"fontFamilytype":"unsetparagraph","color"children":[{"type":"#000000paragraph"}],"alignchildren":"center"}]}]},[{"type":"paragraph","align":"center","children":[{"fontSize":24,"colorfontFamily":"#202022Montserrat, sans-serif","fontFamilycolor":"unset"#04243Be5","fontWeight":700,"text":"Changes in default.constant "}]}]}]}]}]},"children":[],"id":"PS_g68Hknj4lZSdqbVxcuJJhytGJAlLZaZJTCTXspC"}],"id":"vtBgL-E8QvqSsjyDm1wCPGEwsLUKmneRKKy2AJTWMM"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"k65lg6IeuIZP7eNAu5ve09LIwq9TYscyU1aiEaLxt3"},{"name":"column","children":[],{"paramsname":{"borderRadiuscard":{,"allparams":0,{"btlgap":010,"bblpadding":028,"btrborderRadius":0,{"bbrall":020,"isIndividualCorners":false},"paddingbbl":0,"gapbbr":200,"verticalAlignmentbtl":"top"}0,"idbtr":"umne8U54fEhBdK_1Exphq"},{"name":"column"0},"childrenbackground":[],"params#ffffff":{,"borderRadiusboxShadows":[{"ally":0,"btlblur":050,"bblspread":0-12,"btrcolor":0"#00000040"}],"bbrhover":0"elevate","isIndividualCornerslink":false},{"paddingvalue":0,"gap2575171612":20,"verticalAlignmenttarget":"top_blank"},"idtype":"o5KkAquPpE_23QOhmHfXgpage"}},"children":[{"name":"column","children":[]icon","params":{"borderRadiussize":{24,"allcolor":0,"btl#ffffff":0,"bblalignment":0,"btrcenter":0,"bbricon":0,"isIndividualCorners":false}screwdriver-wrench","paddingshape":0,"gapcircular":20,"verticalAlignmentbackground":"top#1E76BC"},"idchildren":"dQP-PF5njC2I92OLptBgw"},{"name[],"id":"columnfRszGZKCRSL-iYWVPcPt7"},{"childrenname":[]"text","params":{"borderRadiusvalue":[{"alltype":0"paragraph","btlchildren":0,[{"bbltype":0,"btrparagraph":0,"bbrchildren":0,[{"isIndividualCornerstype":false},"paddingparagraph":0,"gapchildren":20,[{"verticalAlignmenttype":"topparagraph"},"idchildren":[{"type":"fB9zH2ydDSsN48pnU4YnXparagraph"}],"paramschildren":[{"layouttype":[1,1],"gap":45"paragraph","minHeightchildren":200,[{"paddingtext":10,"borderRadius":0}Update scss files ","idfontSize":"B6ZiPCY1wXcAGLPZ2wBQe"}24,{"namefontFamily":"rowMontserrat, sans-serif","childrencolor":[{"name":#04243Be5"column","childrenfontWeight":[{"name700}],"align":"cardcenter"},{"paramstype":{"gapparagraph":10,"paddingalign":28"center","borderRadiuschildren":[{"allfontSize":2024,"isIndividualCornersfontFamily":false,"bbl":0,"bbr":0,"btl":0,"btr":0},"background":"#ffffff","boxShadows":[{"y":0,"blur":50,"spread":-12,"color":"#00000040"Montserrat, sans-serif","color":"#04243Be5","fontWeight":700,"text":"& run gulp"}]}]}]}]}]}]}]},"children":[],"id":"oVk1JsapTwVq4y1hiweiQ"}],"hoverid":"elevatejG1QmHahKNq2euSMG8OmP"}],"linkparams":{"valueborderRadius":{"2464022654all":0,"targetbtl":"_blank"0,"typebbl":"page"}}0,"childrenbtr":[{"name":"icon"0,"paramsbbr":{"size":240,"colorisIndividualCorners":false},"#ffffffpadding":0,"alignmentgap":"center"20,"iconverticalAlignment":"screwdriver-wrenchtop"},"shapeid":"circulark65lg6IeuIZP7eNAu5ve0"},{"backgroundname":"#0673e1column"},"children":[],"id":"fRszGZKCRSL-iYWVPcPt7"},{"name":"spacercard","params":{"spacegap":5}10,"childrenpadding":[]28,"idborderRadius":{"all":20,"nqXEHK0TRxAWZY5MscLiEisIndividualCorners"}:false,{"namebbl":0,"textbbr":0,"paramsbtl":{0,"valuebtr":[{"type0},"background":"paragraph#ffffff","childrenboxShadows":[{"typey":0,"paragraphblur":50,"childrenspread":[{"type-12,"color":"paragraph#00000040"}],"childrenhover":[{"text":"Adding custom classes to css file"elevate","fontSizelink":24,{"fontFamilyvalue":"unset2543452191","colortarget":"#000000_blank"}],"aligntype":"centerpage"}]}]}]},"children":[],{"idname":"oVk1JsapTwVq4y1hiweiQicon"}],"idparams":{"jG1QmHahKNq2euSMG8OmPsize"}]:24,"paramscolor":{"borderRadius"#ffffff","alignment":{"allcenter":0,"btlicon":0"screwdriver-wrench","bblshape":0,"btrcircular":0,"bbrbackground":0,"isIndividualCorners#1E76BC":false},"paddingchildren":0[],"gapid":20,"verticalAlignment"DxOPAW45NGNHcY8zs_HAp"},{"name":"toptext"},"idparams":{"ahUwyle4bSE1NWHkbXrZYvalue"},:[{"nametype":"columnparagraph","children":[{"nametype":"cardparagraph","paramschildren":[{"gaptype":10,"paddingparagraph":28,"borderRadiuschildren":[{"alltext":20"Add custom classes to css file","isIndividualCornersfontSize":false24,"bblfontFamily":0"Montserrat, sans-serif","bbrcolor":0,"btl#04243Be5":0,"btrfontWeight":0700}],"backgroundalign":"#ffffff"center"}]}]}]},"boxShadowschildren":[{"y":0],"blurid":50,"spread":-12NPooQ07Hp78VC5wRIVeOF"}],"colorid":"#00000040rqcknSZmnEmDbi0OYkHxd"}],"hoverparams":{"elevate",borderRadius"link":{"valueall":0,"2463858770btl":0,"targetbbl":0,"_blankbtr":0,"typebbr":0,"pageisIndividualCorners":false}},"childrenpadding":[{0,"namegap":"icon"20,"paramsverticalAlignment":{"sizetop":24},"colorid":"#ffffffumne8U54fEhBdK_1Exphq"},{"alignmentname":"centercolumn","icon"children":[{"name":"sliderscard","shapeparams":{"circular","backgroundgap":"#0673e1"}10,"childrenpadding":[]28,"idborderRadius":{"7kmysKhr4DPk43QQLtuRcall"}:20,{"nameisIndividualCorners":false,"spacerbbl":0,"paramsbbr":{0,"spacebtl":5}0,"childrenbtr":[]0},"idbackground":"fypNMzgzNUEba1v3II7k-#ffffff"},{"nameboxShadows":[{"texty":0,"paramsblur":{50,"valuespread":[{"type-12,"color":"paragraph#00000040"}],"children":[{"type"hover":"paragraphelevate","childrenlink":[{"typevalue":"paragraph2543288342","childrentarget":[{"_blank","type":"paragraphpage"}},"children":[{"textname":"App customization - changes in the custom variablesicon","fontSizeparams":24,{"fontFamilysize":"unset"24,"color":"#000000#ffffff"}],"alignalignment":"center"}]}]}]}]}","childrenicon":[]"gears","idshape":"jsJQcBLCt14AdPJTn7rHxcircular"}],"idbackground":"XmANQkglEVAbsoYw3J3pD#1E76BC"}],"paramschildren":{[],"borderRadiusid":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"Y54Kpvjr19An4hMAlTDvn"},{"name":"column"8mKtzONWdV-j5Bvj_-2W9"},{"name":"text","params":{"value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[],{"paramstype":{"borderRadius"paragraph","children":[{"alltext":0,"btlCopy custom branding ":0,"bblfontSize":024,"btrfontFamily":0"Montserrat, "bbr":0sans-serif","isIndividualCornerscolor":false},"padding#04243Be5":0,"gapfontWeight":20700}],"verticalAlignmentalign":"topcenter"}]}]}]}]},"children":[],"id":"cj2kr7FUUIO7syZUWGxjrecnzP32kU2fDwdDzhTBrX"}],{"nameid":"column","children":[nEJd5vAQvLppwKG5zwHJv"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"fOMnM-vQm2qk8ddQrj0pBo5KkAquPpE_23QOhmHfXg"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"xdQP-6z1rVhK0ndQAjQWuTWVPF5njC2I92OLptBgw"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"_4azlUS3U3B7wdB5BuHAffB9zH2ydDSsN48pnU4YnX"}],"params":{"layout":[1,1,1,1],"gap":4525,"minHeight":200100,"padding":10,"borderRadius":0,"size":"medium"},"id":"l2g1g7QYZ-Sb7XZtMZWuNB6ZiPCY1wXcAGLPZ2wBQe"}],"name":"section","id":"Mka3rgN2NtT6jZBSBsOI7"}],"id":"SK_jc3s-_GRiwqh2cB5Tn"} |
|---|
|