SOLVED

Re: 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

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?

1 ACCEPTED SOLUTION

Accepted Solutions
Jim_Thao7
Level 9

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

4 REPLIES 4
Jim_Thao7
Level 9

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.

Danielle_Wong
Level 8 - Community Advisor

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.

Jim_Thao7
Level 9

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. 

Danielle_Wong
Level 8 - Community Advisor

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.