Copying and Pasting HTML Code from Marketo Template into Brackets (code editor); colors are not displaying correctly in editor | Community
Skip to main content
Danielle_Wong
Danielle_Wong
Community Manager
August 9, 2017
Solved

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

  • August 9, 2017
  • 1 reply
  • 2884 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jim_Thao7

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. 

1 reply

Jim_Thao7
Jim_Thao7
New Participant
August 9, 2017

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
Danielle_WongAuthor
Community Manager
August 10, 2017

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
Jim_Thao7Accepted solution
New Participant
August 10, 2017

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. 

Terms & ConditionsAccessibility statement

Loading footer...