• Resolved mium

    (@mium)


    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)
  • 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

    Thread Starter mium

    (@mium)

    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.

    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;

    Are you using a child theme?

    Thread Starter mium

    (@mium)

    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.

    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.