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.
Related
I'm trying to build a subscribe form on wordpress theme. The inputs only have border-bottom, which I have styled in css. However, when I try to repeat the same operation for input:focus, the border remains unchanged. How do I resolve this problem?
footer input:focus {
border: none;
border-bottom: 0.1vmin solid honeydew;
}
When everything else fails you can always play it dirty with
!important
footer input{
border-bottom:2px solid red!important;
}
footer input{
border-bottom:2px solid #000;
}
footer input.test{
border-bottom:2px solid blue;
}
<footer>
<input class="test" type="text">
</footer>
Tags marked by important overrule pretty much everything else.
First, when you are checking in the devtools, make sure you actually have the input focused, otherwise the :focus style rules won't show in the devtools list. Then scroll down the list and check if your css rule is anywhere in the list (it may be lower down if it is overriden). If it isn't, check that you are using the correct css selector. If the selector is definitely correct, you probably aren't loading the styles correctly.
Ok, here is the code I grabbed from http://MKVCage.com when checking out the source code, they are using the same WP theme as me, but are using the PRE as the 'class' for this, I wish to use something that is easy to insert from the 'Creating Post' section (I assume 'pre' worked for them):
pre {
font-family:Open Sans;
font-weight:400;
display:block;
font-size:13px;
white-space:pre;
white-space:pre-wrap;
border:1px solid #ededed;
background:#FCFCFC;
-webkit-box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
-moz-box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
box-shadow:0 2px 5px 1px rgba(0,0,0,0.25);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
line-height:22px;
padding:8px 10px
}
the original site: http://www.mkvcage.com
My Site: http://tvepisodes.me
Both Wordpress Sites are using the free "heiro" theme
I wish to have the same 'boxes' that only present themselves on say when a certain TAG or CODE or shortcode is entered...Any help please.
I'm using PRE at the moment, but I noticed HTML/VISUAL is no longer available on WP Postings, does anyone know of a HTML Plugin that will bring the WYSIWYG/HTML tabs back please (request #2)
Thanks everybody, but I decided to go with the PRE tags in the post to accomplish this, as far as I can see with creating a whole new shortcode just for this, and the <p> tag is already taken for other normal paragraphs, I went with how mkvcage.com does it, maybe I will come back to it later...
For now It WORKS & I'm happy with the research & outcome so far!
I'm trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:
As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.
I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?
Code in question:
HTML example of a button:
<td class="headerlinks">
<img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}
</td>
CSS of the buttons:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
Are you using a CSS reset? You can try the following one.
http://meyerweb.com/eric/tools/css/reset/
Also it's better to use a background-image for the icon, and set a position on it.
This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.
This will work if you maintain the static font-size.
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>
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.