Custom Blockquotes not working

HTML & CSS
1

Hello

I use Thesis. I wanted multiple blockquotes and tried duplicating original css definitions but somehow none works.

I tried names like blogquote, bquot etc. Then in custom.css I duplicated the original (with slight modifications) as:

.custom .format_text bquot
{

In my need I have a quote pic, text indented by 50px. But the pic gets overlapped. After every para, a line appears alongside. Here is the pic:

Any ideas?

Thanks

2

Can you give a link to the page? We need to see the code you are working with. Do you want the quote image to have its own space to the left, with no space below?

3

@ralph.m Thanks for your reply.

Here is the link to my page: http://bit.ly/TErq9j

I have put both the variations, when first using “blogquote” and other using “blockquote” tags. I have also pasted the css I am using there.

4

The element is called <blockquote>, so the middle one looks fine to me. This is the code you want:

<blockquote>
  <p>Lorum Ipsum Dor Sit Amet</p>
</blockquote>

You don’t need the <p>s in there, but if you want more than one para, it’s probably best to use them.

5

Sir,

The <blockquote> works well. I want ADDITIONAL blockquote, the top one. In fact I want multiple ones. And that’s where the problem lies.

6

Sorry, double post

7

I am trying using the class definition as given on this page:

http://it.megocollector.com/?p=1802

But not succeeding.

8

You can have as many blockquotes on a page as you like. I’m not sure what the issue is. Is the issue that you want them styled differently from each other?

9

Yes, I need multiple blockquotes on posts. But not sure how to get them in Thesis. If I simply modify the definition of default blockquote in custom.css, it works as needed. But if I duplicate them with different names, somehow the result matches the OP. Thanks for helping me out.

10

Hm, I can’t speak for Thesis (or even WP), but I wouldn’t create new elements for this (like <blogquote>). You can’t really get away with that in HTML. Can you not just paste the code into WP?

11

Can you paste something so I can try and then report back?

12

Yes, I need multiple blockquotes on posts.

The <blockquote> works well. I want ADDITIONAL blockquote, the top one. In fact I want multiple ones. And that’s where the problem lies.

I’m not gonna pretend that I understand the issue. I don’t even almost. But I made up this answer because it was an excuse to play with the :before pseudo-class and it worked! If I’m off base, feel free to enjoy a laugh at my expense.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?933463-Custom-Blockquotes-not-working
Thread: Custom Blockquotes not working
Dec 5, 2012 18:48
coolygreen
-->
<head>
    <title>BlockQuoteQuotes</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">

blockquote {
    background-color:#f8f8f8;
    border:2px solid;
    color:#461b7e;
}

p:first-child:before {
    content:"";
    background-image:url("http://msofficetuts.asia/wp-content/uploads/2012/12/blockquote.gif");    /* 41 x 38 */
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:50px;
    height:38px;
    float:left;
}

    </style>
</head>
<body>

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla.</p>
    <blockquote>
        <p>Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod.</p>
        <p>Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod.</p>
    </blockquote>
</blockquote>

<blockquote>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus.</p>
</blockquote>

</body>
</html>
13

ronpat’s example may help. You can use blockquotes on a page over and over, just like paragraphs.

If you insert a blockquote, then some paragraphs after it, and then another blockquote, does something go wrong? If so, it’s a bit odd. It’s not easy to understand what’s going wrong here.

14

Thanks for your tips @ralph.m & @ronpat. I screened the stylesheet and found that in two different places, blockquote and blockquote.left & blockquote.right were already defined. Then I uxed my css for .bquot and used it as <p class=“bquot”> and it worked like a charm.

Sometimes my mind refuses to divert and I land in a soup. Thanks for your effort guys and @ronpat, I cannot laugh as you took your time writing the post (though probably you wrote it for HTML (I use Wordpress).

15

Glad to hear that you got it sorted. :slight_smile:

FYI: SitePoint has a Wordpress forum that might be helpful should you run into another WP related issue.

Cheers

16

@ronpat

Thanks for the info. Ironically, this was my 2nd post in this section. Earlier too, I never found Wordpress section.

17

This link should take you there.

CMS & Wordpress

Content management system-related questions, customizations, SEO, plug-ins and user-submitted tips/tricks for Wordpress, Joomla, Drupal and many others.

18

Thanks again. This time I will note it. Hope to meet you there:-)