I have a php Mailer email in which I am styling the html email. Everything is correct except my content within #email-header exceeds the width of the screen. I am not sure why because I set the max-width to 600px.
Does anyone see anything I am doing wrong which would be causing this?
$mail2->Body = '
<body>
<div id="header-background" style="background:#16597B;width:100%;max-width:100%;height:auto;">
<div id="email-header" style="width:600px;max-width:600px;height:auto;margin:auto;display:block;padding:20px 8px;">
<div id="logo"><img src="" style="width:200px;height:auto;text-align:center" alt=""></div>
<div style="clear:both;"></div>
<div id="email-to" style="color:#FFF;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;font-size: 2em;margin-top:35px;">Hi '.$consult_name.',</div>
<div id="email-header-description" style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.3em;color:#d0dde4;margin-top:45px;">
<p style="font-size:1.3em;">Thanks for wanting to work with us!</p>
<p>We received your consultation inquiry. Here shortly your information will be reviewed and we will be in touch with you as soon as possible to schedule your consultation.</p><br>
<p>Thanks again!</p><br>
</div>
</div>
</div>
</div>
</body>
';
The problem is that you have a fixed width of 600px in addition to your max-width of 600px. Simply removing the fixed width should fix your word-wrap problem.
Note that 600px is a rather high breakpoint for mobile phones, as many phones have a display below this. I'd recommend 300px to cover most devices.
Also note that you have an additional closing </div>, which may cause some clients to play up a little.
Here's updated code that fixes both of these issues:
$mail2->Body = '
<body>
<div id="header-background" style="background:#16597B;width:100%;max-width:100%;height:auto;">
<div id="email-header" style="max-width:600px;height:auto;margin:auto;display:block;padding:20px 8px;">
<div id="logo">
<img src="http://placehold.it/100" style="width:200px;height:auto;text-align:center" alt="">
</div>
<div style="clear:both;"></div>
<div id="email-to" style="color:#FFF;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;font-size: 2em;margin-top:35px;">Hi '.$consult_name.',</div>
<div id="email-header-description" style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.3em;color:#d0dde4;margin-top:45px;">
<p style="font-size:1.3em;">Thanks for wanting to work with us!</p>
<p>We received your consultation inquiry. Here shortly your information will be reviewed and we will be in touch with you as soon as possible to schedule your consultation.</p>
<br>
<p>Thanks again!</p>
<br>
</div>
</div>
</div>
</body>
';
Hope this helps! :)
Related
I split my body content in two parts. The left one has a map and buttons. When I click on the button, I get the result from Arad.php in another window.
How can I set the target to the second half (split right) of my body?
<body>
<div class="split left">
<div class="centered">
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="Harta_Romaniei.jpg" alt="Harta_Romaniei" style="width:100%">
<button class="btnarad"; onclick= "window.location.href='Arad.php'"; Target="split right">Arad</button>
<button class="btntimisoara">Timisoara</button>
</div>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Information</h2>
// I want the information here!
</div>
</div>
</body>
It doesn't have much to do with PHP, you should really do it with HTML + JavaScript.
The window.href.location will always redirect you to another route, and will never do what you want.
You'll need something like this: Simple Load an HTML page from javascript based on window width
I'm pulling a list of news articles from the database and I'm putting them in a bootstrap card. My problem is when the news title is longer obviously the paragraph will be in a different position, look at the picture to better understand the problem
I have tried to set different margins and padding styles but I know it needs to be dynamic depending on the title size but what's the best possible way to do that? Here is my code.
<div class="item card ">
<img src="public/img/news/<?= $singleNews['news_image']; ?>" class="card-img-top" alt="blog">
<div class="card-body">
<a href="passion.html">
<h5 class="card-title ">
<?= $singleNews['news_title']; ?>
</h5>
</a>
<div class="card-paragraph ">
<p>
<?php
// $shortDetail = strlen($singleNews['news_short_detail']) > 70 ? substr($singleNews['news_short_detail'],0,70):$singleNews['news_short_detail'];
echo $singleNews['news_short_detail']; ?>
</p>
</div>
read more
</div>
</div>
There are two options
OPTION1: set min-height of title tag and align it to center via line-height or flex.
OPTION2: set specific height and then font-size to vw unit so that it adjust it self with overflow:hidden
I have successfully added a tab to my view.phtml page located at app/design/frontend/enterprise/aps/template/catalog/product.
I tried an if statement to hide it if the Specifications field is empty, i.e. no content. The issue is, it doesn't work. It still shows the tab even if there is no content.
My code is below at the end of post.
2 Questions:
Am I taking the correct approach? Basically, I am making a tab to have an Expert Review tab. I originally was going to use a cms block, but figured purposing the Specifications field was easier, for one, but also I could ignore the tab if no content
Can you please help ? :)
Thanks so much and here is my code and I attached a screenshot of the empty tabs.
<div class="wa-product-details-tab product-description">
<div class="wa-product-details-tab-heading product-desc-tab">
<div rel=".wa-product-tab-details-item-1" class="wa-product-heading-item wa-product-heading-item-1 wa-product-heading-item-active">
<span>Description</span>
</div>
<div rel=".wa-product-tab-details-item-2" class="wa-product-heading-item wa-product-heading-item-2">
<span>Specs</span>
</div>
<div rel=".wa-product-tab-details-item-3" id="review-form" class="wa-product-heading-item wa-product-heading-item-3">
<?php
$summaryData = Mage::getModel('review/review_summary')
->setStoreId(Mage::app()->getStore()->getId())
->load($_product->getId());
?>
<span >Reviews (<?php echo $summaryData->getReviewsCount();?>)</span>
</div>
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
</div>
<div class="wa-product-tab-details product-desc">
<div style="display: block;" class="wa-product-tab-details-item wa-product-tab-details-item-1">
<?php echo $_product->getDescription(); ?>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-2">
<p> <?php echo $this->getChildHtml('additional')?></p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-3">
<p>
<?php echo $this->getChildHtml('review_form') ?>
<?php echo $this->getChildHtml('product_additional_data_review') ?>
</p>
</div>
<div style="display: none;" class="wa-product-tab-details-item wa-product-tab-details-item-4">
<?php if ($_product->getSpecifications()); ?>
</div>
</div>
I am not sure if I understood your issue correctly. I am assuming that you want to hide the "APS Advisor Review" tab if there is no content in it.
For this you can use an if condition to check if $_product->getSpecifications() has any content, and show the tab title only if there is any content like this
<?php if( !empty($_product->getSpecifications()) ){ ?> <!-- displays the tab title only if the product has any specifications -->
<div rel=".wa-product-tab-details-item-4" class="wa-product-heading-item wa-product-heading-item-4">
<span>APS Advisor Review</span>
</div>
<php } ?>
I have the following html code:
<div class="media row-fluid">
<div class="span3">
<div class="widget">
<div class="well">
<div class="view">
<img src="img/demo/media/1.png" alt="" />
</div>
<div class="item-info">
Title 1
<p>Info.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
<div class="widget">
<div class="well">
<div class="view">
<img src="img/demo/media/2.png" alt="" />
</div>
<div class="item-info">
This is another title
<p>Some info and details go here.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
</div>
Which basically alternates between a span class with the widget class, and then the widget class without the span3 class.
What I wanted to know was if there was a way to have php "echo" or populate the details for and details under the "item-info" class. Would I need to use a foreach statement to get this done? I would be storing the information in a mysql database, and while I can get it to fill in the info one by one (repeatedly entering the and echoing out each image and item title) it's not practical when the content needed to be displayed is over 15 different items. I'm not well versed in foreach statements so I could definitely use some help on it.
If someone could help me perhaps structure a php script so that it can automatically output the html based on the number individual items in the database, that'd be greatly appreciated!
I'm wondering if the html + php (not including the foreach) would look like this:
<div class="span3">
<div class="widget">
<div class="well">
<div class="view">
<img src="img/<? $file ?>" alt="" />
</div>
<div class="item-info">
<?$title?>
<p>Info.</p>
<p class="item-buttons">
<i class="icon-pencil"></i>
<i class="icon-trash"></i>
</p>
</div>
</div>
</div>
EDIT:
I wanted to add some more information. The items populated would be based on a type of subscription - which will be managed by a group id.
I was initially going to use <? (if $_SESSION['group_id']==1)>
echo <div class="item-info">
$title
<p>$info</p>
</div>
so that only the subscribed items would populate. But, I would need it to iterate through all the items for group1 table and list it. Currently I know that I can do
<? (if $_SESSION['group_id']==1)
while ($row=mysql_fetch_assoc($sqlItem))
{
$itemInfo = $row['info'];
$image = $row['image'];
$title = $row['title'];
$url = $row['url'];
};
>
$sqlItem for now can only be assigned one thing (manually - as in: $sqlItem = '123'), unless I iterate through which is what I'm trying to figure out.
Just read that 'mysql_fetch_assoc' is being depreciated with 5.5, here is the new way and looks better, easier I think.. Hope this helps, was updated today.
I hope this helps http://php.net/manual/en/mysqli-stmt.fetch.php
replace the printf with echo '//then your html stuff
This will iterate through the rows in your database until their are no more matching records.
shouldn't a while be enough? It depends on the structure of your database and website (we didn't need so much HTML I think. Some more PHP maybe). Hope this helps.
I need to display the ON AIR CONTENT every Friday at 9pm and then stop at 12am and revert back to the OFF AIR CONTENT.
Below are the 2 sets of code that I manually change to make this possible. If I get the right code I can automate this.
Can anyone help me?
/* ON AIR CONTENT*/
function banner_rotator() {
if (is_home()) { ?>
<div id="rotator"><iframe width="630" height="386" src="http://www.ustream.tv/embed/8805257?v=3&wmode=direct?autoplay=true" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe> <?php if(function_exists('vslider')){ vslider('frontpage'); } ?></div>
<div class="main">
<!-- FIFTH EXAMPLE -->
<div class="view view-fifth">
<img src="../1.jpg" />
<div class="mask">
<h2>FULLY LOADED 2012</h2>
<p>This event has been cancelled.</p>
Details
</div>
</div>
<div class="view view-fifth">
<img src="../2.jpg" />
<div class="mask">
<h2>KAFINAL - FALLING IN LOVE</h2>
<p>"The feedback to Falling in Love has been tremendous all over. I am getting calls from people in Jamaica, the Caribbean and even in the States...</p>
Read More
</div>
</div>
</div>
<?php }
}
add_action('thesis_hook_before_content', 'banner_rotator');
_____________________________________________________________________________________
/* OFF AIR CONTENT */
function banner_rotator() {
if (is_home()) { ?>
<div id="rotator"> <?php if(function_exists('vslider')){ vslider('frontpage'); } ?></div>
<div class="main">
<!-- FIFTH EXAMPLE -->
<div class="view view-fifth">
<img src="../1.jpg" alt="FULLY LOADED 2012" title="FULLY LOADED 2012" />
<div class="mask">
<h2>FULLY LOADED 2012</h2>
<p>This event has been cancelled.</p>
Details
</div>
</div>
<div class="view view-fifth">
<img src="../2.jpg" alt="KAFINAL - FALLING IN LOVE" title="FULLY LOADED 2012" />
<div class="mask">
<h2>KAFINAL - FALLING IN LOVE</h2>
<p>"The feedback to Falling in Love has been tremendous all over. I am getting calls from people in Jamaica, the Caribbean and even in the States...</p>
Read More
</div>
</div>
</div>
<?php }
}
add_action('thesis_hook_before_content', 'banner_rotator');
The PHP date("G") function will give you the time in 24 hour format as a string. You may then test that and make whatever decisions you would like.