Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Appanvil karma designer
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"}

...