I am trying to add rounded corners to an image, but it does not seem to take effect when I do. I am not sure if I am putting the border-radius in the right location. Would someone be able to offer any advice by chance?
<p style="margin-bottom:0px">
<a href="Unpublisthed Website" target="_blank"><img border="0" src="Unpublished Photo" alt="Photo" width="124" style="max-width:124px; height:auto; border:0 border-radius:20px">
<br><br></a>
<span style="FONT-SIZE: 7pt; line-height: .8"> Click picture to view<br></span>
<span style="FONT-SIZE: 7pt; line-height: 1.6"> introduction video.</span>
</p>
Related
I have the following bootstrap info box:
<div class="alert alert-info" style="text-align: center" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<span style="font-size: 13px; vertical-align: middle;" class="alert-info" role="info">Please help support your chosen charity <b>{{ request.session.chosenCharity }}</b> and the str8RED development by signing up for additional benefits.</span>
</div>
This creates the following box:
As you can see it looks a little clumsy. I would like the "i" in the circle to be vertically centred in the blue box with the writing to its right but NOT over lapping like it currently does. I have tried using the django grid but it made the "i" and the writing look too far apart. I tried to use HTML tables but could not get it to match what I am after.
Any thoughts on how to solve this would be greatly appreciated.
you can display:flex property;
Take a look here and you can customize it as you like:
https://www.bootply.com/94SfnOPfd4 and also https://www.bootply.com/KndnEHLYCb
<div class="alert alert-info" style="text-align: center;width:300px;display: flex;" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;float: left;margin: auto;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<span style="font-size: 13px; vertical-align: middle;text-align: initial;" class="alert-info" role="info">Please help support your chosen charity <b>chosenCharity</b> and the str8RED development by signing up for additional benefits.</span>
</div>
I suggest to wrap the info in a div container and add this class info-container.. and apply vertical-align:middle property like the example
.info-container{
display: inline-block;
width: calc(100% + -50px);
vertical-align:middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info" style="text-align: center" role="info">
<span style="font-size: 30px; vertical-align: middle; padding:0px 10px 0px 0px;" class="glyphicon glyphicon-info-sign alert-info" aria-hidden="true"></span>
<div class="info-container">
<span style="font-size: 13px; vertical-align: middle;" class="alert-info" role="info">Please help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additionalPlease help support your chosen charity <b></b> and the str8RED development by signing up for additional benefits.</span>
</div>
</div>
I have created an email signature in HTML and would like to use it in Outlook 2010. However, there are few things I am getting stumped on.
Some preface info:
(I included my logo, and four social media icons with links in my signature. I just uploaded the images to dropbox and linked to them in my code)
My code opened fine and looked as it should it my browser, so I saved the code to the signatures folder. I went to compose a new message and tried inserting my signature, but no dice. Outlook recognizes that the signature exists in the signature folder, but when I click on it, it isn't included in the message.
I read here that Outlook needs 3 different files (in .htm, .txt and .rtf formats). in order for a signature to work. But I'm not convinced that this is the case. To test this theory, I went to htmlsig.com and created a signature. It was just a simple html document. I downloaded the signature and saved it to the signature folder. I then opened Outlook, created a new message, and was able to insert that signature just fine.
I opened up the signature folder to see what kinds of files were in there, and the only file in there was a single Chrome HTML document.
My question:
How can I add my html file to be used as an email signature?
In case you were curious, here is my source code: (Its a work in progress)
<!DOCTYPE html>
<html>
<body>
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; line-height: 12px; margin-bottom: 10px;">
<img src="https://dl.dropboxusercontent.com/s/ccjrncxekbz4k1p/Transparent%20logo.jpg?dl=0" alt="MidWest Quality Gloves" border="0" class="sig-logo" height="115" width="133">
</p>
<p class="social-list" style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;">
##facebook##
<a style="text-decoration: none; display: inline;" class="social signature_facebook-target sig-hide" href="https://www.facebook.com/MidwestGlove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="facebook.jpg" src="https://dl.dropboxusercontent.com/s/42pre6zyk40xa98/Facebook.jpg?dl=0" alt="Facebook">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_facebook-sep social-sep">
</span>
##instagram##
<a style="text-decoration: none; display: inline;" class="social signature_instagram-target sig-hide" href="https://www.instagram.com/midwestglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="instagram.jpg" src="https://dl.dropboxusercontent.com/s/dmrbysqop83moq8/instagram.jpg?dl=0" alt="Instagram">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_instagram-sep social-sep">
</span>
##pinterest##
<a style="display: inline; text-decoration: none;" class="social signature_pinterest-target sig-hide" href="https://www.pinterest.com/mwglove/">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="pinterest.jpg" src="https://dl.dropboxusercontent.com/s/9ejjex9wzksbvy3/pinterest.jpg?dl=0" alt="Pinterest">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_pinterest-sep social-sep">
</span>
##LinkedIn##
<a style="text-decoration: none; display: inline;" class="social signature_linkedin-target sig-hide" href="https://www.linkedin.com/company/midwest-quality-gloves-inc">
<img width="33" style="margin-bottom:2px; border:none; display:inline;" height="33" data-filename="linkedin.jpg" src="https://dl.dropboxusercontent.com/s/b6ceobojyt3zjle/linkedin.jpg?dl=0" alt="linkedin">
</a>
<span style="white-space: nowrap; display: inline;" class="signature_linkedin-sep social-sep">
</span>
</body>
</html>
Back in the time when i used outlook 2010 i remember that i had to go to the Signatures panel and create a new one with some text. Then went to:
C:\Users\MYNAME\AppData\Roaming\Microsoft\Signatures
Edited the .htm signature file that was created and replaced the content with my html code, saved and restarted outlook. Can't really explain for certain why and how.
When working on an HTML email signature, I wrote basic HTML for four linked images.
<a href="http://www.dwightfund1.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628265/image_2048/1.png?shared_name=x116s7oza2gydr9tmlqgv7oad349y885" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund2.com">
<img src="https://dwight.app.box.com/representation/file_version_28131627701/image_2048/1.png?shared_name=97bbaqds6wg6up5ip12a5t55lts7mnd4" width="40" height="40" alt="capture" border="0">
</a>
<a href="http://www.dwightfund3.com">
<img src="https://dwight.app.box.com/representation/file_version_28131629073/image_2048/1.png?shared_name=w9ucedcax4fmcw3lelwl9rhgdbhyqvo4" width="40" height="40" alt="capture"/>
</a>
<a href="http://www.dwightfund4.com">
<img src="https://dwight.app.box.com/representation/file_version_28131628619/image_2048/1.png?shared_name=a3t36efnz0cs3kmcza2an0wehrnczu48" width="40" height="40" alt="capture"/>
</a>
When I view the code in my browser these weird lines appear next to the images like below:
Why are these lines there any how can I remove them?
They could be the link's default text-decoration: underline in the spaces between the images.
If this is for an E-Mail client (that don't support CSS style sheets), you'll probably have to do something like
<a style="text-decoration: none" href="http://www.dwightfund4.com">
This border is meant to inform users that the image is a link.
a{
text-decoration: none;
}
img{
border-style: none;
}
You can remove it with color of a element:
http://codepen.io/fedojo/pen/NqGKNX
for example :<a href="http://www.dwightfund1.com" style="color: #fff">
My code is:
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
<span style="text-align:center; width:80px; display:inline-block;">
<a href="#" target="_blank" style="text-decoration:none;">
img here
<span style="font-size: 13px; color: #301985; display:block; top:5px; position:relative;">content</span>
</a>
</span>
Problem is:
It is working good in all mail. In outlook 2007 it displayed like this image.
I want content is displayed the below the image. But it is not working in outlook 2007.
I found this url https://www.campaignmonitor.com/css/
Display, float property are not working on outlook 2007. Any other solution to acheive my design?
use <div> in place of <span> I hope it will help...
I have some text on the left, and an image on the right, now when device is mobile, a needs to be added between this some text and the image. When the device is a PC, the should be disabled.
I tried using : <span style="text-align: center;" class="hidden-lg ellipsis"> but when the user is on mobile, the some text is present, then the on the next like, and the image on another line. I want the image to look like up
But it is coming like :
My code is as below:
<div class="divStyle" ng-click="showShipTo()" style=" margin-bottom: 3px; margin-top: 5px;" >
<a class="placeOrder" style="margin-left: 15px;">
Ship To
</a>
<span style="text-align: center;" class="hidden-lg userDetails ellipsisOverflow">
{{product.address.first_name+" "+product.address.last_name+", "}}
{{product.address.street+", "}}
{{product.address.city+" "+product.address.state+" "+product.address.zip_code}}
</span>
<img align="right" style="margin-top: 14px; margin-right: 14px; "
ng-src="modules/checkoutProcess/arrow.png" alt="Arrow Image" height="20" width="20">
Please can any one suggest any help...
Thanks