Title: stying blockquote
Last modified: August 22, 2016

---

# stying blockquote

 *  Resolved [mium](https://wordpress.org/support/users/mium/)
 * (@mium)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/)
 * I am going crazy trying to something I though would be so simple. I am trying
   to stylize a blockquote but having no luck.
 * This code is wrapped in the blockquote tag in my editor
    <p class=”quotestyle”
   style=”padding-left: 180px;”>this is my quote</p>
 * The CSS is
 * >  blockquote.quotestyle
   >  { float:right; font-size:1.25em; background:none; width:
   > 150px; border-top:#4C739E 3px solid; border-bottom:#4C739E 3px solid; color:#
   > DE8BFF; }
 * I have also tried:
 * >  blockquote p
   >  p.blockquote.quotestyle blockquote.quotestyle p .quotestyle 
   > p
 * and I have tried adding !important
 * Any advice is greatly appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314411)
 * From what I can see, your HTML code should be this:
 *     ```
       <blockquote class="quotestyle" style="padding-left: 180px;">
       this is my quote</blockquote>
       ```
   
 * If you wanted your paragraph to take on that styling, then your CSS should just
   be:
 *     ```
       .quotestyle {
       float:right;
       font-size:1.25em;
       background:none;
       width:150px;
       border-top:#4C739E 3px solid;
       border-bottom:#4C739E 3px solid;
       color:#DE8BFF;
       }
       ```
   
 * What you have for your CSS means that class is applied on the
    `<blockquote>`
   not the `<p>`
 * By the way, if you are still learning HTML, here is a good resource (which I’ve
   bookmarked long ago for reference) [W3Schools](http://www.w3schools.com/)
 *  Thread Starter [mium](https://wordpress.org/support/users/mium/)
 * (@mium)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314472)
 * I tried that and still cannot get it to work. Interesting, even when I don’t 
   use the <p> tag within the
 * >  tags, I noticed (by inspecting with Firebug) that WP wraps the content inside
   > an auto-generated <p> tag. I still can’t get the styling to work though whether
   > I use the CSS on the class assigned to blockquote, the class assigned to p,
   > blockquote alone or blockquote with p.
 * I can live with the way it’s already styled, I just had wanted to try some other
   things but it’s no big deal.
 * I really appreciate your quick response and the theme. Thanks.
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314476)
 * Strange…it should be working, but you should not have to “live with the way it’s
   already styled”.
 * Where are you putting your CSS styling for your blockquote?
 * I just added your styling to my local test site and I was able to get the blockquote
   showing. However, I think I know what is happening…you are seeing in your content
   editor that the blockquote doesn’t change and still looks the same; this styling
   is part of the theme’s editor stylesheet, so you see your own styling in the 
   editor but will in the front-end of your site. Try it and see if that works.
 * I’ve noticed that the theme’s blockquote default styling is still adding a left
   border to yours, so you need to add this to your CSS:
 * `border-left: none;`
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314478)
 * Are you using a child theme?
 *  Thread Starter [mium](https://wordpress.org/support/users/mium/)
 * (@mium)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314497)
 * I am using a child theme and when I went back to add your suggested code (border-
   left) I realized that I was missing the ending ‘}’ from my previous set of CSS
   code. Apparently that caused the blockquote styling CSS not to work. As soon 
   as I added it, the blockquote styling started working. I feel like an idiot but
   most of all am sorry for having wasted your time. Thanks for your concern and
   for being so helpful and quick to respond.
 *  [Styled Themes](https://wordpress.org/support/users/gejay/)
 * (@gejay)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314512)
 * No worries, and no need to feel stupid or feel that you wasted my time. What 
   is important is that things were solved. Trust me, I’ve done somethings in the
   past that I missed or goofed on, but that happens to anyone. The worst was when
   I accidentally deleted my site’s database.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘stying blockquote’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/celestial-lite/3.5.8/screenshot.
   png)
 * Celestial - Lite
 * [Support Threads](https://wordpress.org/support/theme/celestial-lite/)
 * [Active Topics](https://wordpress.org/support/theme/celestial-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/celestial-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/celestial-lite/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Styled Themes](https://wordpress.org/support/users/gejay/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/stying-blockquote/#post-5314512)
 * Status: resolved