Dave_Roberts
Level 6
Ann Arbor, MI
Developer
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|
270
Posts
219
Likes
31
Solutions
Tuesday
I see you're already using custom HTML in the label to create the <p> and <h4> tags - could you wrap those in a <div> and assign the background-image and properties inline instead?
Here's the code I see on the page right now for the first checkbox option with the "Opening Address" title line:
<label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0">
<p class="session-title">Opening Address</p>
<p class="session-time">9:30am - 10:15am </p>
<h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4>
</label>
*note: check out the <h4> - looks like there's a little code error at the end of that line ^^
It looks like you've got some padding (1.2em) set on the labels using CSS, you might need to remove that so you could add it instead to a <div> just inside the label. Take this HTML for example:
<label for="mktoCheckbox_4535_0" id="LblmktoCheckbox_4535_0">
<!-- ::::::: add this <div> with the background and padding inline instead :::::: -->
<div style="background-image: https://marketing-oceania.global.fujitsu.com/rs/836-MOZ-238/images/ActivateNow_Agenda_Image-9.jpg; background-size: cover; background-repeat: no-repeat; background-position: top center; padding: 1.2em;">
<p class="session-title">Opening Address</p>
<p class="session-time">9:30am - 10:15am </p>
<h4 class="txt_info sdec">Fujitsu ActivateNow 2020 Keynote <h 4=""> </h></h4>
<!-- ::::::: close the <div> here :::::: -->
</div>
</label>
... View more
Saturday
Hey Dan,
If you've got Bootstrap running in your template, you could start with any of the copy/paste carousel options you get for free with Bootstrap: https://getbootstrap.com/docs/4.5/components/carousel/
It's a little trickier to set them up w/ 3 "columns" showing and then only scroll one "column" at a time, but it's much easier to do a group of 3 and scroll 3 at a time. You'd just need to replace the HTML inside the "carousel-item" with a row and 3-cols that held your speaker cards.
There's also a tabbed interface that you could use for the three orange buttons here: https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior - you could nest a carousel in each "tab-pane" and then hide/show the different panes using the buttons at the top. You'd need to do a little work to customize the HTML and CSS, but the scripting is all setup and is class-based so it's easy to copy/paste more HTML in there to create or remove cards.
This'll work in the Marketo editor as well, so it's really easy for someone to come in and update. It'll show up (and scroll) in the LP editor, so you can use the built-in nav to scroll thru the different "slides" and click in to edit each of them as needed.
... View more
a week ago
1 Like
It's not the best or cleanest (or my favorite) process, but we've done this in the past by pulling the HTML from the preview panel of the Email Editor and then editing that HTML in a code editor to relink a few things like image paths and links that render differently in the Preview panel than they do in the actual email. A common example of this is images get their URL path substituted to a proxy image path that needs to be re-pointed to the actual image in Marketo.
The advantage of using the Preview panel is that Marketo renders out all the variable values into the HTML so you get a "clean" set of code instead of what you'd get from the EDIT CODE pop-up (which has the raw variables still) or the email template (which also has the variables).
*Note this requires someone familiar w/ email HTML to kinda clean the code that you'd grab from the inspector when you Preview an email in the Email 2.0 editor.
In this way, you're not grabbing the code from your inbox with all your personalized stuff, but it take a little more leg work to clean up.
It's might also be important to note that once an email hits your inbox, not only does it contain data and information relative to your specific 'account' but the code itself changes and becomes degraded to the standards of whatever inbox you're using. In this case, Outlook isn't the most friendly inbox and needs some specific code to do pretty standard stuff still so it'll toss out everything that it doesn't like or recognize and what you end up with in your inbox (or as a forward) is actually a DIFFERENT set of code than what you sent from Marketo -- like not only are the variables and all that rendered out, but when you look at the footprint of the code it's different than the code you sent from Marketo. Oh.... the joys of ESPs.
... View more
a week ago
Would it be possible to share a link to a page with a form using the correct setup and a page with a cloned form that's not working correctly? This would make it possible to dig into the code in the inspector to see if there's anything missing on the front-end side.
Also, after you clone a form, are you able to see the Custom CSS on the new form, or is that reset to be blank w/ just the commented line about adding styles here? If the Custom CSS is coming thru on both forms (the first and the cloned versions) it might have something to do with the context in which the form appears. There's usually a couple of layers of CSS to work thru/around, maybe sharing a link to a few pages would help bring an issue like this to light.
You might also try using a cloned version of the form on the same page as the first version of the form (where you know it's working and showing up as expected) to see if it's the form or the page which might be causing a difference in the display.
Thanks,
Dave
... View more
a week ago
Hey Nick,
If you look at the CSS toward the bottom, there's a section with a /* button */ label just above the responsive styles (copied below for reference).
You'll notice a few CSS comments in there (ex. /* commented text here */ ) to help point out the individual lines of code that are related to the button styles like background color and color (text).
There's two sets here, the top set is for the regular state of the button and the bottom is for the hover state of the button.
To change the colors, you'll just need to replace the existing hex code with your new color code.
form.mktoForm button.mktoButton {
display: inline-block !important;
background: #1595a3 !important; /* button bg color */
color: #fff !important; /* button text color */
border:2px solid transparent !important; /* button border color */
padding: .5em 2.75em;
font-size:1.2em !important;
line-height:1.2em !important;
}
form.mktoForm button.mktoButton:hover {
background: #fff !important; /* button bg color on hover */
color: #1595a3 !important; /* button text color on hover */
border-color: #1595a3 !important; /* button border color on hover */
}
Let me know if there's anything else I can help out with as you put this together, and thanks for checking it out, glad it was helpful 🙂
... View more
a week ago
1 Like
The CSS 'order' property within a 'display:flex;' parent container will allow you to adjust the display order of items inside the container. https://www.w3schools.com/cssref/css3_pr_order.asp
Assuming you had some HTML like this (where the content comes before the form in the document):
<div style="display:flex;">
<div class="contentElement">Some content here</div>
<div class="mktoForm" id="Form" mktoName="Form"></div>
</div>
You can then use some responsive breakpoints and do something mobile-first in CSS like:
/* this will stack the form ABOVE the content */
div.mktoForm {order:0;}
div.contentElement {order:1;}
/* this will reverse the display order for tablet and desktop displays */
@media screen and (min-width:768px) {
div.mktoForm {order:2;}
div.contentElement {order:1;}
}
... View more
a week ago
I definitely agree that it's easier to style a label inside a row or column or fieldset where you can append a selector to the parent element. In the case of having different label styles for different field types, you shouldn't need to target rows, columns or fieldset specifically, albeit easier to do something like that if you can.
In terms of performance, speed may not be the only factor worth considering - I'd agree they're pretty close in terms of that. If you looked at something like what happens where there's an error (ie "future proofing") I think there are some significant trade offs with a script which modifies the form and a set of styles in terms of what could go wrong to "break" the functionality of the form submission process compared to the aesthetic. Sure, you could screw up the CSS pretty bad and break the UI but it'd be harder to actually "break" it with CSS. FWIW, issues with future proofing probably aren't something you've got to consider very often b/c your stuff is legendary but I see quite a few things come across in the support space that aren't so carefully considered.
... View more
a week ago
You could add a class (or any html) to the individual label (and display text for radio/checkboxes) from within the form editor. Alternately, you could use a fieldset to create a 2nd "set" of label styles and apply a fieldset around elements to style then a different way.
... View more
a week ago
This is a case where you'd probably want to create a division between ALL field labels and then field labels inside a fieldset. For example, if you had 1 select and 10 text inputs, you could put the one with fewer (select) into a fieldset and then write the CSS to style all labels and then override that with a more specific selector (fieldset > label.mktoLabel) to target the labels inside a fieldset. This does require that you setup the form structure differently, but that's all available to the Marketer to configure which lowers the overall bar to entry to put something like this into play or maintain the solution as new forms and conditions are created down the road.
Using this type of approach, you could even have some select fields inside a fieldset and others outside a fieldset and the same field type would have 2 "sets" of styles depending upon the context in which it appeared rather than just 1 set of styles for both (eg not using a fieldset as a selector).
Alternately, you can add HTML into the label for the select fields on your form and then tap into a new class to style your labels as many different ways as you'd like.
For example, you could add the highlighted HTML into the select field "Label" input and then write some CSS against that class on the form's Custom CSS or a global stylesheet or something like that.
Both of these solutions do require a bit more setup on the form itself (using native features), for some folks that's a better solution b/c it's easier to manage in house and for others it's a pain b/c there's alot to do and it'd be easier to have a script(s) to handle this kinda stuff.
Generally when Im troubleshooting someone else's code I find that it's much more confusing for classes to be appended/removed from the form elements b/c what you see and setup in Marketo isn't necessarily what you get on the other end which means looking for a script that's doing "something" in the middle. Another reason I prefer a CSS approach (especially if your form styles are contained on a global stylesheet) is that the styles are available before the form renders so you don't get any kind of "blink" on a slower connection between when the form loads on the page and the script runs to strip/change the classes where you can observe the difference between the old and new css based on the selectors changing in the background once the form is rendered on the page.
If you're comfortable using the script Sanford put together (and it looks like that did the trick) that's probably the most straight-forward solution here to be sure.
... View more
a week ago
1 Like
...looks like you've got this moving in the right direction already, but here's an alternate approach to this issue that's worked for me, for anyone else who's running into a similar situation in the future...
While you can add layers of scripting to update classes, etc on the form elements, you should be able to achieve similar results with just plain ol' CSS that'd work for both cases here (for stuff shown at first, and stuff added later on).
In the case of being able to target a checkbox label vs an input, it might look something like this:
form.mktoForm input[type=email], form.mktoForm input[type=text] ... {
/* input styles here */
}
form.mktoForm label {
/* target ALL labels on your form - use this to style the "Display Text" (aka label to the right of the checkboxes input) for your checkboxes field type specifically then override this basecoat with a more specific selector below */
}
form.mktoForm label.mktoLabel {
/* target field labels that are NOT inside a checkboxes (or radio) field type - this will override the basecoat above an apply instead to ONLY the labels that appear above or to the left of your inputs */
}
If you look at the elements on a form, you'll notice that the labels for the checkbox and radio field types are a bit different than the rest of the labels which usually appear above or to the left of the input (based on the setting in the form editor). The difference is that the "Display Text" (what shows up to the right of the input) is a <label> but it lacks the class ".mktoLabel". By isolating this difference you can independently target the labels differently to do something like hide the "actual" labels but still show the Display text for checkbox and radio field types. Alternatively, you can accomplish something similar (create a difference between ANY two fields) by placing one of them into a fieldset and writing the CSS selectors to something like "label.mktoLabel" and "fieldset label.mktoLabel" -- this would create a set of styles for ALL labels and a set for labels INSIDE a fieldset.
Let me know if there's anything else you're having trouble targeting, as far as Im aware there is a way to specifically target any input type or label on a Marketo Form without needing to maintain an add'l layer of scripting to modify the form elements (although it does make writing the CSS easier if you're more comfortable with scripting than styling). If not, I'd love to see what I'm missing to see if there is a way to figure it out. Overall, the page's performance might be slightly better in terms of consistency and speed using CSS compared to firing another script once the form loads, renders, submits, etc.
... View more
4 weeks ago
What's odd is that everything else in the section that's hidden for large screens (or vice versa) EXCEPT the form works...it's just the Marketo form that has the issue...
Technically, it's NOT working - hidden elements are still loaded in the DOM so for example a mobile user who loads your page loads all of the hidden sections as well (consuming more data and delaying the load time of your page all the same), they just do not display once they're loaded on the page b/c of the CSS. Here's a stackOverflow question that has some more info about this: https://stackoverflow.com/questions/15565586/css-displaynone-does-it-still-load-all-content-inside-the-dom#:~:text=To%20your%20question%2C%20yes%2C%20CSS,contents%20should%20not%20be%20loaded.
This is what's making the form load twice, b/c you do actually have it twice in the DOM even tho "hiding" a section appears to remove it, the way WP and these theme plugins works, it's not actually removing that content, you'd need something more sophisticated like AJAX to handle those types of situations. It looks like you've got one form on the page now and Im not seeing the double-form issue, but there is some issue with the form overlapping the element on the right side of the page there. You can adjust your form columns, fieldwraps and inputs to a fluid width (100%) rather than a fixed width with some CSS like this:
.mktoForm .mktoFieldWrap, .mktoForm .mktoFormCol, .mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField {
width: 100% !important;
}
This'll adjust the columns, fieldwraps and inputs (except checkbox and radio) to be the same width as the column with the form. You could add this to the form's Custom CSS or somewhere in your CMS that you can add/modify your theme CSS.
Otherwise, I think you're on the right track here - it looks like you're hiding the image in the right column for mobile and showing a different one above the form instead - that might be the better way to work around the forms here by showing/hiding the content elements rather than the form.
... View more
4 weeks ago
Sounds like you're running into one of the issues with this approach to web development - simply creating add'l sections (mobile, tablet, desktop) that have different content or styles isn't really a good way to go about making mobile-friendly websites, even though it looks easy on TV.
Even when you "hide" content sections they are still there at the code-level which means your mobile-users are usually getting WAY more than they'd need (from a code perspective) for a good mobile-experience. A more "best-practice" approach is to use a mobile-first code base - which means you code everything for mobile and then use media queries for screen sizes to change things up for tablet and desktop which are generally more "capable" of loading larger files quickly. I think this is just the cost of using a tool like Wordpress or a themed plugin to do the development work for you.
In this case, it looks like you're running into the same issue Sanford mentioned a little earlier in this thread with the 2 + 2 = 4 forms showing. Because the form is on the page twice, it's loading twice in each container.
One idea to kinda work around this in Wordpress might be to only use 1 form on the entire page (including "hidden" sections) and find a way to put the form in it's own section so it would be independent of the content sections switching on/off based on your screen size.
Im not sure if you're able to turn the individual elements inside the row on/off like you can the entire row (section) but if you could, maybe you could build it all into one row and then show/hide different parts of that row around the form "element" (which wouldn't have any on/off stuff)?
... View more
a month ago
I haven't seen something like this before when it's setup right, but I'd need to see the code you're using for this email to be sure (both in the default case and then in the dynamic content case to compare). Sounds like something is breaking with the buttons to render black-on-blue -- the default "link blue" would appear if it were simply failing to read the button styling. Buttons are kinda tricky to do right in Email and there's a ton of "cheap" solutions out there, so my hunch is that this has something to do with the way it's setup. I've seen these kind of really bold (blue, black, bright green, and pink) colors come thru when ${variables} are used inline in an editable area and/or are not translated from their variable syntax, for example, if you grab the variable-ized Marketo code and tried to pull it up locally to work on it outside of Marketo and those variables weren't getting substituted out.
I think Marketo EM 2.0 itself is different enough than "the other stuff out there" that you'll really want to work with someone who is familiar with Marketo to a degree that they understand things like Dynamic Content. Would it be possible for you to reach out to the vendor and ask them to evaluate the error here - maybe it's something they can learn from and build on for the future, but they might have the best insight into what's not working since they coded it up in the first place.
Alternately, if you can post the code for you email to this thread folks in the community can help look thru it to troubleshoot anything that doesn't get resolved by the vendor.
... View more
a month ago
This could have something to do with the container size here - it looks like you've got a 700px wide container for the bg image and then a centered 600px container in the middle of that. When I check out the screenshot you attached, the email is much wider than 700px (looks about 1000px edge-to-edge in Photoshop on my end) and the image piece is also wider than 700px.
This might have something to do with some of the classes you're using in the head - looks like there's a "table600" class in there which doesn't agree with the 700px width on the container in the Hero banner section.
You might take a pass and try to get all of your widths to be consistent - choose 600 or 700 and try to align all the items with that width instead of mixing them. Since it looks like you're coming out a little short on the width of the banner image, I'd try bumping the nested table that's 600px up to 700px first to see if that works out. The Outlook code you've got in there for bg-images looks right to me, normally when something like this happens there's a difference b/t the Outlook VML and the HTML for the rest of the email universe.
It might also be that the email template is setup to display at 640px based on the note on the image, you might want to check the image you're using there and make sure that it's big enough (or not too big) to fill the space EXACTLY.
If none of that works, it might be helpful to post the rest of the HTML from your template here for review, sometimes it's helpful to see how the variables translate and what classes, etc are tucked into the CSS in the head.
Let me know if changing the width of those elements makes any difference to the render, I'd image you'll be able to see some kind of difference by fiddling around with the fixed widths and sending yourself a test email to compare.
Thanks,
Dave
... View more
08-21-2020
02:26 PM
1 Like
You might need to check that the images are linked to the URL for the image in Marketo, they might be different in BeeFree?
You can find the URL for an image by finding the image in Design Studio in the Images/Files folder and clicking on the filename. This'll bring up another screen to get the URL to the Marketo image.
You can then compare this to the image URLs in your email template, that should look something like:
<img src=" ...your_URL_here... " />
It might be helpful to folks in the community to pitch in here if you can share the code you're using to see this error - maybe the template HTML would be best. You can include HTML in a Community post by clicking the "..." (Expand Toolbar) option in the toolbar and then selecting the "</>" (Insert/Edit Code Sample) button and pasting your HTML into the pop-up dialog box there.
... View more
08-21-2020
12:51 AM
Sure, you wouldn't want to exclude IE users, especially if your target audience is full of IE users, that's pretty straight-forward, but I don't think the 2% (globallly) that are using IE are the issue here, it's more a matter of a fraction of that percent using an OUTDATED version of IE that sounds like an issue here.
Would you recommend optimizing for retired versions of browsers like IE10 and earlier? I've always kinda thought that there's a "cutoff" point in terms of producing backward-compatible code and was under the impression that IE10 and earlier were before that point -- mostly because Microsoft isn't supporting those versions of the browser which means anyone using them is at an ever-increasing risk of security and performance issues as time goes on. I get that you can't "enforce" that orgs use good software, but where do you think the line should be drawn in terms of dealing with antiquated browsers or ESPs?
... View more
08-19-2020
06:36 AM
Hey Bec,
I don't have a solution for this, but I also have a few reasons that I don't worry about optimizing for IE10 with most stuff.
I did a quick Google search for "IE 10 support" and it looks like support for this browser ended at the beginning of the year. I understand that this doesn't exactly solve the issue of folks using an older browser that's no longer support, but it may not be worth trying to support retired versions of browsers, especially IE.
Here's a link to a short list of 628 reasons not to use IE10 because of security issues that arise (and do not get resolved) because of the lack of support from Microsoft: https://www.cvedetails.com/vulnerability-list/vendor_id-26/product_id-9900/version_id-138705/Microsoft-Internet-Explorer-10.html
As far as I'm aware the "modern standard" for IE got accelerated recently and Edge/11 is really the furthest you should have go "back in time" with MS browsers. It looks like 11 and the 1st version of Edge are already slated to roll out next year, here's a link to an article w/ more info: https://redmondmag.com/articles/2020/08/17/end-of-support-ie11-and-edgehtml.aspx
It might be worth looking into running a more secure browser and updating to something more modern where you wouldn't see these types of display errors or be faced with this caliber of security issues. It looks like in the last year, if you rounded up ALL the versions of IE (which includes 11, but not Edge) you'd end up with about 1.7% of the Global Market (https://gs.statcounter.com/browser-market-share#monthly-201907-202007-bar) -- said another way, not too many folks are using IE at all, let alone an unsupported version, so it's not very likely that you'll encounter this problem in the wild (in my experience anyway). Here's a look at the chart on the link above:
For what it's worth, Marketo also does not support IE11, they've made the cutoff at Edge already: https://docs.marketo.com/display/public/DOCS/Supported+Browsers so this might be something worth looking into getting updated if you're using an older browser internally.
Hope this helps in some ways,
Dave
... View more
08-15-2020
04:02 AM
Hey Maci,
Maybe you could try to remove the inline styles that call out the Raleway font instead? It looks like those are located OUTSIDE the editable area so unfortunately you'll need to edit your template to apply this change. Once the template is approved, the new (updated) module will load in the Module Bar but it does not change anything that's already in an email. You'll need to reapprove the EM asset once the template is changed and approved and then go in and drag-n-drop a new module into the canvas to replace the old one and port the content over. Otherwise you'll be seeing the same thing in the module that you had in there before even though you've updated the template code to fix the issue.
Here's an example in your code for the Headline text:
<td class="center" style="font-family: Raleway,Arial, sans-serif; color: ${headlineFontColorwhite}; font-size: ${headlineFontSize30}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}; font-weight: 900">
<div class="mktoText" mktoname="Headline" id="banner1-text2164c0dc-ceb8-49e2-915e-edf1d8a355f5">
<span style="font-size: 38px; color: #ffffff;"><span color="#000000">TESTING THE HEADER FONT </span></span>
</div> </td>
1. It looks like the parent <td> (which looks like it's on the template and not in the email) has a fixed font-weight of 900 to work with the Raleway font that's assigned at the top of the font-stack. Maybe if you were to remove both the "Raleway" from the font family as well as the font-weight:900 here it might help? Ideally, this would be "Arial, sans-serif" for the font-family and "bold" for the font-weight.
2. It also looks like there are variable setup on the <td> to control the color of the text as well as the size of the font (and text-align). You might try also removing the <span> tags inside the editable <div> and using the variables for this module to set the font-size and color instead of doing that in the Rich Text Editor using the little color popup and the font-size dropdown in the toolbar (FWIW, it's almost always better to use the variables than the RTE if you've got the option). It looks like you've got one span that makes it 38px and white and then another inside that which makes the text black. I dont think the spans would change the font-family, but this'll help clean up the code in any case and should be an easier way to adjust the module's text size/color in the future.
It might be safest to clone your EM template to create a version for testing this stuff out so you don't mess with any of your other live assets. From there you could make a few changes and spin up a new email and add the new module to it and send JUST that module off for testing to see if you can really zero-in on the issue here.
If you can post any updated code you're working with along the way it'd be really helpful to see what's changed to help figure out what might be the issue if you're still not seeing this show up.
... View more
08-12-2020
02:41 PM
1 Like
Hey Cecile,
It looks like you're using a "checkbox" field type here and that might be why your label is showing up to the left/above the checkbox rather than to the right of the checkbox. There's another field type, "checkboxes" that has a "Display Value" as well as a field label and the Display Value is what shows up to the right of the input. It seems counter-intuitive to use a "checkboxes" (plural) field type for a single checkbox, but what you actually get is a little different for each field so it's got less to do with "how many" than "do you want the label to the right of the box or above it?".
Once you've got the field changed to a checkboxes field in the form editor, you'll see a link that says "Values" if you scroll down the light blue right column a bit. You'll want to grab the HTML from your label and then click on the Values link to launch a pop-up to edit the values. There's 2 columns for each checkbox, Display Value and Stored Value. The Display Value is where you'll want to paste the stuff you copied from your label, the Display Value is the text that shows up to the right of the input. The Stored Value is what gets sent to back to Marketo.
Once you've got that in place, you can remove the text you have in the label as you should be able to see the text showing up to the right of the checkbox from the Display Value instead.
Let me know if this works the label position out for you, I'd be happy to send along some screenshots or help out more if you get stuck on anything changing the field type and label/display value.
Thanks,
Dave
p.s. I thought it'd be worth mentioning that if the idea is to save some vertical space on the form, you can also use some basic CSS to hide the form labels and use the Hint Text input instead of the Label input to add the "label text" as a placeholder in each of the fields. This way you won't have to sacrifice horizontal space for the sake of saving vertical space.
... View more
08-11-2020
08:58 AM
1 Like
It looks like you're using Arial as a font that's declared with an !important tag at the top of your CSS (above the variable declarations).
I also see a bunch of webfonts that are loaded, but it doesn't look like they're called by any of the elements:
Merriweather:300,400,700,900|
Open+Sans|
PT+Sans:400,700|
Raleway:300,400,500,600,700,800,900|
Roboto:300,400,500,700,900|
Source+Sans+Pro:300,400,600,700,900
There's also two versions of Tahoma that are imported but don't look like they're used in either.
If you actually aren't using these fonts, it might be a good idea to remove them from the template to help prevent confusion and excessive (unused) code.
It might be that the issue here is with using the "Black" (900) font-weight of Arial - aka "Arial Bold" (a different font-family from "Arial") - which is not installed by default on all machines the way the "Arial" (bold/700) weight is. Here's some info I found online that might be helpful to check out: https://stackoverflow.com/questions/50365911/html-email-font-weight-bold-in-outlook-is-not-working
I think what I'd try next is to change the "900" weight to "700" and see if that comes thru more similarly -- this would be the most 'failsafe' approach I can see.
If that's not an option b/c of branding or whatever, you might include the "Arial Bold" font (import -or- via <link>, like the other webfonts you've already got setup) in your template . This still won't render for all inboxes, some ESPs just don't load custom fonts, so it leaves you in just about the same boat, but it'll work "better" for everything else (that does load custom fonts).
That's a good looking template by the way, I like the icons in the Variable Names - that's a nice touch 😉
... View more
08-07-2020
06:33 PM
I've been able to accomplish this by using the FIELDSET wrappers as the "pages" and then adding some custom HTML pagination in a RICH TEXT area. You'll also need a JS layer like Sanford mentioned to handle the pagination. I found it was easiest to check that each field on each "page" that is required was valid before exposing the "NEXT" button. You can use the "disabled" property if you're actually using buttons there and then check after a field is changed (via script) if there are required fields that are not valid, and if not, remove the disabled property from the NEXT button.
... View more
08-07-2020
06:23 PM
Well.....not exactly modular like Email maybe, but there's no reason someone couldn't build out a Module Library that works in a modular way to compliment a Guided Landing Page template 😉
... View more
08-07-2020
06:22 PM
2 Likes
In general, you'll want to use Guided Landing Pages instead of Free Form landing pages. The Free Form LP option is a legacy option for building pages so it still exists, but the Guided Pages are more capable and as far as I know there isn't anything you can't do on a Guided page that you could do on a Free Form page, albeit the editor experience is a little different.
The way video stuff works on the Guided LPs is by including a video container (mktoVideo) in your LP template. This is what populates the area in the editor that allows you to add a video element. If you wanted to add more videos in more places, you could edit the LP template to include new "mktoVideo" containers in different spots on the page. Here's a link to the Marketo Docs on the video containers for LPs: https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template#CreateaGuidedLandingPageTemplate-Video Beyond using the "plug-n-play" video container, you can also add video to any HTML section by using the embed code you'd get from a service like YouTube. By default, this'll be fixed in size (based on the iFrame) but you can add your own video container around the video to handle the responsive behavior.
I use Bootstrap a lot in my builds and they've got a handy container that works for this purpose, here's a look at the code I use with Bootstrap 4.5, I think the "embed-responsive embed-responsive-16by9" classes are backward compatible to Bootstrap 3.X as well. You'll find more info on the embed-responsive container at Bootstrap here: https://getbootstrap.com/docs/4.5/utilities/embed/
<div class="embed-responsive embed-responsive-16by9 mb-3">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y2Ky3Wo37AY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
*Note the width and height parameters on the iframe don't really matter in this context, the "16by9" part of the container class is what proportionally sizes the iframe inside the container.
... View more
08-05-2020
09:55 PM
I've seen something like this as well when I've been paring down and renaming the modules in a template, I think it has something to do with that -- I can't remember a time I've encountered this on a "new" template. It might have something to do with changing the names or id's of the modules and editable areas that gives Marketo fits in the Module Preview pane.
If it doesn't go away in time, you might try taking all of the code in your template and creating a new template to paste it all into and then populating an email using the new template to see if there's any difference in the module panel.
Otherwise, I haven't run into any "real" issue with this in testing in the past so I've been comfortable to chalk it up to a "Marketo thing" when it does happen.
... View more
07-31-2020
09:10 PM
You might also look into creating different modules that'd let you add/remove modules from a layout rather than show/hide elements inside a "section". You can get pretty granular with modules and always build 'redundant' modules that have more or less parts to work around using display toggles but this can make for a lot of modules pretty quickly if it's something you use often.
If you're working in a 1-column layout, you might think about breaking out the different elements of each section into their own module and then stacking those to create a different layout. This might look like a headline (h1) module, a paragraph module, a button module, an image module and so on... This would allow you to add/remove modules from a layout but it doesn't work with a 2-column layout - that's where you'd have to create the redundant modules with/without the add'l bits.
... View more
07-23-2020
03:40 PM
1 Like
I think you might need to add the class into an optional parameter on the parent .mktoImg div which will write the class to the image when it renders.
Try this instead maybe:
<div class="mktoImg" id="Readmore3Image" mktoName="Third Read more Image" mktoImgClass="card-img-top">
<img src="https://info.thewebsite.com/rs/911-BEG-887/images/planogram-readmore.png" alt="several images of store display shelves">
</div>
https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template
... View more
07-08-2020
08:26 PM
Good to see the width issue get ironed out. I know Im a little late to the party here but I did notice one more little thing that you might think about putting into play to shrink up the add'l space of "empty" (hidden) fields. As-is, there's a margin on the bottom of each form row and when you hide a bunch of the rows you end up with a very large vertical gap in the form. In the screen below, I first REMOVE the 10px of margin-bottom in the CSS (that can also be set to 0px) and then ADD the same 10px margin-bottom to the .mktoFieldWrap element instead. This fieldwrap doesn't show up on the hidden fields until they're shown so you don't end up w/ any extra space like you do when the margin is on the rows. The .mktoFieldWrap element is the parent to the label and input elements in the form architecture and any input must be contained in a row so it works out about the same (and even better if you ever do 2-col layouts b/c you get the margin below EACH field instead of one margin below both fields when the columns stack).
Hope this reaches you in time to get it in play alongside the other changes, let me know if you've got any questions about the code provided or whatever.
... View more
06-26-2020
05:20 AM
You might try adding the "CTA Align" variable ${CTA-align} on the actual <td> for your button. It looks like you've got it on the parent <table> and the parent <td> to that table, but maybe putting it on the <td> as well would help align that <td> inside the <table>? It's been a while, but I think I remember some versions of Outlook "preferring" the inline attribute align="center" over something like style="text-align:center".
I can't tell without running some tests, but you might also want to check and make sure that table is showing up at 100% width so that there's room for the button to get pushed to the right. If it weren't reading the full width of the table, it might actually be right-aligned but in a short row so it looks left or center. An easy way to do this would be to change the bg-color of the parent elements (table and td) to something loud like bright-green and then send a test to make sure the colored boxes span the width of your email body.
... View more
06-03-2020
08:38 AM
Hey Jo,
It looks like there's a mixed bag of support for media queries on Desktop Outlook apps. These links are to an article from last year (so there might be more current info) but it looks like everything except Outlook 2007-16 will read the media queries on desktop.
https://blog.campaignmaster.co.uk/2019/02/05/outlook-com-to-support-media-queries-enhanced-accessibility/
https://campaignmaster.co.uk/resources/css-support-on-email-clients/
You might think about using a mobile-first approach for the media query stuff b/c desktop is inherently more capable than mobile of rendering more complex stuff. Rather than writing the media query to a "max-width" (so basically it contains your "mobile" set of styles) you might think about using a "min-width" (so it contains your "desktop" set of styles) and instead putting the code for desktop inside a media query. I've run into a ton of headaches in the past trying to work around a desktop-first approach b/c it gets really tangled down the line b/c you're trying to do more (use a media query) with less (email on mobile is less capable).
... View more
06-03-2020
08:25 AM
1 Like
This is usually accomplished by adding a hash and the id="" value of the section you'd like to link to into the URL.
For example, if you wanted to drive to https://www.example.com and there was a section on the page with an id value of "mySection" you wanted to jump to, you'd append "#mySection" to the URL above: https://www.example.com#mySection
The HTML for the section would need to look something like this:
<div id="mySection">
...
</div>
... View more
Public Statistics
| Date Registered | 04-04-2016 05:33 PM |
| Date Last Visited | yesterday |
| Total Messages Posted | 270 |
| Likes Received | 216 |
Likes given to
| User | Count |
|---|---|
| 67 | |
| 2 | |
| 2 | |
| 13 | |
| 1 |
.png)