Hello,
Since I have updated, the background of an icon is not showing in the builder. It is working properly on the live site.
In the builder:
Background colour selected:
On the live site:
Thanks,
Philippe
Hi Philippe,
Thanks so much for your report!
Can you please provide me with the part of the layout, such as template.json or template code (copy all in the upper right of the structure panel)? Unfortunately, I cannot reproduce the problem.
Best regards,
timmse
Hello,
Sorry for the late answer. Here you go:
{"content":[{"id":"3806a0","name":"section","parent":0,"children":["96999f"],"settings":{"_cssGlobalClasses":["puudmk"]},"label":"Contact 26"},{"id":"96999f","name":"container","parent":"3806a0","children":["18fcca","55e514"],"settings":{"_cssGlobalClasses":["glrldf"]}},{"id":"18fcca","name":"div","parent":"96999f","children":["328853","bccab6"],"settings":{"_cssGlobalClasses":["aftbjs"]},"label":"Content"},{"id":"bccab6","name":"div","parent":"18fcca","children":["914953","890850"],"settings":{"_cssGlobalClasses":["mljozh"],"tag":"custom","customTag":"ul"},"label":"List"},{"id":"914953","name":"div","parent":"bccab6","children":["2fc82d","884a4f"],"settings":{"_cssGlobalClasses":["vucctc"],"tag":"custom","customTag":"li"},"label":"Item"},{"id":"2fc82d","name":"div","parent":"914953","children":["261474","3b3dea"],"settings":{"_cssGlobalClasses":["kmwxei"]},"label":"Detail"},{"id":"261474","name":"heading","parent":"2fc82d","children":[],"settings":{"text":"Send me a message","_cssGlobalClasses":["hrwdyf"]}},{"id":"3b3dea","name":"button","parent":"2fc82d","children":[],"settings":{"text":"philippe@burki.me","style":"primary","_cssGlobalClasses":["prkiws"],"link":{"type":"external","url":"mailto:philippe@burki.me"}}},{"id":"884a4f","name":"icon","parent":"914953","children":[],"settings":{"icon":{"library":"fontawesomeBrands","icon":"fab fa-weixin"},"_cssGlobalClasses":["gjskpa"]}},{"id":"328853","name":"div","parent":"18fcca","children":["f8d73b","ede1ec"],"settings":{"_cssGlobalClasses":["muadbq","sihgiy"]},"label":"Intro"},{"id":"f8d73b","name":"heading","parent":"328853","children":[],"settings":{"text":"Leave me a Message","tag":"h2","_cssGlobalClasses":["wnpikx"]}},{"id":"ede1ec","name":"text-basic","parent":"328853","children":[],"settings":{"text":"Contact me","_cssGlobalClasses":["samysq"],"tag":"span"},"label":"Tagline"},{"id":"55e514","name":"div","parent":"96999f","children":["8c6ebd"],"settings":{"_cssGlobalClasses":["pxturw"]},"label":"Form"},{"id":"8c6ebd","name":"form","parent":"55e514","children":[],"settings":{"fields":[{"type":"text","label":"First Name","placeholder":"First Name","id":"3d6bdc","width":"50","required":true},{"type":"text","label":"Last Name","placeholder":"Last Name","id":"fcliic","width":"50","required":true},{"type":"email","label":"Email","placeholder":"Email Address","required":true,"id":"ab8a6a"},{"type":"text","label":"Subject","placeholder":"Subject","id":"wvbicl","width":"100","required":true},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"63147a"}],"submitButtonStyle":"primary","successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"{{3d6bdc}} {{fcliic}}","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","_cssGlobalClasses":["oqhlna"],"showLabels":true,"requiredAsterisk":true,"actions":["email"],"submitButtonText":"Submit Form","submitButtonTypography":{"color":{"raw":"var(--light)","id":"01GXDSYSRYD68Q05A7AAZ7QAY8","name":"light"}},"replyToEmail":"{{ab8a6a}}","emailContent":"{{all_fields}}"}},{"id":"890850","name":"div","parent":"bccab6","children":["797229","6d405f"],"settings":{"_cssGlobalClasses":["vucctc"],"tag":"custom","customTag":"li"},"label":"Item"},{"id":"797229","name":"div","parent":"890850","children":["7824e8","275189"],"settings":{"_cssGlobalClasses":["kmwxei"]},"label":"Detail"},{"id":"6d405f","name":"icon","parent":"890850","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-phone"},"_cssGlobalClasses":["gjskpa"]}},{"id":"7824e8","name":"heading","parent":"797229","children":[],"settings":{"_cssGlobalClasses":["hrwdyf"],"text":"Phone"}},{"id":"275189","name":"button","parent":"797229","children":[],"settings":{"text":"+41 77 522 15 26","style":"primary","_cssGlobalClasses":["prkiws"],"link":{"type":"external","url":"tel:0041775221526"}}}],"source":"bricksCopiedElements","sourceUrl":"https://burki.me","version":"1.9.9","globalClasses":[{"id":"puudmk","name":"contact-26","settings":{"_margin":{"top":"0","bottom":"0"}}},{"id":"glrldf","name":"contact-26-container","settings":{"_display":"grid","_gridTemplateColumns":"repeat(12, minmax(0, 1fr))","_gridGap":"var(--space-l)","_background":{"color":{"raw":"var(--bg-body)","id":"01H7SXSF0MT89ZA0Z8BTGTF54C","name":"bg-body"}},"_padding":{"top":"var(--space-xl)","right":"var(--space-xl)","bottom":"var(--space-xl)","left":"var(--space-xl)"},"_gridGap:mobile_landscape":"var(--space-l) 0","_padding:mobile_landscape":{"right":"2rem","left":"2rem"}}},{"id":"aftbjs","name":"contact-26-content","settings":{"_gridItemColumnSpan":"span 5","_display":"flex","_direction":"column","_alignItems":"flex-start","_rowGap":"var(--space-l)","_gridItemColumnSpan:mobile_landscape":"span 12"}},{"id":"mljozh","name":"contact-26-content-list-ul","settings":{"_display":"flex","_direction":"column","_alignItems":"flex-start","_rowGap":"var(--space-s)","_width":"100%","_padding":{"left":"0"}}},{"id":"vucctc","name":"contact-26-content-list-item","settings":{"_display":"flex","_alignItems":"flex-start","_columnGap":"1.5rem"}},{"id":"kmwxei","name":"contact-26-content-list-item__detail","settings":{"_display":"flex","_direction":"column","_alignItems":"flex-start"}},{"id":"hrwdyf","name":"contact-26-content-list-item__title","settings":{"_typography":{"font-size":"var(--text-m)"}}},{"id":"prkiws","name":"contact-26-content-list-item__cta","settings":{"_background":{"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0)","hsl":"hsla(0, 0%, 0%, 0)"}},"_padding":{"top":"0","right":"0","bottom":"0","left":"0"},"_typography:hover":{"color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"_margin":{"top":"1.5rem"},"_typography":{"text-align":"left","color":{"raw":"var(--secondary-l-4)","id":"01GXBWJMZX793Y156N940FCB3G.t.3","name":"secondary-l-4"}}}},{"id":"gjskpa","name":"contact-26-content-list-item__icon","settings":{"iconColor":{"raw":"var(--primary)","id":"01GXBWJFMN0FTV5W63KFVZYHHA","name":"primary"},"iconSize":"var(--text-m)","_padding":{"top":".5rem","right":".5rem","bottom":".5rem","left":".5rem"},"_order":"-1","_background":{"color":{"raw":"var(--light)","id":"01GXDSYSRYD68Q05A7AAZ7QAY8","name":"light"}},"_border":{"radius":{"top":"50%","right":"50%","bottom":"50%","left":"50%"}},"_width":"3.5rem","_height":"3.5rem","_display":"flex","_justifyContent":"center","_alignItems":"center"}},{"id":"muadbq","name":"intro","settings":{"_typography":{"text-align":"center"},"_direction":"column","_display":"flex","_alignItems":"center","_rowGap":"var(--space-s)","_width:mobile_landscape":"100%","_alignSelf":"center"}},{"id":"sihgiy","name":"contact-26-content__intro","settings":{"_typography":{"text-align":"left"},"_alignItems":"flex-start"}},{"id":"wnpikx","name":"intro__heading","settings":[]},{"id":"samysq","name":"intro__tagline","settings":{"_typography":{"color":{"raw":"var(--secondary-l-2)","id":"01GXBWJMZX793Y156N940FCB3G.t.1","name":"secondary-l-2"}},"_order":"-1"}},{"id":"pxturw","name":"contact-26-form","settings":{"_gridItemColumnSpan":"span 7","_gridItemColumnSpan:mobile_landscape":"span 12"}},{"id":"oqhlna","name":"contact-26-form__content","settings":{"_background":{"color":{"raw":"var(--light)","id":"01GXDSYSRYD68Q05A7AAZ7QAY8","name":"light"}},"labelTypography":{"font-size":"var(--text-m)","font-weight":"400","text-transform":"none","color":{"raw":"var(--dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}},"fieldTypography":{"text-transform":"none","font-weight":"400","font-size":"var(--text-m)","color":{"raw":"var(--dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}},"submitButtonBackgroundColor":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"},"submitButtonTypography":{"color":{"id":"acss_import_white","name":"White","raw":"var(--white)"}},"submitButtonBackgroundColor:hover":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"},"submitButtonBorder":{"width":{"bottom":".1rem","top":".1rem","right":".1rem","left":".1rem"},"style":"solid","color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"fieldBackgroundColor:hover":{"raw":"var(--white) !important"},"fieldTypography:hover":{"color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"submitButtonMargin":{"left":"3rem","right":"3rem"},"_padding":{"top":"var(--space-m)","right":"var(--space-m)","bottom":"var(--space-m)","left":"var(--space-m)"},"fieldMargin":{"right":"var(--space-4xs)","left":"var(--space-4xs)"}}}],"globalElements":[]}
Best regards,
Philippe
No problem. I think it’s the same issue reported here:
Is it possible that your variables were saved in a color palette, but the palette itself no longer exists, and you have now defined the colors somewhere else (in the variable manager, for example)?
If so, this is because each color palette color is assigned a unique ID. This ID is also saved in the element settings to which you assigned the color. If you delete the palette, the color ID will remain in the element settings, which will probably lead to the problem.
Hello,
I do not think that this is linked to a variable being removed:
- it happened when I updated the version of Bricks: I had the builder open and when I refreshed, the background disappeared;
- the front end still works as expected. I would assume that if this was a problem with the color palette, the background would also not be displayed in the front end.
This is what I see in the builder:
This is what I see on the front end:
Thanks,
Philippe
Is the problem still visible in the builder? If so, please send access data and a link to help@bricksbuilder.io
In the template json, I see that your colors are assigned to an ID (which is the case if it’s saved to a color palette), but the ID looks more than strange. The question is what this ID refers to and why it looks so weird.
"iconColor": {
"raw": "var(--primary)",
"id": "01GXBWJFMN0FTV5W63KFVZYHHA",
"name": "primary"
},
Normally it should look something like this:
"iconColor": {
"raw": "var(--primary)",
"id": "hjagir",
"name": "primary"
},
In addition to the value, each color palette color also receives an ID, making it uniquely referenceable. This ID is also saved in the element settings (icon background settings).
Your problem is that the color ID for --light in the palette differs from that in the element settings. As a result, the assignment no longer matches, and the color is not displayed.
If I compare the IDs for --primary, for example, they are equal in the color palette and the element settings, so it’s working as expected.
Color Palette
Element settings
That is the reason - but I don’t know what the cause is. How did you get the core framework colors from core framework into the palette? Is there an export function or does it sync automatically?
We’ve improved the color palette behavior in 1.10. Please see here: SOLVED: Color Variables not applying in the builder - #14 by NewForumSupport
Since we haven’t received a reply for a couple of weeks, I’ll mark this report as NO BUG for now.