I am sending an email with Codeigniter 3 configurations'm doing for the mailings in HTML format, here the configuration code.
Mail settings:
$config = Array (
'priority' => 1,
'protocol' => 'mail',
'smtp_host' => 'ssl://smtp.gmail.com',
'smtp_port' => 465,
'smtp_user' => 'email#gmail.com',
'smtp_pass' => 'password',
'mailtype' => 'html',
'charset' => 'utf-8', // iso-8859-1
'wordwrap' => TRUE,
'newline' => "\r\n"
);
Controller:
public function email()
{
$this->load->library('email');
$this->email->from('email#email.com', 'Names');
$this->email->to('email#email.com');
$this->email->subject('Email Test');
$data['nombre'] = 'Example';
$body = $this->load->view('email/test.php',$data,TRUE);
//$this->email->attach("/assets/images/logo.png", "inline");
$this->email->message($body);
if ($this->email->send()) {
return true;
} else {
return false;
}
$this->email->clear(TRUE);
}
View - Default email template Foundation:
<!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="width=device-width"/>
<style>
#outlook a {
padding: 0;
}
body {
width: 100%!important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100%!important;
line-height: 100%!important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
}
center {
width: 100%;
min-width: 580px;
}
a img {
border: none;
}
p {
margin: 0 0 0 10px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse!important;
}
table, tr, td {
padding: 0;
vertical-align: top;
text-align: left;
}
hr {
color: #d9d9d9;
background-color: #d9d9d9;
height: 1px;
border: none;
}
table.body {
height: 100%;
width: 100%;
}
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
table.row {
padding: 0px;
width: 100%;
position: relative;
}
table.container table.row {
display: block;
}
td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}
table.columns, table.column {
margin: 0 auto;
}
table.columns td, table.column td {
padding: 0px 0px 10px;
}
table.columns td.sub-columns, table.column td.sub-columns, table.columns td.sub-column, table.column td.sub-column {
padding-right: 10px;
}
td.sub-column, td.sub-columns {
min-width: 0px;
}
table.row td.last, table.container td.last {
padding-right: 0px;
}
table.one {
width: 30px;
}
table.two {
width: 80px;
}
table.three {
width: 130px;
}
table.four {
width: 180px;
}
table.five {
width: 230px;
}
table.six {
width: 280px;
}
table.seven {
width: 330px;
}
table.eight {
width: 380px;
}
table.nine {
width: 430px;
}
table.ten {
width: 480px;
}
table.eleven {
width: 530px;
}
table.twelve {
width: 580px;
}
table.one center {
min-width: 30px;
}
table.two center {
min-width: 80px;
}
table.three center {
min-width: 130px;
}
table.four center {
min-width: 180px;
}
table.five center {
min-width: 230px;
}
table.six center {
min-width: 280px;
}
table.seven center {
min-width: 330px;
}
table.eight center {
min-width: 380px;
}
table.nine center {
min-width: 430px;
}
table.ten center {
min-width: 480px;
}
table.eleven center {
min-width: 530px;
}
table.twelve center {
min-width: 580px;
}
table.one .panel center {
min-width: 10px;
}
table.two .panel center {
min-width: 60px;
}
table.three .panel center {
min-width: 110px;
}
table.four .panel center {
min-width: 160px;
}
table.five .panel center {
min-width: 210px;
}
table.six .panel center {
min-width: 260px;
}
table.seven .panel center {
min-width: 310px;
}
table.eight .panel center {
min-width: 360px;
}
table.nine .panel center {
min-width: 410px;
}
table.ten .panel center {
min-width: 460px;
}
table.eleven .panel center {
min-width: 510px;
}
table.twelve .panel center {
min-width: 560px;
}
.body .columns td.one, .body .column td.one {
width: 8.333333%;
}
.body .columns td.two, .body .column td.two {
width: 16.666666%;
}
.body .columns td.three, .body .column td.three {
width: 25%;
}
.body .columns td.four, .body .column td.four {
width: 33.333333%;
}
.body .columns td.five, .body .column td.five {
width: 41.666666%;
}
.body .columns td.six, .body .column td.six {
width: 50%;
}
.body .columns td.seven, .body .column td.seven {
width: 58.333333%;
}
.body .columns td.eight, .body .column td.eight {
width: 66.666666%;
}
.body .columns td.nine, .body .column td.nine {
width: 75%;
}
.body .columns td.ten, .body .column td.ten {
width: 83.333333%;
}
.body .columns td.eleven, .body .column td.eleven {
width: 91.666666%;
}
.body .columns td.twelve, .body .column td.twelve {
width: 100%;
}
td.offset-by-one {
padding-left: 50px;
}
td.offset-by-two {
padding-left: 100px;
}
td.offset-by-three {
padding-left: 150px;
}
td.offset-by-four {
padding-left: 200px;
}
td.offset-by-five {
padding-left: 250px;
}
td.offset-by-six {
padding-left: 300px;
}
td.offset-by-seven {
padding-left: 350px;
}
td.offset-by-eight {
padding-left: 400px;
}
td.offset-by-nine {
padding-left: 450px;
}
td.offset-by-ten {
padding-left: 500px;
}
td.offset-by-eleven {
padding-left: 550px;
}
td.expander {
visibility: hidden;
width: 0px;
padding: 0!important;
}
table.columns .text-pad, table.column .text-pad {
padding-left: 10px;
padding-right: 10px;
}
table.columns .left-text-pad, table.columns .text-pad-left, table.column .left-text-pad, table.column .text-pad-left {
padding-left: 10px;
}
table.columns .right-text-pad, table.columns .text-pad-right, table.column .right-text-pad, table.column .text-pad-right {
padding-right: 10px;
}
.block-grid {
width: 100%;
max-width: 580px;
}
.block-grid td {
display: inline-block;
padding: 10px;
}
.two-up td {
width: 270px;
}
.three-up td {
width: 173px;
}
.four-up td {
width: 125px;
}
.five-up td {
width: 96px;
}
.six-up td {
width: 76px;
}
.seven-up td {
width: 62px;
}
.eight-up td {
width: 52px;
}
table.center, td.center {
text-align: center;
}
h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
text-align: center;
}
span.center {
display: block;
width: 100%;
text-align: center;
}
img.center {
margin: 0 auto;
float: none;
}
.show-for-small, .hide-for-desktop {
display: none;
}
body, table.body, h1, h2, h3, h4, h5, h6, p, td {
color: #222222;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 {
word-break: normal;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 20px;
}
body, table.body, p, td {
font-size: 14px;
line-height: 19px;
}
p.lead, p.lede, p.leed {
font-size: 18px;
line-height: 21px;
}
p {
margin-bottom: 10px;
}
small {
font-size: 10px;
}
a {
color: #2ba6cb;
text-decoration: none;
}
a:hover {
color: #2795b6!important;
}
a:active {
color: #2795b6!important;
}
a:visited {
color: #2ba6cb!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #2ba6cb;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #2ba6cb!important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: #2ba6cb!important;
}
.panel {
background: #f2f2f2;
border: 1px solid #d9d9d9;
padding: 10px!important;
}
.sub-grid table {
width: 100%;
}
.sub-grid td.sub-columns {
padding-bottom: 0;
}
table.button, table.tiny-button, table.small-button, table.medium-button, table.large-button {
width: 100%;
overflow: hidden;
}
table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
display: block;
width: auto!important;
text-align: center;
background: #2ba6cb;
border: 1px solid #2284a1;
color: #ffffff;
padding: 8px 0;
}
table.tiny-button td {
padding: 5px 0 4px;
}
table.small-button td {
padding: 8px 0 7px;
}
table.medium-button td {
padding: 12px 0 10px;
}
table.large-button td {
padding: 21px 0 18px;
}
table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 16px;
}
table.tiny-button td a {
font-size: 12px;
font-weight: normal;
}
table.small-button td a {
font-size: 16px;
}
table.medium-button td a {
font-size: 20px;
}
table.large-button td a {
font-size: 24px;
}
table.button:hover td, table.button:visited td, table.button:active td {
background: #2795b6!important;
}
table.button:hover td a, table.button:visited td a, table.button:active td a {
color: #fff!important;
}
table.button:hover td, table.tiny-button:hover td, table.small-button:hover td, table.medium-button:hover td, table.large-button:hover td {
background: #2795b6!important;
}
table.button:hover td a, table.button:active td a, table.button td a:visited, table.tiny-button:hover td a, table.tiny-button:active td a, table.tiny-button td a:visited, table.small-button:hover td a, table.small-button:active td a, table.small-button td a:visited, table.medium-button:hover td a, table.medium-button:active td a, table.medium-button td a:visited, table.large-button:hover td a, table.large-button:active td a, table.large-button td a:visited {
color: #ffffff!important;
}
table.secondary td {
background: #e9e9e9;
border-color: #d0d0d0;
color: #555;
}
table.secondary td a {
color: #555;
}
table.secondary:hover td {
background: #d0d0d0!important;
color: #555;
}
table.secondary:hover td a, table.secondary td a:visited, table.secondary:active td a {
color: #555!important;
}
table.success td {
background: #5da423;
border-color: #457a1a;
}
table.success:hover td {
background: #457a1a!important;
}
table.alert td {
background: #c60f13;
border-color: #970b0e;
}
table.alert:hover td {
background: #970b0e!important;
}
table.radius td {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table.round td {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
body.outlook p {
display: inline!important;
}
#media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto!important;
height: auto!important;
}
table[class="body"] center {
min-width: 0!important;
}
table[class="body"] .container {
width: 95%!important;
}
table[class="body"] .row {
width: 100%!important;
display: block!important;
}
table[class="body"] .wrapper {
display: block!important;
padding-right: 0!important;
}
table[class="body"] .columns, table[class="body"] .column {
table-layout: fixed!important;
float: none!important;
width: 100%!important;
padding-right: 0px!important;
padding-left: 0px!important;
display: block!important;
}
table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column {
display: table!important;
}
table[class="body"] table.columns td, table[class="body"] table.column td {
width: 100%!important;
}
table[class="body"] .columns td.one, table[class="body"] .column td.one {
width: 8.333333%!important;
}
table[class="body"] .columns td.two, table[class="body"] .column td.two {
width: 16.666666%!important;
}
table[class="body"] .columns td.three, table[class="body"] .column td.three {
width: 25%!important;
}
table[class="body"] .columns td.four, table[class="body"] .column td.four {
width: 33.333333%!important;
}
table[class="body"] .columns td.five, table[class="body"] .column td.five {
width: 41.666666%!important;
}
table[class="body"] .columns td.six, table[class="body"] .column td.six {
width: 50%!important;
}
table[class="body"] .columns td.seven, table[class="body"] .column td.seven {
width: 58.333333%!important;
}
table[class="body"] .columns td.eight, table[class="body"] .column td.eight {
width: 66.666666%!important;
}
table[class="body"] .columns td.nine, table[class="body"] .column td.nine {
width: 75%!important;
}
table[class="body"] .columns td.ten, table[class="body"] .column td.ten {
width: 83.333333%!important;
}
table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven {
width: 91.666666%!important;
}
table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve {
width: 100%!important;
}
table[class="body"] td.offset-by-one, table[class="body"] td.offset-by-two, table[class="body"] td.offset-by-three, table[class="body"] td.offset-by-four, table[class="body"] td.offset-by-five, table[class="body"] td.offset-by-six, table[class="body"] td.offset-by-seven, table[class="body"] td.offset-by-eight, table[class="body"] td.offset-by-nine, table[class="body"] td.offset-by-ten, table[class="body"] td.offset-by-eleven {
padding-left: 0!important;
}
table[class="body"] table.columns td.expander {
width: 1px!important;
}
table[class="body"] .right-text-pad, table[class="body"] .text-pad-right {
padding-left: 10px!important;
}
table[class="body"] .left-text-pad, table[class="body"] .text-pad-left {
padding-right: 10px!important;
}
table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop {
display: none!important;
}
table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop {
display: inherit!important;
}
}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
</head>
<body>
<script type="text/javascript">ANCHORFREE_VERSION="413161526"</script><script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(/^(.*,)?(11C)(,.*)?$/g.exec(_AF2$.CT)!=null){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/par.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}document.write("<style type='text/css' title='AFc_css"+_AF2$.RN+"' >.AFc_body"+_AF2$.RN+"{} .AFc_all"+_AF2$.RN+",a.AFc_all"+_AF2$.RN+":hover,a.AFc_all"+_AF2$.RN+":visited{outline:none;background:transparent;border:none;margin:0;padding:0;top:0;left:0;text-decoration:none;overflow:hidden;display:block;z-index:666999;}</style>");})();</script>
<style type='text/css'>
.AFhss_dpnone{display:none;width:0;height:0}
</style>
<img src="about:blank"id="AFhss_trk"name="AFhss_trk"style="display:none"/>
<div id="AFhss_dfs"class="AFhss_dpnone">
<div id="AFhss_adrp0"class="AFhss_dpnone"></div>
<div id="AFhss_adrp1"class="AFhss_dpnone"></div>
<div id="AFhss_adrp2"class="AFhss_dpnone"></div>
<div id="AFhss_adrp3"class="AFhss_dpnone"></div>
<div id="AFhss_adrp4"class="AFhss_dpnone"></div>
<div id="AFhss_adrp5"class="AFhss_dpnone"></div>
<div id="AFhss_adrp6"class="AFhss_dpnone"></div>
<div id="AFhss_adrp7"class="AFhss_dpnone"></div>
<div id="AFhss_adrp8"class="AFhss_dpnone"></div>
<div id="AFhss_adrp9"class="AFhss_dpnone"></div>
</div>
<script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(_AF2$.TOP==1){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/41.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}})()</script>
<table class="body">
<tr>
<td class="center" align="center" valign="top"><center>
<table class="row header">
<tr>
<td class="center" align="center"><center>
<table class="container">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="six sub-columns"><img src="http://placehold.it/200x50"></td>
<td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;"><span class="template-label">HERO</span></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
<br>
<table class="container">
<tr>
<td><table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h1>Hi, Elijah Baily</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<img width="580" height="300" src="http://placehold.it/580x300"></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row callout">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="panel"><p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="three columns">
<tr>
<td><table class="button">
<tr>
<td>Click Me!</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="wrapper"><table class="six columns">
<tr>
<td class="left-text-pad"><h5>Connect With Us:</h5>
<table class="tiny-button facebook">
<tr>
<td>Facebook</td>
</tr>
</table>
<br>
<table class="tiny-button twitter">
<tr>
<td>Twitter</td>
</tr>
</table>
<br>
<table class="tiny-button google-plus">
<tr>
<td>Google +</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
<td class="wrapper last"><table class="six columns">
<tr>
<td class="last right-text-pad"><h5>Contact Info:</h5>
<p>Phone: 408.341.0600</p>
<p>Email: hseldon#trantor.com</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td align="center"><center>
<p style="text-align:center;">Terms | Privacy | Unsubscribe</p>
</center></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
The mail is displayed without style:
Would greatly appreciate your support, thank you very much.
After searching and reading many forums, I found the solution thanks to the community email Foundation among others, I explain here the details for those who can be useful.
Most companies like emails, Gmail, AOL, Hotmail etc ... They clean the tags <style> that they are located within the <head>, this is done to avoid conflicts of CSS, so the solution is to place all inline styles within each label correspodan, example:
<h1 style="font-size: 14px; font-weight: 500;">My title</h1>
Do this for a line is very easy, but when we want a sleek, well crafted template with a very high level of detail, it would be counterintuitive to do this once, for this there is a conversion technique called Emogrifier, which greatly facilitates work, which debmos do is design and layout our base template, with organized and separated styles, to have a well structured and organized page, but same not can send by email, so I mentioned, we have to Emogrifier the sketch prepared by pasting all the HTML and CSS code, and for this there are many tools, here I leave 3 highly recommended, but there are many.
Recommended pages:
http://foundation.zurb.com/emails/inliner.html
http://templates.mailchimp.com/resources/inline-css/
https://www.myintervals.com/emogrifier.php
The email template that you perform should look like this:
<!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="width=device-width"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65;
}
img {
max-width: 100%;
margin: 0 auto;
display: block;
}
body, .body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
a {
color: #71bc37;
text-decoration: none;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.button {
display: inline-block;
color: white;
background: #71bc37;
border: solid #71bc37;
border-width: 10px 20px 8px;
font-weight: bold;
border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 16px;
}
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px;
}
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important;
}
.container table {
width: 100% !important;
border-collapse: collapse;
}
.container .masthead {
padding: 80px 0;
background: #71bc37;
color: white;
}
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
text-transform: uppercase;
}
.container .content {
background: white;
padding: 30px 35px;
}
.container .content.footer {
background: none;
}
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px;
}
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td align="center" class="masthead"><h1>Something Big...</h1></td>
</tr>
<tr>
<td class="content"><h2>Hi Stranger,</h2>
<p>Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table>
<tr>
<td align="center"><p> Share the Awesomeness </p></td>
</tr>
</table>
<p>By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p><em>– Mr. Pen</em></p></td>
</tr>
</table></td>
</tr>
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td class="content footer" align="center"><p>Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p>hello#company.com | Unsubscribe</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
When processing or make the Emogrifier, you should be as follows:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!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" xmlns="http://www.w3.org/1999/xhtml" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef">
<table class="body-wrap" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" class="masthead" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: white; background: #71bc37; margin: 0; padding: 80px 0;" bgcolor="#71bc37"><h1 style="font-size: 32px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; max-width: 90%; text-transform: uppercase; margin: 0 auto; padding: 0;">Something Big...</h1></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white; margin: 0; padding: 30px 35px;" bgcolor="white"><h2 style="font-size: 28px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; margin: 0 0 20px; padding: 0;">Hi Stranger,</h2>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"> Share the Awesomeness </p></td>
</tr></table><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"><em style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">– Mr. Pen</em></p></td>
</tr></table></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content footer" align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white none; margin: 0; padding: 30px 35px;" bgcolor="white"><p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">hello#company.com | Unsubscribe</p></td>
</tr></table></td>
</tr></table></body>
</html>
I recommend if they make many changes Emogrifier not save the template, to make them easier to apply changes and then make the process Emogrifier.
I hope you find it useful.
Thank you very much!
Related
I have a button and I want to make a name of the button disapear when you hover over it. At the same time I want the background to change and show a list on the button.
.buttons{
width: auto;
position:horizontal;
font-size: 0;
background-color: darkslategrey;
border-radius: 10px;
}
.buttons .btn-1{
display:inline-block ;
border-radius: 8px;
background-image: url("/img/teatritood.JPG");
cursor: pointer;
background-size: 100%;
border: none;
padding:none;
height: 30rem;
width: 33.3%;
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 30px;
box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey;
}
.btn-1:hover{
background-image: url("/img/teatritood.JPG");
cursor: pointer;
transition-duration: 0s;
background-size: 100%;
border: none;
padding:none;
width: 30.33%;
height: 30rem;
font-size: 0px;
box-shadow: none;
box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey;
}
.btn-1:hover::after{
display: block;
content: attr(data-hover);
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 38px;
transform: rotateY(180deg);
}
<pre>
<section>
<div class="buttons">
<div>
<button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
<button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
<button type="button" class=btn-3 data-hover="Uus list">Muud</button>
</div>
</div>
</section>
<div class="hidden-list">
<div>
<ul>
<ul><a>Projektid</a></ul>
<ul>Kirjeldused</ul>
<ul>Pildid</ul>
</ul>
</div>
</div>
</pre>
I am having a problem setting a bootstrap-modal as transparent with background opaque text. I tried setting the background color as RGBA, however, it still affects the text making it the same transparency now. I tried defining the background in: .modal-open, .modal-dialog, .modal-content, .modal.in and .modal-dialog — none of those worked.
HTML:
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-title" id="myModalLabel"><h1>ZU</h1></div>
<div class="modal-body">
<p>Do Zore World Tour 2017</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nihil enim aperiam illum nisi tenetur facere quidem possimus libero dolorum, vitae natus cumque? Dolor sapiente fugiat culpa repudiandae, earum quisquam.</p>
</div>
<!-- email sign up form w/ button -->
<div class="container">
<div class="row">
<div class="col-md-6">
<p><form class="form-inline">
<div class="form-group">
<label for="email"></label>
<input type="email" class="form-control" id="email" placeholder="Email address*"><button type="submit" class="btn btn-default">Sign Up</button>
</div>
<div>
</div>
</form></p>
</form>
</div>
</div>
</div>
<!-- email sign up form w/ button -->
</div>
</div>
CSS:
/* modal pop up */
.modal-content {
position: relative;
background-color: rgba(250, 179, 0, 0,6;)!important;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal.body{
background-color: none;
}
.modal-title h1{
font-family:;
font-size: 20.854em;
text-align: center;
color:#fab300;
}
/* modal pop up */
I have updated the CSS file. Please check at the codepen link here:
https://codepen.io/sushantb/pen/mwvzdR?editors=0100
The CSS file now looks like this:
* {
border-radius: 0 !important;
}
body {
background-color: #000;
}
/* LINKS */
a:hover {
color: #ffcc4d !important;
text-decoration: none;
}
a:visited {
color: #fab300 !important;
text-decoration: none;
}
/* LINKS */
/* nav bar custom*/
.navbar-inverse {
background-color: #000;
padding-top: 0px;
padding-bottom: 0px;
border: none;
padding: 0px;
margin: 0px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on navbar*/
}
.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active*/
}
.navbar-toggle{
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #fab300 !important;
border-radius: 4px;
}
.navbar-inverse .navbar-toggle .sr-only .icon-bar{
color: #fab300 !important;
}
/*.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here
}*/
.navbar-inverse .navbar-nav > li > a {
color: #fab300; /*Change active text color here*/
}
.navbar-inverse .navbar-brand > li > a:hover, .navbar-inverse .navbar-brand > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on brand TO FIGURE OUT!!!*/
}
.navbar-inverse .navbar-brand > .active > a, .navbar-inverse .navbar-brand > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active brand TO FIGUER OUT!!!*/
}
/* nav bar custom*/
/* type */
body {
background-color: white;
font-family: Scope One;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {margin-bottom: 1.3em;}
p span {
color: white;
font-weight: 900;
}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-family: Scope One;
font-weight: inherit;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 6.854em;
}
h2 {font-size: 4.236em;}
h3 {font-size: 2.618em;}
h4 {font-size: 1.618em;}
small, .font_small {font-size: 0.618em;}
/* type */
/* modal pop up rgba(250, 179, 0, 0,6;) */
.modal-content {
background-color: rgba(0,0,0,0.6)!important;
position: relative;
opacity: 1.0;
border: 1px solid #999;
border-radius: 50px;
outline: 0;
}
.modal.body{
background-color: green;
}
.modal-dialog {
background-color: white;
}
.modal.in .modal-dialog {
background-color: transparent;
}
.modal-title h1{
font-family:calibri;
font-size: 20.854em;
text-align: center;
color:#fab300;
opacity: 1;
padding-bottom:5px;
}
.modal-title h3{
font-family:inherit;
font-size: inherit;
text-align: center;
color:#fab300;
padding-bottom:5px;
}
.modal-body h3, p{
color: #fab300;
}
.modal-backdrop {
background-color: transparent !important; /* I kept this to show the kind of transparent effect I would like to acheive on tge modal background */
}
/* email sign up form */
.input .placeholder-shown{
color:#fab300 !important;
}
.input .placeholder{
color: #fab300;
}
.form-control{
border-top: none;
border-bottom: 1px solid #fab300;
border-left: none;
border-right: none;
box-shadow: none !important;
width: 65%;
}
.button, .input, .select, .textarea{
color:#fab300 !important
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
.form-inline .btn .btn-default{
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
/* email sign up form */
/* modal pop up rgba(250, 179, 0, 0,6;) */
/* overlay */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: rgba(250, 179, 0,.2;)!important;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #fab300;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* .overlay .btn .btn-primary .btn-lg{
}*/
/* CTA button color override */
.btn-primary, .btn-primary:active, .btn-primary:visited, .btn-primary:focus {
background-color: #fab300 !important;
/* background-color: rgba(250, 179, 0,.6;)!important -- I WOULD LIKE TO HAVE IT TRANSPARENT*/
border-color: #fab300 !important;
font-family: 'Scope One', serif;
font-color:#fff !important;
font-size: 16px;
font-style: bold;
text-transform: none;
color: white;
vertical-align: center;
text-align: center;
}
.btn-primary:hover{
background-color: #ffcc4d !important;
border-color: #ffcc4d !important;
}
/* overlay */
/* Tour - Table */
.table .table-inverse{
border-spacing: 0;
background-color: rgba(250, 179, 0,.6;);
}
.table .table-inverse .td {
padding: 0;
}
/* Tour - Table */
Please review and revert.
Regards,
Sushant
I am currently running Joomla with a custom template which I designed. Most everything is working beautifully, but I am having a major problem with the footer: it appears in the middle of the page if the content is longer than a certain height. I have the footer set to absolute with a bottom value of 0, so I cannot figure out why it would show up like this on some pages. Below is the contents of my template's custom.css and index.php for reference. Please also see the screenshots below. The first shows a page with the footer correctly positioned, while the other two highlight the footer problem. Thanks in advance for any assistance!
custom.css
#charset "utf-8";
/* Wowcrofty's Picture Perfect Custom Layout */
/* CSS Descriptor properties order:
1. Positioning properties
2. Width and height properties
3. Margin and padding properties
4. Border and box properties
5. Background properties
6. Text properties */
/* HTML tag styling */
body {
width: 100%;
height: 100%;
background-color: #FF8000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
a {color: #000;}
a:visited {color: #FF8000;}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
header {
width: 99%;
height: 310px;
padding-top: 20px;
background-color: #000;
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #000;
line-height: 2;
color: #fff;
font-style: italic;
text-align: center;
}
/* Navigation Styling */
nav {
text-transform: uppercase;
}
.navbar-inner {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#000));
background-image: -webkit-linear-gradient(top, #000, #000);
background-image: -o-linear-gradient(top, #000, #000);
background-image: linear-gradient(to bottom, #000, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 18px;
text-shadow: 0 -1px 0 #000;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #FF8000;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #000;
text-decoration: none;
background-color: #FF8000;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
nav .nav-child {
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #FE642E;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 3px 20px;
clear: both;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #fff;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #FE642E;
border-left: 7px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
content: '';
}
nav .nav-child:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #FE642E;
border-left: 6px solid transparent;
content: '';
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #000;
background-color: transparent;
}
/* User Bar Styling */
#userheader {
width: 100%;
min-height: 25px;
max-height: 45px;
padding: 3px 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #BDBDBD;
}
.userdata .control-group{
position: relative;
top: -12px;
left: 0;
float:left;
}
#form-login-remember {
position: absolute;
top: 14px;
left: 340px;
}
form ul.unstyled {
position: absolute;
top: 55px;
left: 10px;
display: none;
list-style: none;
}
.logout {
position: relative;
top: -10px;
left: 55px;
float: left;
}
.search {
position: relative;
top: 6px;
}
/* Component Styling */
.breadcrumb {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #BDBDBD;
color: #000;
}
#componentcontainer {
width: 99%;
height: auto;
margin: 0 auto;
padding: 15px;
border: 2px #000 solid;
background-color: #fff;
}
/* Button Styling */
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #6E6E6E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#6E6E6E));
background-image: -webkit-linear-gradient(top, #000, #6E6E6E);
background-image: -o-linear-gradient(top, #000, #6E6E6E);
background-image: linear-gradient(to bottom, #000, #6E6E6E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#6E6E6E', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #000;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #000;
*background-color: #000;
}
#contentheader {
position: relative;
top: 20px;
width: 55%;
height: 55px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
box-shadow: -1px -3px 2px #CDC7C7;
background-color: #000;
font-size: 36px;
color: #fff;
font-weight: bold;
text-align: center;
}
#content {
position:relative;
top: 35px;
background-color: transparent;
font-size: 36px;
text-align: center;
}
.bodycontent {
position: relative;
top: 175px;
width: 97%;
margin: 0 auto;
padding: 10px 0 20px 0;
border-radius: 10px;
box-shadow: -2px -2px 1px #ADA0A0;
background-color: #FD1115;
font-size: 26px;
line-height: 2;
color: #fff;
text-align: center;
}
/*News Ticker Styles*/
#news {
width: 95%;
margin: 0 auto;
box-shadow: -1px -1px 1px #fff;
background-color: #fff;
color: #000;
}
.date {
margin-top: 10px;
padding-top: 6px;
font-size: 18px;
font-weight: bold;
color: #000;
text-align: center;
}
.headline {
font-size: 24px;
font-weight: bold;
background-color: transparent;
color #000;
text-align: center;
}
.headlinebody {
margin-top: 10px;
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
index.php
<?php
// Wowcrofty's Picture Perfect Photo Custom Joomla Template for v3.3
// Check that the template is being installed in Joomla.
defined('_JEXEC') or die;
// Add Joomla JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap stylesheets
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/wowcroftypictureperfect/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="userheader" class="row-fluid">
<div class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="userinfo" style="html5" /></div>
<div class="span3"><jdoc:include type="modules" name="search" style="html5" /></div>
</div>
</div>
<header class="row-fluid">
<div class="span12">
<img src="templates/wowcroftypictureperfect/images/headerbanner.png" alt="Wowcrofty's Picture Perfect Photo, click to go home." />
</div>
</header>
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</div>
</div>
</nav>
</div>
<div id="componentcontainer" class="row-fluid">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="row-fluid">
<div class="span12"><jdoc:include type="modules" name="breadcrumbs" style="html5" /></div>
</div>
<?php endif; ?>
<?php if ($this->countModules('componentheadermodule')) : ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="componentheadermodule" style="html5" /></div>
<?php endif; ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
</div>
<footer id="footer" class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="bottomnav" style="html5" /></div>
<div class="span3">Copyright © <?php echo date("Y") ?> Matthew Croft. All rights reserved.</div>
</footer>
</body>
</html>
You might try setting the footer div to relative and #footer.span3 to absolute. I'd might try using float somehow too. I usually debug this type of stuff using the Chrome Inspector.
I have created a bell notification icon clicking on which a modal window opens. I want to fade the modal window in and out through CSS. I've done that coding but the modal window is not fading in but its fading out properly.
Here is my code..
function showModal()
{
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}
function hideModal()
{
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function(){document.getElementsByClassName('modalOverlay')[0].style.display = "none"}, 300);
}
#bellNotification
{
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover
{
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip
{
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip
{
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
font-family: 'Palanquin';
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover
{
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp
{
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay
{
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window
{
width: 50%;
min-height: 200px;
background-color: white;
font-family: 'Titillium';
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input
{
color: #4d4d4d;
font-family: 'Palanquin';
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip"><div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" /><input type="button" value="Proceed" />
</div>
</div>
Where is the problem? I can't find.
Also you'll see the modal window is not functioning properly. Clicking anywhere is disappearing the modal window. But that I'll make later. First I want to know why its not fading in??
Try to use CSS animations instead of property transitions. See this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
I've found a solution of this without changing any css..
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
I don't know why this one worked and not the earlier one. But probably I think the browser takes some time (in ms) to render the content when display: block is set. And before complete rendering of content, the fadeIn animation is already started. This might have interfered with the animation and disabling it.
I don't know I'm right or wrong?
Delaying the line which sets the opacity to '1' by a few ms is now working.
Now Run the updated code below and see it works -
function showModal() {
document.getElementsByClassName('modalOverlay')[0].style.display = "block";
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 1;
}, 17);
}
function hideModal() {
document.getElementsByClassName('modalOverlay')[0].style.opacity = 0;
setTimeout(function() {
document.getElementsByClassName('modalOverlay')[0].style.display = "none"
}, 300);
}
#bellNotification {
line-height: 100%;
position: fixed;
top: 0;
right: 10%;
font-size: 40px;
color: gold;
}
#bellNotification:hover {
cursor: pointer;
}
#bellNotification:hover #subscribeTooltip {
visibility: visible;
opacity: 1;
margin-top: 60px;
}
#subscribeTooltip {
visibility: hidden;
position: absolute;
padding: 7px 15px 5px 15px;
background-color: #fff;
color: #1a1a1a;
font-size: 17px;
margin-top: 70px;
opacity: 0;
transform: translateX(-50%);
margin-left: 20px;
transition: all 0.2s ease-in;
}
#subscribeTooltip:hover {
cursor: default;
opacity: 0 !important;
margin-top: 70px !important;
visibility: hidden !important;
}
#triangleUp {
position: relative;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin: 0 auto;
margin-top: -17px;
}
.modalOverlay {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
color: black;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.modalOverlay #window {
width: 50%;
min-height: 200px;
background-color: white;
box-shadow: 0 0 10px #000;
position: relative;
top: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 30px;
transform: translateY(-50%);
}
.modalOverlay input {
color: #4d4d4d;
}
<div id="bellNotification" onclick="showModal();">Bell-icon
<div id="subscribeTooltip">
<div id="triangleUp"></div>Subscribe for our newsletter</div>
<i class="fa fa-bell"></i>
</div>
<div class="modalOverlay" onclick="hideModal()">
<div id="window">
Lorem Ipsum dolor sit amet.
<br />
<input type="email" placeholder="Enter your email to subscribe for our newsletter" />
<input type="button" value="Proceed" />
</div>
</div>
Hello I am working on this design, but there seems to be a problem with the "content-main-text". For some reason, it duplicates itself, (or at least thats what it looks like), one time it shows with 0 px padding, and the second time with 5 px padding (how it really should be displayed).
Here is the Template file code:
<?php
define('IN_PHPBB', true);
$phpbb_root_path = 'foro/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
$user->setup();
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
a:link {
color: #4d9547;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #4D9547;
}
a:hover {
text-decoration: underline;
color: #d02c2c;
}
a:active {
text-decoration: none;
color: #d02c2c;
}
a {
font-size: 1em;
}
h3 {
font-size: 1.7em;
color: #3D372B;
}
h2 {
font-size: 2em;
}
body {
background-color: #484238;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
color: #4F493D;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 0px;
margin-top: 0px;
}
#content-left {
background-image: url(/Images/Backgrounds/Classic%20Template/border_left.gif);
background-repeat: repeat-y;
background-position: left top;
margin: 0px;
}
#content-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_right.gif);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
}
#header {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top.gif);
background-repeat: repeat-x;
background-position: left top;
padding: 0px;
margin-right: 3.5px;
margin-bottom: 0px;
margin-left: 0px;
height: 50px;
}
#header-left {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top_left.gif);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
height: 44px;
}
#header-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top_right.gif);
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 0px;
}
#topnav {
background-image: url(/Images/Backgrounds/Classic%20Template/topnav_bg.gif);
background-repeat: repeat-x;
background-position: left top;
white-space: nowrap;
display: block;
float: left;
height: 24px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
border-top-width: 3px;
border-right-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #4F493D;
border-right-color: #4F493D;
border-left-color: #4F493D;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#Global {
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 13px;
color: #4F493D;
background-color: #E0DACE;
background-image: url(/Images/Backgrounds/Classic%20Template/bg_content.gif);
background-repeat: repeat;
background-position: left top;
width: 100%;
}
#page-header {
clear: both;
height: 15px;
margin-top: 0px;
margin-right: 2.5%;
margin-bottom: 0px;
margin-left: 2.5%;
border: 2px solid #4F493D;
text-align: center;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#navar-top {
margin: 0px;
padding: 0px;
}
#block_header {
background-image: url(/Images/Backgrounds/Classic%20Template/block_top.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
padding: 0px;
clear: both;
height: 5px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#block-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block_left.gif);
background-repeat: repeat-y;
background-position: left top;
}
#block-footer {
background-image: url(/Images/Backgrounds/Classic%20Template/block_bottom.gif);
background-repeat: repeat-x;
display: block;
padding: 0px;
clear: both;
height: 5px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#div {
background-repeat: no-repeat;
background-position: left top;
height: 24px;
}
#div {
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
height: 24px;
padding-top: 0px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 10px;
}
#content-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_right.gif);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
}
#topnav-search {
float: right;
width: 120px;
margin-right: 20px;
padding: 0px;
border: 2px solid #4F493D;
height: 25px;
background-color: #E2DCD0;
}
#footer {
background-image: url(/Images/Backgrounds/Classic%20Template/border_bottom.gif);
background-repeat: repeat-x;
background-position: left bottom;
clear: both;
height: 6px;
text-align: center;
}
#left-column {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-repeat: no-repeat;
width: 15%;
border: 1px solid #484238;
}
#column-left-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-position: right top;
background-repeat: no-repeat;
}
#column-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
}
#column-left {
float: left;
width: 12%;
margin-top: 20px;
margin-right: 2.5%;
margin-bottom: 20px;
margin-left: 2.5%;
}
#column-left-quests {
margin-bottom: 20px;
}
#column-left-title-leftbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-position: left top;
background-repeat: no-repeat;
}
#column-left-title-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-repeat: no-repeat;
background-position: right top;
}
#column-left-title-center {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
margin-right: 13px;
margin-left: 13px;
font-size: 11px;
}
#Global #content-left #content-right #column-left #column-left-quests #column-left-title-leftbg #column-left-title-rightbg #column-left-title-rightbgTrue #column-left-title-center strong {
text-align: center;
}
#column-left-title-mainbox {
margin-bottom: 50px;
border: 1.5px solid #484238;
}
#column-left-quests {
text-align: center;
}
#column-left-quests-title {
font-size: 11px;
font-weight: bold;
color: #484238;
border-top-width: 2.5px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
text-align: center;
vertical-align: middle;
height: 20px;
padding-top: 2px;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat;
}
#column-left-quests-content {
border-top-width: 2px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
padding: 4px;
}
#column-left-HLM {
text-align: center;
margin-bottom: 20px;
}
#column-left-HLM-title {
background-color: #E2DCD0;
padding-top: 3px;
font-weight: bold;
border-top-width: 2.5px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
height: 20px;
font-size: 11px;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
}
#column-left-HLM-content {
border: 2.5px solid #484238;
padding: 3px;
}
#column-right {
text-align: center;
float: right;
width: 12%;
margin-top: 20px;
margin-right: 2%;
margin-bottom: 20px;
margin-left: 15px;
}
#column-main {
margin-top: 20px;
margin-right: 15%;
margin-bottom: 20px;
margin-left: 15%;
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-repeat: no-repeat;
background-position: left top;
}
#column-main-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-position: right top;
background-repeat: no-repeat;
height: 12px;
}
#column-main-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
background-position: center top;
margin-right: 12px;
margin-left: 11px;
}
#column-main-text {
margin-top: 0px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
padding: 5px;
}
#column-right-poll {
border: 2px solid #484238;
margin-bottom: 20px;
padding: 0px;
}
#content-right-poll-title {
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
font-weight: bolder;
height: 20px;
padding-top: 5px;
}
#column-right-poll-content {
padding: 2.5px;
}
#column-right-imagenes {
margin-bottom: 20px;
border: 2px solid #484238;
}
#column-right-images-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
height: 20px;
padding-top: 5px;
}
#content-right-images-content {
padding: 2px;
}
#column-right-herramientas {
text-align: center;
border: 2px solid #484238;
margin-bottom: 20px;
}
#column-right-herramientas-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
height: 20px;
padding-top: 5px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
}
#column-right-herramientas-content {
padding: 2px;
}
#column-right-videos {
text-align: center;
margin-bottom: 20px;
border: 2px solid #484238;
}
#column-right-videos-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
height: 20px;
padding-top: 5px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
}
#column-right-videos-content {
padding: 2px;
}
#page-banner {
text-align: center;
}
.Image {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
border: 1px solid #000;
}
#new-copyright {
text-align: center;
clear: both;
}
-->
</style>
<meta name="Keywords" content="runescape, rs, ayuda, guias, español, jagex, tutoriales, mapas, trucos, consejos, ayuda, items, quests, misiones, videos, herramientas, calculadores, bases de dato, monstruos, armas, armaduras, magia, java, online, juegos, multijugador, MMORPG, guilds, dragones, negocios, herbs, posiones, gemas, skills, atlas, guerreros, cuevas, dungeon, merchant, clanes, hispanos" />
<meta name="Description" content="Las mejores guias de runescape en español con mayor cantidad de detalle, faciles de seguir, sencillas pero completas y organizadas." />
<!-- TemplateBeginEditable name="doctitle" -->
<title>:: Fenix Flame, guias de RS en Espanol</title>
<!-- TemplateEndEditable -->
<LINK REL="SHORTCUT ICON"
HREF="http://www.fenixflame.net/Images/FirePhoenix.ico">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body,td,th {
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 13em;
}
h1 {
font-size: 3em;
}
</style>
</head>
<body>
<div id="Global">
<div id="content-left">
<div id="content-right">
<div id="header">
<div id="header-left">
<div id="header-right">
<div id="topnav">
<div id="div">
<div id="div">
<?php
if ($user->data['user_id'] == ANONYMOUS)
{
echo ' FAQ • ';
echo ' Buscar • ';
echo ' Buscar • ';
echo ' Identificarse';
}
else
{
echo'Panel de control de usuario • ';
echo'<strong>' . $user->data['user_unread_privmsg'] . '</strong> mensajes privados • ';
echo'Buscar sus mensajes •';
echo' FAQ •';
echo' Buscar •';
echo' Usuarios • ';
echo ' Desconectarse [ '. $user->data['username'] .' ]';
}
?>
</div>
</div>
</div>
</div>
<div id="topnav-search">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'es'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('013088667146165371013:-bdq_dp2ewk');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/espresso.css" type="text/css" />
<link rel="stylesheet" href="http://www.google.com/cse/style/look/espresso.css" type="text/css" />
</div>
<p><br />
</p>
</div>
</div>
<div id="page-banner"><img src="../Images/Banners/Fenix-Flame-Evolution.png" alt="Fenix Flame Logo Image" border="0" title="Fenix Flame" /></div>
<div id="page-header">Home • Foro • Guias • El Clan • Videos • Contactarse </div>
<div id="column-left">
<div id="column-left-quests">
<div id="column-left-quests-title">Quests</div>
<div id="column-left-quests-content">Cooks Assistent<br />
Black Knights Fortress<br />
Demon Slayer<br />
Dorics Quest <br />
Dragon Slayer<br />
Ernest the Chicken<br />
Goblin Diplomacy<br />
Imp Catcher<br />
Knights Sword<br />
Unstable Foundations<br />
Pirates Treassure<br />
Prince Ali Rescue<br />
Restless Ghost<br />
Romeo y Julieta<br />
Rune Mysteries<br />
Sheep Shearer<br />
Shield of Arrav<br />
Vampire Slayer<br />
Witchs Potion</div>
</div>
<div id="column-left-HLM">
<div id="column-left-HLM-title">PvM</div>
<div id="column-left-HLM-content"><span class="text"><a href="New Classic Template/HTML/Guias/High LM/King Black Dragon.php">King Black Dragon<br />
</a>Chaos Elemental<br />
Kalphite Queen</span></div>
</div>
</div>
<div id="column-right">
<div id="column-right-poll">
<div id="content-right-poll-title">Encuesta</div>
<div id="column-right-poll-content"><strong>En tu opinión, ¿El actual diseño grafico del sitio es mejor o peor que el anterior?</strong><br />
Mejor porque es menos brillante<br />
Mejor<br />
Mejor pero le hacen falta retoques <br />
Igual de bueno
<br />
Peor<br />
Mucho Peor
<br />
</div>
</div>
<div id="column-right-herramientas">
<div id="column-right-herramientas-title">Herramientas</div>
<div id="column-right-herramientas-content">Combat Calculator<br />
Max Hit Calculator<br />
Price Checker</div>
</div>
<div id="column-right-videos">
<div id="column-right-videos-title">Videos</div>
<div id="column-right-videos-content">Videos Guia<br />
Videos Entretenimiento</div>
</div>
</div>
<div id="column-main">
<div id="column-main-rightbg">
<div id="column-main-content"><br />
</div>
</div>
<div id="column-main-text">
<!-- TemplateBeginEditable name="MainTextRegion" -->
<p>Hellooooo</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- TemplateEndEditable --></div>
</div>
<div id="new-copyright">This website and its contents are © 2009 - 2011 Fenix Flame. All Rights Reserved.<br />
RuneScape ® is a trademark of Jagex Ltd. © 1999 - 2011 Andrew Gower.</div>
<div id="footer">"</div></div></div></div>
</body>
</html>
This isn't a CSS problem; it's an templating/HTML problem. Have a look at these two lines:
<div id="column-main-text">
<!-- TemplateBeginEditable name="MainTextRegion" -->
The problem is that MainTextRegion generates one of the column-main-text divs, so the first of those two lines is unnecessary. Just delete the first of those two lines (and its corresponding closing div) and your problem should be solved.