Background html


(Raine Boyd) #1

Hi, on the html block, how do I change the background color? Thanks


(Raine Boyd) #3

This is great, thank you! It works but oddly the entire block does not show on preview nor in the email test I just sent myself, as if it was not there at all. It just shows in design mode. :neutral_face:


(Martin Cash) #4

Sorry, I didn’t actually test it and you’re right, it doesn’t work. But the following code will. It will not look right in the builder, but it will come through fine when you send it. Also, I deleted my previous post so as not to confuse anyone with bad code.

<div style="background-color:lightblue">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>


(Raine Boyd) #5

perfect! Thank you so much!


(Raine Boyd) #6

Hi there, not sure if I need to open a new thread for this but feels like falls under this one still.
I’m trying to add my own custom social media images with the html block. I used the same code that worked for the text - div style - but it disappears in the email test even thou shows in the design mode. Any ideas why it would work for one and not the other?


(Martin Cash) #7

Hi, @Raine_Boyd. If you post your code I could take a look.


(Raine Boyd) #8

Thank you! They are all for specific reshares instead of just follows in social media. Here is how it looks like in the design editor {which disappears when I send the email to myself} and below is the code:


(Raine Boyd) #9

Sorry, here is the code again:

<div align="center"><a href="mailto:yourfriend@example.com?subject=Such%20an%20awesome%20new%20blog!&body=I%20think%20you%20will%20love%20it%20as%20much%20as%20I%20do.%0D%0ATake%20a%20peek!%0D%0A%0D%0Ahttp://limetreefruits.com/newsletter/%0D%0A"><img src="http://limetreefruits.com/wp-content/uploads/2013/11/postcard100.jpg" width="50" /></a>

<a href="http://www.facebook.com/share.php?u=http://www.limetreefruits.com/newsletter/"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsFacebookResized.jpg" width="50" /></a>

<a href="http://clicktotweet.com/8UlcY"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsTwitterResized.jpg" width="50" /></a>

<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Flimetreefruits.com%2Fnewsletter&media=http%3A%2F%2Flimetreefruits.com%2Fwp-content%2Fuploads%2F2013%2F11%2FDream-Chasing-Pinterest.jpg&description=A%20FREE%20Dream%20Chasing%20Game%20Plan!%20http://limetreefruits.com/newsletter/" data-pin-do="buttonPin" data-pin-config="none"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsPinterestResized.jpg" width="50" height="45"/></a></div>


(Martin Cash) #10

So I figured out why the HTML code block is confusing everyone, including myself. The builder window is rendering your code in HTML5 but it is actually sent (and previewed) in XHTML. XHTML requires far more strict syntax/structure that HTML. It requires you to do things like close every tag. So for example, your first mailto would look something like this (I don’t know if all of those extra parameters are supported in XHTML?)

<div align="center"><EMAIL mailto="yourfriend@example.com">example@website.com</EMAIL>
        </div>

And to fix your images, you just need to add a closing image tag </img> after your images like the example below.

<div style="background-color:#fff" align="center"><EMAIL mailto="yourfriend@example.com">email@yourfriend.com</EMAIL> <a href="http://clicktotweet.com/8UlcY"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsTwitterResized.jpg" width="50"></img></a></div>

It’s pretty strict and most of your code didn’t work. I would recommend based on your level of customization needs to just build it in Code builder.

image