I currently have this code:
<div class="box" style="margin-bottom: 10px; max-width: 100%;">
<div class="clearfix"style="padding: 10px 10px 0 10px; background: #f3f3f3; text-align: center;"> <span style="font-size: 1.17em; color: #000000;">LINGERIE</span><br/>
<p style="color: #000000;"> </p>
<span style="color: #000000;">♦Lingerie Sets ♦Hosiery ♦Plus Size </span><span style="font-size: 12px;"> </span></div>
</div>
Im unsure where to add my font? I would like to use Montserrat, which is the current font of my menu, ect. Thanks in advance
You can do this with CSS:
font-family: Montserrat;
for example:
<span style="color: #000000;font-family: Montserrat;">♦Lingerie Sets ...</span>
Source: http://www.w3schools.com/cssref/pr_font_font-family.asp
In this link you have a full explanation about how to use the Montserrat font:
1) Add this code to your website (add it into your <head> section of your html page):
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
2) Create a new file i.e. styles.css and add it also yo your <head> section (or reuse an old one). Then integrate your fonts into your CSS:
font-family: 'Montserrat', sans-serif;
Example:
h1 {
font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}
Related
I'm trying to design a button that consists of 2 different fonts (and an icon). I've tried W3 Schools, but they don't cover that specific example.
The fonts in the button design are Montserrat and Intro Script.
Any advice or good resources? Thanks, in advance.
Button Design Mockup
You can wrap the text you want to make a different font in a span and then change the font for the span. You may need to play around with the vertical alignment to ge them to line up properly.
In the case below, I used vertical-align: sub
button{
background-color: #004d94;
border: none;
border-radius: 10px;
padding: 10px 60px;
color: #fff;
font-family: "Montserrat";
font-size: 20px;
line-height: 40px;
}
button i {
padding-right: 20px;
font-size: 24px;
}
button > span{
font-family: "Lobster Two";
font-size: 48px;
line-height: 40px;
vertical-align: sub;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital#1&family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<button>
<i class="fas fa-user-plus"></i>
Join the <span>crew</span> today
</button>
`
You could put multiple spans with different styles inside a single button.
<button>
<span style="font-family: 'Lobster';">
Hello
</span>
<span style="font-family: 'Montserrat';">
World!
</span>
</button>
I'm trying to customize some of the font colors for the Hestia theme. The section subtitles and card descriptions are #999999, which is very hard to read on a white background.
In the Features section, for example, I've tried inserting:
.hestia-features .description {
color: #000000;
font-size: 18px;
}
.hestia-features .hestia-features-content .feature-box p {
color: #000000;
font-size: 16px;
}
to no avail. Any thoughts?
Here are examples of the HTML:
<div class="col-md-8 col-md-offset-2 hestia-features-title-area"> <h2 class="hestia-title">Title</h2><h5 class="description">This text needs to be black instead of gray</h5> </div>
or
<div class="hestia-info"> <div class="icon" style="color:#180de2"> <i class="fa fa-check"></i> </div> <h4 class="info-title">Title</h4> <p>This text needs to be black</p> </div>
After checking the working demo the first selector should be:
section.hestia-features h5.description {
color: #000000;
font-size: 18px;
}
And the second should be:
section.hestia-features .hestia-info p {
color: #000000;
font-size: 16px;
}
If you are using Wordpress one more suggestion I have is to check if the theme is using a cache plugin. If it does make sure to delete the cache.
I'm creating an HTML newsletter. I'm using nested array. I have two question : how do I import font? Because #import and #font-face are not working on my newsletter (but works on simple html)
And the second is this :
How can I " vertical align middle " 2 span with different font-size ? It's working on simple html but not on the newsletter...
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#"
style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;"> <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>
<span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
<!-- color: white;">-->
<!--</p>-->
<p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
<p style="Margin: 0;font-size: 12px;line-height: 14px">
Mairie de Montargis - Salle Montdignan
</p>
</td>
</tr>
</tbody>
</table>
What I get:
What I need:
My fonts :
#media screen{
#import url("https://use.typekit.net/jqe0zpu.css");
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
#font-face {
font-family: 'Walsheim';
font-weight: normal;
font-style: normal;
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');
}
#font-face {
font-family: 'Walsheim';
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
font-weight: 800;
font-style: normal;
}
}
As I mentioned in my comment, Outlook does not work with all web-fonts like Google fonts. You don't include full paths to resources so there is no way for us to test what you are doing and look for a solution.
My first suggestion is to open your email in a web browser and test to see if it works at all. If it does, then I suggest testing what you are doing in an Apple or IOS email client, since they seem to work well with web fonts. If it works, you know you have things coded correctly.
Generally an HTML document wih a web font needs a link to that font and applied in a class for use in the document.
You should have a link like this:
<style>
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>
Or this:
<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">
Next, you need to find some way to get the font out into the document.
<style>
.classname {
font-family: GT-Walsheim, Arial, sans-serif;
}
</style>
In the last example, I added Arial as a fallback font that is pretty web-safe because Walsheim is not going to work with Gmail and most likely not work with Outlook 2007, 2010, 2013-2019.
Finally, apply the classname:
<p class="classname">Hello</p>
You could go fancy and add in inline styles as well:
<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>
This is a very basic plan on how to work with web fonts in email.
Good luck.
Here is a simpler method of using div tags:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#fevrier {
background: #00436f;
border-radius: 10px;
font-weight: bold;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
text-align: center;
text-decoration: none;
width: 180px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle -webkit-text-size-adjust:none;
padding-top: 25px;
padding-bottom: 25px;
}
#fevrier .text {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<div id="fevrier">
15 <span class="text">FÉVRIER </span>
</div>
This is my first post, and I apologize- pretty much a newbie. I have tried every technique that I can think of, and cant figure out how to create borders around three specific pictures in my site. My site is glh222.github.io
You will notice 6 images, three of which are bordered and sized appropriately and the other 3 which are enormously big. I have edited all pictures to be 285px, and my code in the HTML and CSS is consistent. I will post the code to both the relevant sections of the html and css below, please let me know if anyone can help. Thanks in advance!
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4"
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP"
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS"
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
CSS
#GT img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
float: left;
}
#GTC
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLI
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLISQ4
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QP
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QPS
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
a:hover {
background-color: #aaaaaa;
Looks like you aren't getting the borders on the bottom 3 because your code is broken in multiple areas.
First, you have an extra:
<link href=
near the top of your page and
you are missing a > at the end of these three lines:
<section id="GHIBLISQ4"
should be:
<section id="GHIBLISQ4">
same goes for:
<section id="QP"
should be:
<section id="QP">
and
<section id="QPS"
should be:
<section id="QPS">
Your full code should look like this:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>"Maserati of Long Island"</title>
</head>
<body>
<header>
<h1> Welcome to Maserati of Long Island, A Division of The Experience Auto Group
Maserati...The Absolute Opposite of Ordinary</h1>
</header>
<div id="slogan">
<h2>Long Island's only factory authorized dealership</h2>
</div>
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4">
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP">
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS">
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
</nav>
<section id="about">
<div class="wrapper">
<h2>Operating from a state-of-the-art facility that's located in the heart of Long Island, our expertly trained staff is committed to serving each of your needs from the moment you walk through our doors, keeping one tenet in mind above all else: treating you like a member of our "family" from the moment you walk through the doors</h2>
</div>
</section>
<footer>
<p> You can contact us by calling (516) 665-1665, or if you prefer, you can stop by 65 South Service Rd, Plainview, New York 11803 and speak with us in person.</p>
</footer>
</body>
</html>
This will make your page look like the following:
Additionally, you may want to one single CSS class for your images, and then apply that class to all images instead of using separate classes for each image. This way, all your photos will be uniform and styled identically, and you won't have to write as much code.
You may also want to resize/crop your photos as well, as they are uneven right now, partially due to the fact that while they are all the same width, they are not all the same height, so some are taller than others.
AND
if you want to get rid of that gray box around your first image, remove the float:left; on the #GT img CSS
Your HTML was broken. Some of your section tags weren't closed with a >.
If you want to apply same rules to several elements, give them a class. I gave the elements class of .cars in my fix below.
You shouldn't be applying text formatting rules to an img tag, but instead the elements that actually contain some text.
You might want to use display:inline-block; and vertical-align:top; instead of float:left; because your elements have different heights.
Remove width:100% from your image if you want it to retain its original size. If you want each of the elements to have the same width, apply a width to the container (the section element) and and give the img a max-width of 100%.
.cars{
display:inline-block;
font-size: 1.5em;
font-family:'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
vertical-align:top;
}
.cars a{
display:block;
padding: .5em;
color: white;
text-decoration:none;
}
.cars p{
background-color: #aaaaaa;
}
.cars img {
background-color:#c7ccf;
border: 20px black solid;
box-sizing:border-box; /* so the sizing of the image will include its border */
}
.cars a:hover {
background-color: #aaaaaa;
}
<section id="GT" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
I have a few questions with the code below.
1) I went to the Twitter site to get the code to embed a "Tweet" button but am having two issues - a) the button just shows up as a link and b) the text that I had pre-loaded into the tweet box does not appear
2) I'd like the two yellow buttons to be centered on the page, next to each other. Can someone help with the positioning?
3) Can I get rid of the hyperlink on the text within the button? Right now, the link only works if you click on the text (I'd like it to work if you click anywhere on the button).
Really appreciate the help. Thanks.
<!-- doc type declaration lets browser know which xhtml doc type declaration we are using -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>SAMPLE TEXT</title>
</head>
<style type="text/css">
#wtf_title {font-family: "Garamond"; font-weight: bold; font-size: 200%; padding-top:50px}
#intro_text {font-family: "Helvetica", serif; color: black; padding-top:10px;
font-style: italic;}
#reason {font-family: "Helvetica", serif; color: white; padding-top:50px; padding-bottom:50px;}
#credit
{
font-family: "helvetica";
font-size: 20%;
color: black;
}
#button1 {padding-left:20px;}
button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}
button:hover{background-color:rgba(255,204,0,0.8);}
button:active{position:absolute;top:100px; left:50px}
</style>
<body>
<div id="wtf_title" >
<center>sample text<br/>
</div>
<hr noshade size=8 width="53%">
<div id="intro_text" >
<center>Sample text
</div>
<button>
<center>sample text
</button>
<button>
<a target="_blank" href="http://www.americanbar.org" class="button2">sample text</a>
</button>
<div id="twitter-share-button"; style="position: absolute; top: 2px;" >
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.in sertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="fb_share"; style="position: absolute; top: 2px; left: 90px;" >
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
</div>
<div id="credit"; style="position: absolute; bottom: 5px; left: 32%;" >
This site was created by Varun Shetty and Bobby Corp. Inspired by LBJ and WTF Obama. Bobby loves Lebron; Varun loves the idea of Lebron.
</div>
</body>
</html>
Your HTML is not valid in many places, you really need to put your HTML through a WC3 validator before posting here, it would save you a lot of time and effort.
Here is a jsfiddle to start you out:
http://jsfiddle.net/RPc95/
For making the entire button click-able you either need to create a proper submit / button element or style a href to look like a button.