I've got a problem getting my html email to render properly on Mac Mail client. Basically a white strip ~20px wide appears on the right hand side of the display.
This is a html I'm using:
<div style="padding:30px !important; height: 60px; border-bottom: 10px solid #07d7ed;">
<div style="width:100%">
<div style="float:left">Logo</div>
<div style="float:right">Some Text</div>
</div>
</div>
Any ideas, why this happened?
divs are not supported everywhere and often come with their own styling. Try using a table instead:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top">
<table width="48%" cellspacing="0" cellpadding="0" border="0" align="left">
<!--Use less than 50% width to account for outlook which adds space to floated tables -->
<tr>
<td align="left" valign="top">Logo</td>
</tr>
</table>
<table width="48%" cellspacing="0" cellpadding="0" border="0" align="right">
<!--Use align instead of float to account for older browsers and outlook which don't handle floats correctly-->
<tr>
<td align="left" valign="top">sometext</td>
</tr>
</table>
</td>
</tr>
</table>
Try this and see if it fixes your problem. If not, see if you can post a screenshot.
Related
if I apply conditon class style won't render
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" class="cta-test">
<tr>
<td align="center">
test
</td>
</tr>
</table>
<![endif]-->```
Literally just ran a test with this code and it worked fine.
Three tests.
To replicate your issue
Mimicking your issue but without the conditional code surrounding it, to see if there is any difference
Another inline test for comparative testing.
All rendered as expected.
.cta-test { border:1px solid red; }
<!--[if mso]>
<table border="0" cellspacing="0" cellpadding="0" class="cta-test" style="width:200px;">
<tr>
<td align="center">
test
</td>
</tr>
</table>
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" class="cta-test" style="width:200px;">
<tr>
<td align="center">
test 2
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid blue; width:200px;">
<tr>
<td align="center">
test 3
</td>
</tr>
</table>
The issue could be the specific CSS property you're trying to apply as tables aren't always the best option for applying styles.
What is it you're trying to do with that CTA in Outlook?
After a couple days of trying to figure this out via my own research, I've officially given up and have come to you experts for help.
I have a client who is requesting the following image be used for their email signature with phone number, email and website clickable, so I've resorted to slicing it up and going that route because image mapping isn't working when being sent from his Mac, although it works on his Mac when I send it via Gmail.
They are using Outlook on a Mac for their business. I'm testing this on Outlook via PC and on other clients via EmailOnAcid before delivering the end-product and having the following problems:
Outlook sent to Outlook
Outlook to Gmail
Outlook to Outlook w/ Line-Height: 0
Outlook to Gmail w/ Line-Height: 0
So essentially, everything initially looks great when sent from Outlook to Outlook, but those annoying horizontal gaps occur in Outlook to Gmail.
When I do the line-height trick, Outlook to Outlook now collapses upon itself while Gmail is now looking good.
I've tried all the tricks here - https://www.emailonacid.com/blog/article/email-development/12_fixes_for_the_image_spacing_in_html_emails - and elsewhere to no avail.
FYI The code might not be very consistent anymore because I've tried a bunch of different things, but it should give you an idea. Also, the resulting image is a bit over twice the size as what I need due to making things high-resolution in the end.
Any help would be super-appreciated... Thanks!
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try style="border-collapse: collapse !important;" on every TD element and table. That will be your first step.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have had some luck with this template in Outlook before. Frankly, I am not sure why. What I do to make it work is to open this in Word, copy and paste into Outlook. Dunno, Give it a try?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
<style type="text/css">
body {
background-color: #ffffff;
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 5px;
top: auto;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 0px 0;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .content div center a {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<blockquote>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</blockquote>
</div>
</div>
</body>
</html>
have problem like in title. Have email template, everything are ok, but background image doesn't work on outlook. Unfortunately most people in my country use it. Below my code:
<!--#subject Email - Header #-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}
<!-- Start Image Background -->
<table class="image-background" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="22262b" background="http://met.ivycommerce.eu/glamoura_main_image.jpg">
<tr>
<td class="image-background" align="center" style="background: url('http://met.ivycommerce.eu/pattern.png') 0 0 repeat">
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<!-- Start Three Column -->
<tr>
<td>
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="center" align="center">
<a href="{{store url=""}}">
<img style="display: block; margin: 0 auto;"
{{if logo_width}}
width="{{var logo_width}}"
{{else}}
width="165"
{{/if}}
{{if logo_height}}
height="{{var logo_height}}"
{{else}}
height=""
{{/if}}
src="{{var logo_url}}"
alt="{{var logo_alt}}"
border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Start Three Column -->
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="60">
<tr>
<td class="separator-line" bgcolor="#ffffff" height="1"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td class="colored-heading" align="center" height="28">
<div style="line-height: 28px;">Nasza Misja</div>
</td>
</tr>
<tr>
<td class="heading" align="center" height="28">
<div style="line-height: 28px;">To uśmiechnięci Klienci</div>
</td>
</tr>
<tr>
<td class="separator-10" height="10"> </td>
</tr>
<tr>
<td class="sub-heading" align="center" height="24">
<div style="line-height: 24px;">Dziękujemy, że dołączyłeś do wielkiego grona Bionaturalnych.</div>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="button" align="center" valign="middle" height="38" width="140">
Wejdź Do Sklepu
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image Background -->
<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tr>
<td valign="top" class="container-td" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
<tr>
<td valign="top" class="top-content">
<!-- Begin Content -->
I was try with some code, but not success :( when background are ok, rest align left, but have to be center. Can somebody help me?
Outlook generally requires old school type programming and has a lot of things that are not permitted in email that are allowed in website programming. This means that the style works best when included in the header and background images cannot be used. If you want to use a background image, say behind a title for example, you would need to create the title and background as a single image to insert as you would any other image. The downside to this is that Outlook will not download images unless the user specifies to do so. Since a majority of your users use Outlook, best practices says to program for them and then test it across all other browsers. Here is a list of issues identified by Mailchimp, an email service provider, that specifically pertain to Outlook and what fixes, if available, can be performed. http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook.
In reviewing your code provided, here are some other things that I think you might want to consider:
Use fixed measurements instead of percentages;
Instead of using code for spacing, use a 1px x 1px transparent or background colored image that you can adjust the height and the width of to make the space work the way you want;
Put all styles at the top in css format, for example:
<style type="text/css">
body{
margin:0;
padding:0;
font-family:"Trebuchet MS", arial, sans-serif;
}
</style></head>
I have been programming email newsletters for almost ten years now and the most simple, basic code works the best when the majority of your users have Outlook. Finally, I recommend that you always run your code through an html validator, such as https://validator.w3.org/ to check your code. Even the smallest error can result in unanticipated results with Outlook or other browsers.
Zydol,
To make this work, you will need to use VML to create an object and assign the background image to that. You can read more about this technique here: https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
I do believe Bulletproof Backgrounds is the answer you're looking for!
https://backgrounds.cm/
I'm trying to make a nice HTML button for my email (don't want to use images), and I took the initial design idea from Facebook, the button renders nicely in my browser, but not in Outlook. Does anyone know what I can do to fix it?
The design is on our site, and the code for the button is as follows:
<td valign='middle' style='width:92px;padding-left:0px;text-align:right;white-space:nowrap; !important'>
<div style='height:32px !important;'>
<a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#3b5998;text-decoration:none;'>
<table cellspacing='0' cellpadding='0' width='100%' height='33' style='border-collapse:collapse;border-width:1px;border-style:solid;display:block;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;font-size:14px;border-color:#2C729E;height:33px !important;'>
<tbody>
<tr><td height='7' colspan='3' style='line-height:7px;'> </td></tr>
<tr>
<td width='16' style='display:block;width:16px;'> </td>
<td width='100%' style='text-align:center;'><a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#2C729E;text-decoration:none;display:block;'><center><font size='3'><span style='font-family:Helvetica Neue,arial,sans-serif;font-style:normal;white-space:nowrap;font-size:14px;'><strong>Get PDF</strong></span></font></center></a></td>
<td width='16' style='display:block;width:16px;'> </td>
</tr>
<tr><td height='7' colspan='3' style='line-height:7px;'> </td></tr>
</tbody>
</table>
</a>
</div>
</td>
But when it renders in Outlook it looks like this:
I don't care about the rounded edges, but I would like the height to work properly. Does anyone know how I can fix this? I've tried forcing the height with no luck.
Try this:
<table width="92" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="33" valign="middle" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #2C729E; border:1px solid #2C729E;">
Get PDF
</td>
</tr>
</table>
I have the anchor tag on the text instead of around the <td> itself. It has been a long time since I tested it that way, so I just posted what I know works.
Also, you do know that javascript can't be used in html email right? You'll have to execute that stuff server side before sending.
I had to edit existing custom template in MailChimp service where drag&drop of content blocks isn't working. Template had a lot of nested tables so I contacted their support with response that some of block are nested and it might cause conflicts. To make simple test case scenario I removed most of code, styles and left just one repeatable block with one editable header inside.
I was doing everything as mentioned in this part of documentation.
According to article, on edit screen after clicking on this double arrow some kind of yellow bar should popup but there was nothing happening. I tried to click and drag it.
Question here is how make replicable and draggable content block on MailChimp.
My code below.
<body leftmargin="0" marginwidth="0" topmargin="0" style="color: #fff;" marginheight="0" offset="0">
<center>
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top" id="bodyCell">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
<td align="center" valign="top" style="padding-right:33px; padding-left:33px; text-align: left;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateLectures">
<tr>
<td valign="top" style="padding-top:10px; padding-bottom:10px; font-size: 12px;">
<h3 class="imagereplacement" style="text-indent: 100%; white-space: nowrap; overflow: hidden;padding-bottom:10px;"><img src="http://gallery.mailchimp.com/42cd17e5e3c7c6f9274766dc5/images/lectures.png"><span style="display: block !important;">Lectures</span></h3>
<div mc:repeatable="lecture" mc:variant="lecture" class="single_event">
<h5 mc:edit="lecture_event_title">Koloman Moser In Context</h5>
<h6>Thursday, May 23</h6>
<p class="eventtitle">Christian Witt-Dörring</p>
<p class="eventtext">Curator, Koloman Moser, Designing Modern Vienna 1897–1907</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // END TEMPLATE -->
</td>
</tr>
</table>
</center>
</body>
Save your template. After go in campings, create new camping, click next, after this choose your template, and after this you can drag your blocks and save changes if you want.