I am sending a email using form values. I created email template using so many css classes. When I sent email, found that no one class is applied in email template.
I search for solution of this issue but not found satisfactory answer. Is any one know, how to apply css classes for email template.
I am using CodeIgniter framework and creating email in a action "sendemail". Here is sample code.
<style>
.head{
border: 2px solid black;
padding: 5px;
}
</style>
<div class='head'>
Hello World !
</div>
Please let me know if there is any solution.
In email templates css classes will not affect you have write inline style to html tags like
<div style='border: 2px solid black;padding:5px;'>Hello World !</div>
Related
I'm building HTML email templates for a CMS and am wondering if it is possible to define what the preheader of the email is.
The email preheader is the portion of the email that appears right after the email subject on your email provider. Very useful on mobile devices, the user catches a glimpse of what the email is about. It is usually the first text content of the email that defines it.
Currently, on my HTML email design I have a header template, body template and a footer template. And my preheader gets defined by the header template; the first text content that appears is in the header and is the website name/logo, creating redundancy in the email design.
Any ideas of how to get around this?
Sonu Yadav shared the perfect and clever solution to this problem (thanks). And for the sake of documentation, the solution presented on the link shared by Sonu Yadav is below.
Basically, you add the text your want your preheader to be before all content in the <body> tag and use CSS to hide it.
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>
...
If your logo is the first thing being rendered in your email, the cleanest way (without having to rely on styles) is to place the preheader text in the image alt tag, e.g.:
<img src="https://s3.amazonaws.com/my-assets/logo.png" alt="My preheader text." >
I have a variable
$mail_body = array(
'text/html' =>
'<style> .fb_term { font-weight:bold;
border-bottom: 1px solid #999999;
}</style>' );
and inside my code I do this
$mail_body['text/html'] .= $a;
$a ='How <span class="fb_term" >Assist</span> me Please <span class="fb_term" >Grad</span>'
I get the mail but the styling is not done,
What could be the problem?
The problem could be e-mail HTML, which is notoriously difficult to style. Don't use classes, use inline styles for every bit of CSS.
How <span style="font-weight:bold; border-bottom: 1px solid #999999;" >Assist</span> me Please <span style="font-weight:bold; border-bottom: 1px solid #999999;" >Grad</span>
What mail browser did you use to test output (Gmail, Hotmail, Yahoo or Outlook)? Are you sure they all support style tags? Are you sure they all support the css directives you used for your elements.
I suggest you take a look at this site, it has some test data on css directives and mail browsers. And use directives in-line not in a style tag. For example:
<div style="background-color:black;color:white"></div>
Also make sure you mark the correct mail header Content-Type as text/html. If it is just text, it wont be rendered correctly.
I am writing a Blog module, and sanitize the blog_post at INPUT with
$this->form_validation->set_rules('blog_data', 'Blog Post', 'trim|required|min_length[5]|xss_clean');
Now that the input has been sanitized I have lost the HTML styling, Can anyone recommend a way to get the styling back to show the blog post in the original styling as posted by the user?
If sanitizing the HTML data at OUTPUT (instead of INPUT) is a good practice then how do people retain the original styling?
For example, wordpress is storing HTML data of user blogs in original form with all styling tags intact (raw HTML). But it must be sanitizing it during output. Then how does it retain the original styling?
How to do it in codeigniter? Please help I have been banging my head for 3 days now .:/
Followup- #Damien Pirsy -
Original code obtained from sql-db:
<img src="http://localhost/lok/images/63a9f0ea7bb98050796b649e85481845/11342974127.jpg" style="cursor: default; height: 208px; float: left; margin: 0px 10px 10px 0px; ">
Output Obtained on web-browser:
<img src="http://localhost/lok/images/63a9f0ea7bb98050796b649e85481845/11342974127.jpg" default; height: 208px; float: left; margin: 0px 10px 10px 0px; ">
Using "htmlpurifier" with CodeIgniter. The img src styling is unaffected now.
This is somewhat a very peculiar situation to me. Am not sure yet as to why this is happening but here goes. I have a particular div tag with class="sidehead" This class has some style attached as shown below
<style>
.sidehead {
background: none scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>
Now the purpose of this div is style the header of every item in the sidebar. however when I add 2 back to div's the blue color gets smeared over the previous div also. I am not sure as to why this is happening.
You can check the flawed effect on http://mashup2.sunnydsouza.com. Just check the sidebar and you will realize what i am talking about. The 2 items I am talking about are fetched using include() statements in php. They are the same scripts called twice.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br>';
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
Can someone please help me solve this problem. Dunno why the blue color spreads over the first div also :(
It appears the problem is related to the floated items under the headings.
Try making that br one that clears, eg. <br style="clear:both">.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br style="clear:both">'; //CHANGE HERE
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
This works for me when I change it in the inspect element console with Chrome.
Each of the elements brought in by your include statements have a style of 'float: left'. Removing them, (under 'Most Activities' and 'Recent') does the trick.
I examined it quickly, though I did not pin-point the exact error, I notice a lot of things you can do in order to improve code quality and ease debugging your error.
Firstly, <center> is, I believe, deprecated. Use <p align="center"> or use CSS instead.
Secondly, <br> is wrong, it should have been <br></br> , or alternatively <br />, although this is likely to be ignored by most browsers, it is not W3C compliant, and it is important to create a good habit.
Thirdly, your CSS is everywhere, this is bad. You see, there are three ways to do CSS,
(1) inline
<div style="some css here" >
(2) external file
<head> <link ...."yourCss.css" > </head>
(3) document-wide
<head> <style>some css here </style></head>
Avoid using all three methods, all mixed up, in different locations. Generally the best way is to use class and id to identify all elements you want to style, then have their css properties defined in an external CSS.
The problem seems to be CSS scope, the above methods each has different "scoping priority", so having them mixed up really complicate the priority of which style is applied to an element. Hope this helps.
//border-radius: 15px 15px 15px 15px;
above css style ignore
Use below
/*border-radius: 15px 15px 15px 15px;*/
Not sure but only css problem, its working
Removing float:left; from the Most Popular Articles container worked for me in Firefox.
Here is the site http://www.2playermode.com/
You notice the login button. it has the nice black background done by css. How can i replicate that. I have php statements with them or some are just play links..
I have a register , lost password , and logout and admin that i need done same way. This is wordpress platform if that helps any.
Here are the code for some of them Once you login you will see them but here is code that should help.
here is some of the code
Lost your password?
here is more complicated
Log out | <?php if (current_user_can('manage_options')) { echo '' . __('Admin') . ''; } else { echo '' . __('Profile') . ''; } ?>
I have been trying different options to get the same result but come up failing. As you see the admin url and profile url i need to have same images but that is only shown once logged in.
Just read the CSS on the page (copied and pasted):
input[type="submit"] {
cursor: pointer;
}
input, textarea, select, fieldset {
color: #D1D1D1;
border: 2px solid #202020;
background: #111;
}
input, textarea {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-family: Arial;
font-size: 9pt;
padding: 5px;
}
* {
outline: none;
}
So just add the a-tag to the CSS
Get: http://getfirebug.com/ for FF, or use the console of Chrome (ctrl+shift+j) and inspect the html element for it's css-rules.
For a one-off, custom css is probably the way to go.
But if you're doing a lot of these things, by far the easiest way to style buttons, links, and input=submit elements is jQuery's UI button It's cross-browser tested, validates, and is well-thought out for accessibility. The biggest bonus is that setting it up is just a matter of adding 2-3 classes to any element.
The other thing that makes jQuery UI so great is ThemeRoller. With it, you simple define a style on a simple GUI, upload a file, and voila....styled website elements. I actually use themeroller for most of the elements of my applications, which I can then restyle based on a client's logo colors or preferences with a simple upload. On one app, we even allow the user to switch the theme on the fly via this method. In my mind, you can't beat it.