I'm creating an email template and, when testing things on Email on Acid, the Samsung Mail version converts all dates and the word "Today" into an hyperlink. Obviously none of these are actually coded as one.
Any ideas on how to prevent this?
Try adding this to your CSS. This is the most common styling override for that very issue on Samsung Mail.
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
Related
I was reading through this website https://experience.sap.com/fiori-design-web/label/ and saw this:
So I was like "Sweet let's try it out!" and added required="true" to my label:
<Label required="true" text="E-Mail"/>
and this is what I got:
How do I bring the asterisk to the left side?
I'm using v1.81.0
The asterisk used to be on the left side but the new Fiori design guideline requires it to be on the right side which is implemented in UI5 since 1.73. Here is the related commit: https://github.com/SAP/openui5/commit/11544b855407af6f1025e8a855dc46701648779d.
The new design for sap.m.Label requires the asterisk
to be in the right side of the label.
The picture in the guideline page is outdated.
As the latest version of UI5 targets the latest Fiori design guidelines, I'd discourage from using any custom CSS which often leads to inconsistent UI and higher maintenance costs.
We faced a similar dilemma in one of our recent projects. We had no choice but to override the standard css. It is not suggested to override the standard CSS but it sure can be taken into account as a last resort.
As we wanted this property to be enabled for all the labels in the project we did override the standard CSS. You can also provide a custom class and override. Below is the css to remove the "*" from the right and place it on the left of the text.
.sapMLabelRequired:before {
content: "*";
color: #c14646;
font-family: "72", "72full", Arial, Helvetica, sans-serif;
font-size: 1rem;
font-weight: bold;
position: relative;
vertical-align: middle;
line-height: 0;
}
.sapMLabel.sapMLabelRequired .sapMLabelColonAndRequired:after {
content: "" !important;
}
I have created an email template for our site. When I look that email template in outlook 2013, I'm getting collapsed layout. But, I'm getting expected email template in other mail clients like gmail, etc.
I'm aware, outlook renders using "Microsoft word engine", but i couldn't figure out where i go wrong with my code. Here is the code i have used
.header img{
margin-left: 25px !important;
margin-top: 46px !important;
vertical-align: center;
}
.footer-social-links{
float: right;
margin-right: 20px;
margin-top: 15px;
}
Outlook doesn't recognize margin with a lowercase m. Furthermore it has buggy support for margin. As an example, there's no support for margin-top.
https://www.campaignmonitor.com/css/box-model/margin/
For a top margin replacement, consider using line-height or a spacer table.
Good luck.
I'm working on a blog page for a site that's currently running on Joomla 1.5 (slowly rolling out upgraded templates but I need this one to work in the meantime).
I'm using the Facebook like box and have the Facebook header set to 'false' I've got the module title set to show, but it's not appearing on the page. The Facebook code is set in a custom module and I have several other custom modules on the page with functional titles.
I've got the same set up on a separate blog page in Joomla 3 that is working without issues. Is this just a lack of compatibility with Joomla 1.5?
Here's the page for your review http://discoverestevan.com/index.php?option=com_content&view=category&layout=blog&id=22&Itemid=455
Not the most elegant solution, but I ended up using an ID within the module that applied to the 'header' space of the Facebook widget. Note that I could not leave it the default ID name or it applied the title styles to a checker div at the top of the page with the same ID name.
I used :before to write the title text in via CSS. The final CSS code looks like this:
#fb-head {
background: rgb(212, 31, 60); /*Logo Colour: #b31c27*/
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 10px;
margin-right: -2px;
}
#fb-head:before {
content: "Find Us on Facebook";
color: white;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
line-height: 20px;
font-weight: bold;
}
With this custom module code:
<div id="fb-head" class="hidden_div"> </div>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/CJ1280-Radio/168180086627809?ref=ts&fref=ts" data-height="513px" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"> </div>
I've got a very strange bug in the Mailbox app when rendering an email, when you click on it it start to zoom out very slowly until the height of the email is shown...
There's a gif of it happening here:
http://mailrox.s3.amazonaws.com/bloggif_542959bc3de42.gif
A video here:
http://mailrox.s3.amazonaws.com/mailbox-zoom-bug.mov
And here's the HTML of the whole email, does anyone know what's triggering this slow zoom of the email?
http://jsfiddle.net/az1eryu4/
<body style="background: #FFFFFF; color: #000000 !important; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin: 0px 0 0 0px; min-width: 100%; padding: 0px 0 0; width: 100%" bgcolor="#FFFFFF">
the reset of the HTML is on JSfiddle becuase there's too much to put here and it needs to be previewed.
The fix for this is to remove the 100% body width which occur in three places: header css, inline css and the width attribute.
You may also need to remove the 100% width from the html tag and the first table tag.
As 4th of October 2014 it looks like Mailbox has been updated, not to remove this, but the zoom animation has been sped up. So if you want to stop the zooming you'll need to remove the 100% widths.
I want to do this
This is select drop down of form
My code is
HMTL
<select>
<option>Country</option>
<option>India</option>
<option>USA</option>
</select>
Css
select{
width:197px;
height:45px;
border:solid 1px #13669b;
box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
background:rgba(256,256,256,0.7);
color:#13669b;
font-size:16px;
font-family: 'LatoBold';
padding:0 14px;
line-height:45px;
}
I want to this only pure css. How?
There is no way to create a dropdown box like that with pure css (yet).
You can create your own js/css dropdown plugin or use one of the many jQuery/css plugins already available.
I am not sure if there is EASY cross browser way to do it but if you with combination of CSS + jQuery, you can get it working in all browsers in use:
Reinventing a Drop Down with CSS and jQuery
See the tutorial on how to do it and modify the CSS for the look you want.
Screenshot:
This solution works with pure CSS but it's Chrome-related. See the following example:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Haven't tried to replace the -webkit prefix by a -moz one for it to be compatible with Firefox browsers, it might actually work as well, you should give it a go.
Dropdowns are implemented differently in different browsers, and styling is not widely supported. This has it's reasons. For one: consider the dropdowns on iPads/iPhones. They work radically different than desktop application dropdowns.
If you want a styled dropdown, you will have to build it yourself with lists and javascript. Or use one of numerous libraries available for this (which is further proof that no pure CSS solution is available).