Text Tricks
Index of Recent Text Tricks
"For People Who Make Mistakes" ...
Easy CSS Pullquotes
Your post that contains way too much
undecorated text goes here. The exact
placement of the pullquote is up to you
TRUMP ON HIS MOMENT
"
This is the high point of my career. But I never viewed myself as having much of a low point
"
But, you will want to make sure that you
have typed in a long enough post that
actually needs some pullquotes to make
it more interesting. So I'm just typing here
so that you can see about where you might
want to put the pullquote. To position the pullquote
in the right place is up to you. You may have
to fiddle with it and see how it looks. Or,
you might want to define your pullquote
to be a different width. It does need to be
prefaced with a lot of text and followed by
enough text that it looks good. Ours was
overlapping without enough text so
we are just rambling here.
Define the Pullquote: CSS Style
1. Add this to your external style sheet or add it to the HEAD section of your page (in your template).
.pullquote
{width: 145px;
background:gold;
color:black;
float: right;
border:1px solid maroon;
font-weight:bold;
line-height:140%;
padding:5px;
margin-top:10px;
margin-left:10px;
}
2. Use the pullquote you defined in your Blog or Web page like this.
<p class="pullquote">
This is your pullquote.
</p>
3. Copy and paste this in your Blog or Web page.
It will look like this.
Your post that contains way too much
undecorated text goes here. The exact
placement of the pullquote is up to you
TRUMP ON HIS MOMENT
"
This is the high point of my career. But I never viewed myself as having much of a low point
"
But, you will want to make sure that you
have typed in a long enough post that
actually needs some pullquotes to make
it more interesting. So I'm just typing here
so that you can see about where you might
want to put the pullquote. To position the pullquote
in the right place is up to you. You may have
to fiddle with it and see how it looks. Or,
you might want to define your pullquote
to be a different width. It does need to be
prefaced with a lot of text and followed by
enough text that it looks good. Ours was
overlapping without enough text so
we are just rambling here.
You need a lot of text before and after the pullquote. Try our example for testing. It works here. Our style sheet looks like this style1.css. Right-click to view the source code here.
The Apprentice has a poll that asks "What is your favorite Apprentice moment so far?". Our answer was the most popular.
