Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

Go to solution
Danielle_Wong
Level 8 - Community Advisor Level 8 - Community Advisor
Level 8 - Community Advisor
‎08-09-2017 09:39 AM
‎08-09-2017 09:39 AM

Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

I like to use Brackets (third-party code editor) because it shows live preview of my changes and also word wraps the lines of code. However, the background colors are never correct.

Anyone ever experience this? If so, is there a fix?

Labels:
0 Likes
1,538
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Jim_Thao7
Level 9
Level 9
‎08-10-2017 09:41 AM
‎08-10-2017 09:41 AM

Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

I see.  This is probably because the ${Section3BtnBGColor} references are unique to Marketo and doesn't have anything to do with general HTML.  Therefore, when viewing the code outside of Marketo, some other color is going to render. 

View solution in original post

0 Likes
1,333
Reply
4 REPLIES 4
Jim_Thao7
Level 9
Level 9
‎08-09-2017 03:31 PM
‎08-09-2017 03:31 PM

Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

I use Brackets quite frequently and have never had this issue.   Are you talking about the live preview? The editor pop up color of the actual hex code? Are the colors wrong when viewing the page in other/multiple browsers? Not quite sure I'm envisioning your issue correctly.

0 Likes
1,333
Reply
Danielle_Wong
Level 8 - Community Advisor Level 8 - Community Advisor
Level 8 - Community Advisor
‎08-10-2017 07:15 AM
‎08-10-2017 07:15 AM

Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

Thanks Jim.

Yes, in live preview within Brackets, the background colors are showing up distorted (almost inverted, but not sure). And when I paste the code in browser-based editors like HTMLiveCode - Browser-based editor for HTML/CSS/JS prototyping , it also happens.

but after looking further into it, the color attributes are being defined in head tag, and not within the html. For example, to style a cell for a button, the html is:

<td bgcolor="${Section3BtnBGColor}" style="background-color:${Section3BtnBGColor};font-weight: 700;  line-height: 18px;  font-family: 'Noto Sans Japanese', sans-serif; font-size: 14px; display:block; text-align: center;  vertical-align: middle; color: #ffffff; display: block; padding:10px 40px ;font-weight:bold;" valign="middle">

And then the corresponding style is found just under the <head> tag:

<meta class="mktoColor" id="Section3BtnBGColor" mktoname="Section 3Btn BG Color" default="#FF8C00" />

Not sure why this template was designed this way, but Marketo is able to read the code correctly and show the colors as expected, while all other editors do not.

0 Likes
1,333
Reply
Jim_Thao7
Level 9
Level 9
‎08-10-2017 09:41 AM
‎08-10-2017 09:41 AM

Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

I see.  This is probably because the ${Section3BtnBGColor} references are unique to Marketo and doesn't have anything to do with general HTML.  Therefore, when viewing the code outside of Marketo, some other color is going to render. 

0 Likes
1,334
Reply
Danielle_Wong
Level 8 - Community Advisor Level 8 - Community Advisor
Level 8 - Community Advisor
‎08-10-2017 10:49 AM
‎08-10-2017 10:49 AM

Re: Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor

Thanks again Jim. That makes sense. I didn't know the reference was Marketo-specific. I will have to figure out the best way to use code that has these references in Brackets.

0 Likes
1,334
Reply
Home