Web Design Workshop 12 Blockquotes and Pullquotes

by Yorgo Nestoridis

A spe­cial set up allows you to use block­quotes as Pul­lQuotes in Semi­oman­tics XO with­out Java Script. This is a nice way to insert most any­thing into a post at any place in a Google effi­cient way.

The block­quote is defined on your style sheet (style-zero) on lines 434 – 447 or on the demo style sheet as from line 459 under the com­mented title

/* This is your blockquote style */

The default set­tings in the style sheet result in the fol­low­ing insert:

Pul­lquote in Semi­oman­tics XO

The Quote is a clean insert while the post text wraps around that insert; ideal for inserted ads or fea­tured con­tent within the loop.

You can now restyle this Pul­lquote eas­ily and make it look as below:

Pul­lquote Gray Back­ground Black Border

Or how about putting your pay­pal but­ton straight into your post?

Pul­lquote with Pay­Pal Button

This last one above uses the fol­low­ing code:

#leftcontent blockquote {
/*border: 1px solid #000000;*/
border-top: 6px double #B30000;
border-bottom: 6px double #B30000;
background: #ffffff;
width: 200px;
font-family: Times, Georgia, serif;
font-size: 14px;
line-height: 18px;
text-align: left;
float: right;
margin: 0 0 0 20px;
padding: 8px;
font-style: italic;
}

Or how about just show­ing an image … dif­fer­ently?

Pul­lquote Image Display

Code Mod­i­fi­ca­tions as per below:

#leftcontent blockquote {
/*border: 1px solid #000000;*/
/*border-top: 6px double #B30000;
border-bottom: 6px double #B30000;*/
background: #000;
width: 200px;
font-family: "Helvetica New", Verdana, sans-serif;
color: #fff;
font-size: 22px;
line-height: 26px;
text-align: center;
float: right;
margin: 0 0 0 20px;
padding: 8px;
font-style: normal;
}

Yeahh, you are an Artist …

Artis­tic

• Web Design Work­shop 15 Dis­ney Look
• What is CSS
• Web Design Work­shop 11 Background
• Web Design Work­shop 8 Footer
• Web Design Work­shop 5 Sub-navigation

This page is wiki editable click here to edit this page.

• insert or pull quote
• pull quotes in web design
• quo­ta­tion exam­ple workshop
• block­quote style example
• block quotes in web design
• pull quotes web design 2011
• pull quotes in webdesign
• pull quotes in web desing
• Block Quotes and Pull Quotes
• pull quotes design examples

Related posts:

1. Web Design Work­shop 4 – Navigation
2. Web Design Work­shop 8 Footer
3. Web Design Work­shop 6 Main Wrapper
4. Web Design Work­shop 11 Background
5. Web Design Work­shop 5 Sub-navigation

Tags: Blockquotes, Pullquotes, Semiomantics XO Editing, Web Design CSS, Web Design Graphics and Images, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 14, 2009 at 4:22 pm and is filed under Web Design, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.