Background image for email template

Designing a email template might be tought, as the email template need to be done in table approach not the regular divs , i found that the fatest way to do it with dreamweaver also you could use any editor you may want to use .

Note: i had a problem that i have a background image for the body of the email template if i add it to the css like ( background: url(path) ) that would not work

Note: you could use mail chimp to send test emails and test the emails template u have done ( http://kb.mailchimp.com/article/why-should-i-send-tests-of-my-campaign-it-looks-good-in-the-preview )

http://mailchimp.com/ )

the best way i found for solving that is to use the following : http://emailbg.net/

that allow us to to add a background to the email , so

  1. i upload the bg image to my server
  2. replace the link for the bg with mine
  3. put the code prvovided as in the link

you way refer also to this question : http://stackoverflow.com/questions/12970143/how-make-background-image-on-newsletter-in-outlook

Chosen plugin jquery

Sometime you will need to disable a field and make it enable on the previous field is change and chosen option in it , you can achieve that by doing the following


<select data-placeholder="Type of services" class="chzn-select" style="width:172px" id="os_services">
 <option value=""></option>
 <option value="personal">Personal</option>
 <option value="buisness">Buisness</option>
 </select>
 <img src="img/tip.png" alt="tip" class="tooltip" width="17" height="17" title="<b>Personal:</b> a professional translator translates your personal (non-business) documents.<br/><br/><b>Business:</b> a translation that has been checked by a qualified proofreader to minimize the frequency of error."/>
 <select data-placeholder="Type of document" class="chzn-select" style="width:172px" id="os_type" disabled>
 <option value=""></option>
 <option value="General">General</option>
 <option value="Legal">Legal</option>
 <option value="Technical">Technical</option>
 <option value="Literary">Literary</option>
 <option value="Marketing">Marketing</option>
 <option value="Medical">Medical</option>

 </select>
 </div>

 


// Remove the disable from the type of service when selected value changed
 $('#os_services').chosen().change(function(){
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 var service = $(this).find("option:selected").text();
 switch(service)
 {
 case 'personal':
 $("#os_type").attr('disabled', true).trigger("liszt:updated");
 break;
 case 'Buisness':
 $("#os_type").attr('disabled', false).trigger("liszt:updated");
 break;

 }
 });

 


// original form in the html not the one div with chosen plugin
// all the trick goes in the trigger function to update the chosen again after certain action happened

$("#original_form_field").attr('disabled', true).trigger("liszt:updated");

for more information please review the following :

https://github.com/harvesthq/chosen/issues/67#issuecomment-2170256

Good video for the chrome developer toolbar

Background Image across browsers ?

you may look for the following link :

Updated : 

I tried the jquery plugin and it worked fine with all browsers

01/11/2013

To add Ribbon or image on the top corner of page ?

To add picture to the right top corner of the website — Just change the path below

<img border=”0″ id=”corner-ad” src=”http://example.com/path/image.jpg&quot; width=”222″ height=”111″ />
<style>
#corner-ad
{

display: block;

width: 222px;

height: 111px;

position: fixed;

top: -16px;

right: -70px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

#corner-ad
{

top: -80px\9;

right: -70px\9;

*right: -70px;

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);

-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;

zoom: 1;

}

</style>