CSS Style override in Unix Shell - html

I am trying to send email from Unix using a HTML code. For paragraph tag I am trying to override style but its not working
(
echo "From: $FROM"
echo "To: $TO"
echo "Subject: $SUBJECT"
echo "Content-type: text/html"
echo ""
echo "<html>"
echo "<style>"
echo "table {border: 1px solid black; }"
echo "body { font-family: Verdana, Helvetica, sans-serif; background-color: #FFFFFF; }"
echo "p { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; }"
echo "</style>"
echo "<body>"
echo "<p style="font-style: bold";>${BodyHeading}:</p>"
echo "<p>Content of the email: </p>"
echo "</body>"
echo "</html>"
) | sendmail $TO
#Line 14 we are overriding style for paragraph tag. But when we get email we are not getting bold text for that p tag

Use
(
echo "From: $FROM"
echo "To: $TO"
echo "Subject: $SUBJECT"
echo "Content-type: text/html"
echo ""
echo "<html>"
echo "<style>"
echo "table {border: 1px solid black; }"
echo "body { font-family: Verdana, Helvetica, sans-serif; background-color: #FFFFFF; }"
echo "p { font-family: Verdana, Helvetica, sans-serif; font-size: 12px; }"
echo "</style>"
echo "<body>"
echo "<p style='font-weight: bold;'>${BodyHeading}:</p>"
echo "<p>Content of the email: </p>"
echo "</body>"
echo "</html>"
) | sendmail $TO
Replace Line 15 with echo "<p style='font-weight: bold;'>${BodyHeading}:</p>" and it should work.
more over id you want to use double quotes(") in echo statements, then you should escape them using \ . E.g.
echo "<p style=\"font-weight: bold;\">${BodyHeading}:</p>"
Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Replace echo "<p style="font-style: bold";>${BodyHeading}:</p>" with echo "<p style="font-weight: bold";>${BodyHeading}:</p>"

Related

Percent Based bottom Value doesn't apply on page load

I have noticed a weird ... "bug" ...
I have some CSS that looks like this:
.header-slider-text {
bottom: 40%;
color: #fff;
font-size: 22px;
left: 3%;
position: relative
}
This targets some HTML created in my WP plugin code:
$html .= '<div class="top-header-slider full-width-div">';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/1st-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' </div>';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/2nd-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' <div class="header-slider-text" id="second-header-slide-text">';
$html .= ' <p>At the Nurburgring....</p>';
$html .= ' Click here';
$html .= ' <p>and find out why</p>';
$html .= ' </div>';
$html .= ' </div>';
$html .= ' <div>';
$html .= ' <img src="'. plugins_url('/plugin-name/images/static/3rd-slider.jpg') .'"
alt="Some Alt Text" class="img-responsive top-header-img" />';
$html .= ' <div class="header-slider-text" id="third-header-slide-text">';
$html .= ' Click Here';
$html .= ' <p>to see more</p>';
$html .= ' </div>';
$html .= ' </div>';
$html .= '</div>';
However, I've noticed that when I use 40% for my bottom value, on page load it doesn't move my div up 40%. If I changed the value to 333px then it works, everytime. How can I get it to use percentages and work?
absolutely positioned element is displayed on the page in relation to the document this way, using the top, left, bottom and right CSS properties, you can specify an exact position.
try this:
.top-header-slider{
position: relative
}
.header-slider-text {
bottom: 40%;
color: #fff;
font-size: 22px;
left: 3%;
position: absolute
}

Adding space between <span>'s

I'm trying to make each <span> a new paragraph or add a break between each.
Here is my code:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span>";
}
}
?>
</div>
Any help would be super appreciated!
Here is a picture of how the info is currently displaying on the website without any spacing between the fields I entered.
Have you thought about using a break?
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br/>";
}
}
?>
</div>
You could use some CSS on the span element
.post_custom_fields > span {
clear:both;
display: block;
margin: 2px 0;
}
I believe what you are asking for is either:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])){
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br />";
}
}
?>
</div>
OR
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<p>" . esc_attr($skillvalue['value']) . "</p>";
}
}
?>
</div>
echo "<span>" . esc_attr($skillvalue['value']) . "</span> <br>";
or
echo "<p><span>" . esc_attr($skillvalue['value']) . "</span></p>";

I am having a tough time making a title appear for my body

I am trying to make a title appear on the body of this page. Well for some reason the title doesn't show up when I use the center tag and I am can't figure out why. Can someone tell me what I is wrong with my center tag?
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
<?php
$con = mysqli_connect('localhost', 'username', 'password','Employees');
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// $db = mysqli_select_db($con,'Employees');
$sql = "select * from Employ";
$query = mysqli_query($con,$sql);
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Meetings_Today</th>
<th>Sales</th>
<th>Comments</th>
</tr>";
//now read and display the entire row of a table one by one looping through it.
//to loop we are using While condition here
while( $row = mysqli_fetch_array($query) )
{
echo "<tr><td>". $row['Firstname']. "</td>";
echo "<td>". $row['Lastname']. "</td>";
echo "<td>". $row['Meetings']. "</td>";
echo "<td>". $row['Sales']. "</td>";
echo "<td>". $row['Comments']. "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
The following code works fine for me (see http://www.floris.us/SO/title.php)
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
</body>
</html>
This is exactly the code you pasted (same spaces etc), but closing the body and html tags after printing the title.
I recommend you start from this, then add code "until it breaks".
OK - I added code myself. The way you lay out your table, it goes all the way to the top of the page, and therefore "sits on top" of the title. Change the top to something that leaves space for the title - or put the title inside the tableā€¦
Possible solution:
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 50; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
I put this to work in http://www.floris.us/SO/title2.php
Source code:
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
<?php
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 50; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Meetings_Today</th>
<th>Sales</th>
<th>Comments</th>
</tr>";
// replace db access with a single line of text:
echo "<tr><td>". "John". "</td>";
echo "<td>". "Smith". "</td>";
echo "<td>". "Pocahontas". "</td>";
echo "<td>". "Firewater". "</td>";
echo "<td>". "English". "</td></tr>";
echo "</table>";
?>
</body>
</html>

Boxes are tripping if I insert text in them

* RESOLVED BY INTENSE RESEARCHING *
[DOWNLOAD CODE, NO COPYRIGHT =)] .rar file ( always scan before opening .rar - F4LLCON
Problem is that without text the boxes are placed 2 on each row, but with text the boxes
appear under each other with spacing. To get the text in the boxes I used <style> in <head>.
How can I FIX this annoying problem?
IMAGE:
Without the p and h3, both echo text will appear under the box and not in the box
Code:
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
and
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0/>';
// echo "<h3>" . $products['products'] . "</h3>";
// echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
RESOLVED BY DOING:
<STYLE TYPE="text/css">
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
</STYLE>
</head>
and
<div>
<?php while($products = mysql_fetch_array($result)) {?>
<table align="left" background="includes/images/box.gif" width="473" height="285">
<tr>
<td width="35%" height="100%" id="title">
<?php echo $products['products'] . "&nbsp"; ?>
</td>
<td width="70%" height="100%" id="desc">
<?php echo $products['description'];?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</body>
This might be easy for some, but I'm new to this.
Now working correctly.
Thank you for giving me directions and Thank you Google and Stackoverflow for so much help =)
I am asuming that content_box.png is the background for the box right?
instead of including it in a create it in the background of a div with a class like this
CSS:
.product_box {
bacground:url(includes/images/content_box.png);
width:xxxpx; /* the width of conrent_box.png */
height:xxxpx; /* the height of conrent_box.png */
position:relative;
float:left;
}
php:
<?php
while($products = mysql_fetch_array($result)) {
echo '<div class="product_box">';
// echo '<img src="includes/images/content_box.png" border=0/>';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
echo '</div>';
}
?>
Hope it helps!

Print CSS - Avoid cutting DIV's

I am developing an application which generates barcodes, I want to print them but the barcode div is getting cutted in some pages.
CSS:
<style type="text/css">
* {
margin:0px;
}
#cod {
width: 180px;
height: 150px;
padding: 10px;
margin: 10px;
float: left;
border: solid black 1px;
text-align: center;
display: block;
}
</style>
Code:
<? foreach ($this->ouvintes as $ouvinte): ?>
<div id="cod">
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>
Does anyone know how could i avoid this cut?
Thanks
How about trying the page-break-after / page-break-before CSS properties?
You could set it up to break after every 9 barcodes like this:
<?
$i = 0;
foreach ($this->ouvintes as $ouvinte):
$i++;
$pageBreakStyle = ($i % 9 == 0) ? ' style="page-break-after:always"' : '';
?>
<div id="cod"<?= $pageBreakStyle ?>>
<p><?= $ouvinte->nome ?></p>
<p><?= $ouvinte->instituicao ?></p>
<p>Cod. Barras: <?= $ouvinte->codigo_barras ?></p>
<p style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></p>
</div>
<? endforeach; ?>
I think the problem is in float:left.. this is a big problem, but you can find some tricks here
I ran into a similar problem... the (only) working solution is to place the barcodes in the table... because multi-paged content really only works (without cutting the content or other problems) with tables.
Try something like this:
<table>
<? foreach ($this->ouvintes as $ouvinte): ?>
<tr id="cod">
<td><?= $ouvinte->nome ?></td>
<td><?= $ouvinte->instituicao ?></td>
<td>Cod. Barras: <?= $ouvinte->codigo_barras ?></td>
<td style="margin-top:5px;"><img src="<?= $this->baseUrl('/index/codigo-barras/code/' . $ouvinte->codigo_barras) ?>" alt="<?= $ouvinte->codigo_barras ?>" /></td>
</tr>
<? endforeach; ?>
</table>
Try setting page-break-inside to avoid:
div {
page-break-inside: avoid;
}