Blockquote Style.

August 11th, 2007 Viewed 876 views

I have a new found technique in styling the blockquote and I’m loving it… I think I already used it in my previous post. And of course it’s always my pleasure to share it with you guys since this isn’t my original code and thanks again SP for the links.

Replace your old blockquote style with this one…

The code…
.blockquote p {
font: italic 1.2em/1.6em Georgia, “Times New Roman”, Times, serif;
width: 450px;
background: url(images/close-quote.gif) no-repeat right bottom;
padding-left: 28px;
text-indent: -18px;
color: #999999;
}

.blockquote p:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

The output…

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

You can omit “P” element from the style, if you’re site is not markup validated. And of course you are free to redesign the code. I hope it made sense

Have a great day everyone :hello:

This entry was filed under Designs You can follow responses to this entry through the RSS 2.0 feed. Or trackback from your own site. But first please read my Disclosure Policy

8 Responses to “Blockquote Style.”

Jump to comment form »

By: valerie on Aug-11-07 at 3:49 am
From United States
Mozilla Firefox 2.0.0.6 on Windows XP

ang ganda naman nyan scart wow ang galing naman ? thank you for the blockquote code sis.. gagamitin ko yan.. ang linis linis tignan ? ? muah! love u!

By: Sandra on Aug-11-07 at 6:00 am
From Philippines
Mozilla Firefox 2.0.0.6 on Windows XP

hi ate scart! musta ka na? naku,, kamiss naman kayo.. *hugs* anyways, wow. thanks for sharing your new knowledge about some stuffs regarding the stylehseet modificationa nd etc. Hopefully, I can use that sa new themes ko. hehe! Ayun, thanks ate ah? You;ve been there padin, supporting me all the way, kahit na sobrang balisa na ako sa pagrereview at pag-aaral at naneglect ko na ang site ko.

Pero ayun, balik blogging na din ako kahit papano! Whenever I have no time for HDorg, baka through multiply nalang din ako makacontact sa inyo. mwah! miss you ate and the rest!

By: monica on Aug-11-07 at 8:10 am
From Philippines
Mozilla Firefox 2.0.0.6 on Windows XP

hi scart, musta naman?
naa lng ko ask, nag-join man ko sa PayU2Blog tapos nag-email sila sa ako.
unsay meaning sa :

1) Each Assignment (unless otherwise noted) contains a minimum of 60
words, 1 link per post (1 additional link can be included but not from
other assigned keywords or similar words), and NO Negative Posting
(Positive or Neutral only)

2) Each Assignment that you receive will contain an assigned Keyword
and a Keyword URL. For each assignment that you receive means that you
complete a new post URL for that assignment.

3) Each Assignment completed equals $5, unless otherwise indicated in
the assignment details (PayPal transfers only, Bi-Weekly Payments
deposited)

@monica: alin dyan ang hindi mo na gets?

By: THINZ on Aug-11-07 at 12:04 pm
From Canada
Mozilla Firefox 2.0.0.6 on Windows Vista

hi scart! ang bait bait mo tlaga.. tlagang share mo pa yung na find out mo.. anyway, pasensya na di nakaka drop by dito, busy kse ingat lagi! muahzz

By: RennyBA on Aug-11-07 at 2:10 pm
From Norway
Mozilla Firefox 2.0.0.6 on Windows XP

Thanks for sharing this knowledge - your such a good blog buddy - I think I’ll try!

Btw: Why don’t you come over and have A Rockin’ Bigger Bang with me:-)

By: kitty on Aug-11-07 at 6:39 pm
From United States
Internet Explorer 7.0 on Windows Vista

oh no, nakapayu2blog ka pala?? naku, sis kung ako sayo gawan mo na bago ma expire yung assignment kasi may email sila na nareceive ko na napapansin daw nila na yung iba raw pinipili lang daw yung gusto nila tapos hindi daw ineemail sa knila kung ayaw nila yung assignment para daw maipasa sa iba asap. kasi one time pinipili ko lang peor nung nag email sila ulit na if people continue to do that daw baka it will result to termination ut of their system kaya ako nman kahit mahirap yung subject sige pa rin ako kasi 5 bucks rin yun hehee sayang naman :grin: ikaw, iemail mo sila kung ayaw mo yung assignment para alam nila.

By: nampootah on Aug-11-07 at 10:24 pm
From Philippines
Mozilla Firefox 2.0.0.6 on Windows XP

thanks sa tutorial scart!! suuuper nice ng blockquote mo…pede ba ko request ng tutorial? pano yung blink,blink kapag nakaturo yung cursor? awww…nice! i wanna learn bhow to do that :hihihi: