summary | 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 app 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 file files & run gulp Add custom classes to css file App customization Copy custom branding |
---|
page | {"premium":true,"name":"page","children":[{"id":"nY2AvEj6pvilP_W3SNRAl","params":{"padding":14,"gap":10,"image":{"value":"att2560524341","target":"_blank","type":"attachment"},"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":"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"},{"params":{"background":"#ffffff","padding":0,"gap":10},"children":[{"name":"row","children":[{"name":"column","children":[{"name":"spacer","params":{"space":0},"children":[],"id":"XOz-g-GMwPWiQ5mT-WJzW"},{"name":"divider","params":{"templateId":"solid text start","color":{"light":"#1f2d3857"},"alignment":"center","fontSize":24,"fontColor":{"light":"#1f2d38b3"},"height":1,"borderStyle":"solid","text":"Guide"},"children":[],"id":"4Nlij30M6x_0GTKHkY3rU"},{"name":"text","params":{"templateId":"simple paragraph","value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"fontSize":16,"lineHeight":"24px","letterSpacing":0,"text":"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 app 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":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"XYsgBQd_0FVZMhv2KO3o8"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"gqCy3Ge96CoP_xHHdHVJu"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"center"},"id":"4Vh6Y9hRDB6mE8z6wNG_D"}],"params":{"layout":[1],"gap":10,"minHeight":50,"padding":10,"borderRadius":0,"size":"medium"},"id":"J4Nq9nqABBHNfrJhOH_kA"}],"name":"section","id":"dT1A1kHHur754wNfmXdBo"},{"params":{"background":"#ffffff","padding":3240,"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":"2575532061","target"https://apliqoux.atlassian.net/wiki/spaces/UXD/pages/2543288330/Changes+in+the+scss+file+running+gulp","target":"_blank":"_blank","type":"linkpage"}},"children":[{"name":"icon","params":{"size":24,"color":"#ffffff","alignment":"center","icon":"download","shape":"circular","background":"#1E76BC"},"children":[],"id":"PsLemsCiDN-NMKtL5wuHG"},{"name":"text","params":{"value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","childrenalign":[{"textcenter":,"Update scss file ",children":[{"fontSize":24,"fontFamily":"Montserrat, sans-serif","color":"#04243Be5","fontWeight":700}],"aligntext":"centerChanges in default.constant "},{"type]}]}]}]}]},"children":[],"id":"paragraphJJhytGJAlLZaZJTCTXspC"}],"alignid":"centerGEwsLUKmneRKKy2AJTWMM"}],"childrenparams":[{"fontSizeborderRadius":24,{"fontFamilyall":"Montserrat, sans-serif"0,"btl":0,"colorbbl":0,"#04243Be5btr":0,"fontWeightbbr":7000,"textisIndividualCorners":"& run gulp"}]}]}]}]}]},"children":[],"id":"JJhytGJAlLZaZJTCTXspC"}]false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"GEwsLUKmneRKKy2AJTWMM9LIwq9TYscyU1aiEaLxt3"}],{"paramsname":{"borderRadius"column","children":[{"allname":0,"btlcard":0,"bblparams":0,{"btrgap":010,"bbrpadding":028,"isIndividualCornersborderRadius":false},{"paddingall":020,"gapisIndividualCorners":20false,"verticalAlignmentbbl":0,"topbbr"}:0,"idbtl":0,"9LIwq9TYscyU1aiEaLxt3btr":0},{"namebackground":"column#ffffff","childrenboxShadows":[{"namey":0,"cardblur":50,"paramsspread":{-12,"gapcolor":10"#00000040"}],"paddinghover":28"elevate","borderRadiuslink":{"allvalue":20"2575171612","isIndividualCornerstarget":false,"bbl_blank":0,"bbrtype":0,"btlpage":0}},"btrchildren":0},"background[{"name":"#fffffficon","boxShadowsparams":[{"ysize":024,"blurcolor":50,"spread#ffffff":-12,"coloralignment":"#00000040center"}],"hovericon":"elevatescrewdriver-wrench","linkshape":{""circular","background":"#1E76BC"},"children":[],"id":"fRszGZKCRSL-iYWVPcPt7"},{"name":"text","params":{"value":[{"type"https://apliqoux.atlassian.net/wiki/spaces/UXD/pages/2543452191/Adding+custom+classes+to+css+file","target":"_blank",:"paragraph","children":[{"type":"paragraph","children":[{"type":"linkparagraph"}},"children":[{"nametype":"iconparagraph","paramschildren":[{"sizetype":24,"color":"#ffffff"paragraph","alignmentchildren":"center","icon[{"type":"screwdriver-wrenchparagraph","shapechildren":"circular","background[{"text":"#1E76BCUpdate scss files "},"childrenfontSize":[]24,"idfontFamily":"fRszGZKCRSLMontserrat, sans-iYWVPcPt7serif"},{"namecolor":"text#04243Be5","paramsfontWeight":{"value700}],"align":[{"type":"paragraph","children":[center"},{"type":"paragraph","childrenalign":[{"typecenter":"paragraph","children":[{"text":"Add custom classes to css file","fontSize":24,"fontFamily":"Montserrat, sans-serif","color":"#04243Be5","fontWeight":700}],"align":"center""text":"& run gulp"}]}]}]}]}]}]}]},"children":[],"id":"oVk1JsapTwVq4y1hiweiQ"}],"id":"jG1QmHahKNq2euSMG8OmP"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"k65lg6IeuIZP7eNAu5ve0"},{"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":"https://apliqoux.atlassian.net/wiki/spaces/UXD/pages/2543419419/App+customization+-+changes+in+the+custom+variables2543452191","target":"_blank","type":"linkpage"}},"children":[{"name":"icon","params":{"size":24,"color":"#ffffff","alignment":"center","icon":"slidersscrewdriver-wrench","shape":"circular","background":"#1E76BC"},"children":[],"id":"7kmysKhr4DPk43QQLtuRcDxOPAW45NGNHcY8zs_HAp"},{"name":"text","params":{"value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"text":"App customization Add custom classes to css file","fontSize":24,"fontFamily":"Montserrat, sans-serif","color":"#04243Be5","fontWeight":700}],"align":"center"}]}]}]}]},"children":[],"id":"jsJQcBLCt14AdPJTn7rHxNPooQ07Hp78VC5wRIVeOF"}],"id":"XmANQkglEVAbsoYw3J3pDrqcknSZmnEmDbi0OYkHxd"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"umne8U54fEhBdK_1Exphq"},{"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":"https://apliqoux.atlassian.net/wiki/spaces/UXD/pages/2543288342/Copying+files+to+apply+changes+without+running+gulp","target":"_blank","type":"linkpage"}},"children":[{"name":"icon","params":{"size":24,"color":"#ffffff","alignment":"center","icon":"gears","shape":"circular","background":"#1E76BC"},"children":[],"id":"8pS4A4NNVU1P97fwiIXDL8mKtzONWdV-j5Bvj_-2W9"},{"name":"text","params":{"value":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"type":"paragraph","children":[{"text":"Copy custom branding ","fontSize":24,"fontFamily":"Montserrat, sans-serif","color":"#04243Be5","fontWeight":700}],"align":"center"}]}]}]}]},"children":[],"id":"PS_g68Hknj4lZSdqbVxcuecnzP32kU2fDwdDzhTBrX"}],"id":"vtBgL-E8QvqSsjyDm1wCPnEJd5vAQvLppwKG5zwHJv"}],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"o5KkAquPpE_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":"dQP-PF5njC2I92OLptBgw"},{"name":"column","children":[],"params":{"borderRadius":{"all":0,"btl":0,"bbl":0,"btr":0,"bbr":0,"isIndividualCorners":false},"padding":0,"gap":20,"verticalAlignment":"top"},"id":"fB9zH2ydDSsN48pnU4YnX"}],"params":{"layout":[1,1,1,1],"gap":25,"minHeight":100,"padding":10,"borderRadius":0,"size":"medium"},"id":"B6ZiPCY1wXcAGLPZ2wBQe"}],"name":"section","id":"Mka3rgN2NtT6jZBSBsOI7"}],"id":"SK_jc3s-_GRiwqh2cB5Tn"} |
---|
|