WordPress.org

Ready to get started?Download WordPress

Forums

Mon Cahier
[resolved] Changing Block Quote font (23 posts)

  1. Eve Batey
    Member
    Posted 2 years ago #

    I'd like to change the font of the block quote from 30 px Reenie Beanie to 12 px times. In the child theme of my site, I went to the text elements section and changed

    <blockquote>blockquote {
    	margin: 0 1.5em;
    	font-family: 'Reenie Beanie', serif;
    	font-size: 30px;
    	font-size: 3.2rem;
    	line-height: 1.8;

    to

    blockquote {
    	margin: 0 1.5em;
    	font-family: 'times', serif;
    	font-size: 12px;
    	font-size: 3.2rem;
    	line-height: 1.8;

    But when I test a block quote, it's still appearing in 30 px Reenie Beanie.

    I'm sure there's an obvious fix that I'm stupidly missing, and I'm hopeful that someone here can be the fresh eyes I need to show me what that fix is.

    Thanks in advance to all who consider my question.

    http://wordpress.org/extend/themes/mon-cahier/

  2. Andrew
    Forum Moderator
    Posted 2 years ago #

    There is CSS overriding your actions;

    .twt-buffer-button, .twt-o, .twt-o div, .twt-o blockquote, .twt-o .author, .twt-o .footer, .twt-border, .twt-o p, .twt-o ul, .twt-o ol, .twt-o li, .twt-o dl, .twt-o dt, .twt-o dd, .twt-o img, .twt-o a img, .twt-o a, .twt-o b, .twt-o i, .twt-o span, .twt-o time, .twt-o abbr, .twt-o iframe, .twt-timeline, .twt-timeline li {
     font: normal normal normal 12px/16px "Helvetica Neue",Arial,sans-serif!important;
    }

    I recommend using !important on your font family and making sure your CSS selectors are specific.

  3. Eve Batey
    Member
    Posted 2 years ago #

    Andrew, are you finding that CSS you quoted in the stylesheet? I've scanned it from top to bottom and am not seeing that language.

    As always, thank you so much for your help on this.

  4. Andrew
    Forum Moderator
    Posted 2 years ago #

    Are you using a plugin to retrieve the quotes?

  5. Eve Batey
    Member
    Posted 2 years ago #

    Nope.

  6. Andrew
    Forum Moderator
    Posted 2 years ago #

  7. Eve Batey
    Member
    Posted 2 years ago #

    I believe you're seeing the result of an embedded tweet. If you're looking at the homepage, the tweet is embedded in the third visible post, headed "Oakland Trib Tells Critics To Get Over It."

    More on embedded tweets is here.

    It's not a plug-in, nor is it part of the stylesheet. So I'm not sure if that could be the culprit?

  8. Andrew
    Forum Moderator
    Posted 2 years ago #

    CSS needn't be part of the stylesheet, assuming you mean part of your stylesheets or parent themes'.

    https://dev.twitter.com/docs/embedded-tweets
    Explains how embedded tweets use CSS, "This markup presents a Tweet in an attractive (and display guidelines compliant) way".

  9. Eve Batey
    Member
    Posted 2 years ago #

    Sure. But what I'm saying is that the css file you're referring to above is the result of an embedded tweet in a single blog post. It's not an element of the Mon Cahier theme, nor has it been added as a plug-in.

    Do you believe that a CSS file that's being called by an embedded tweet is responsible for my inability to change this blockquote font? Or could there be another reason for this?

  10. Andrew
    Forum Moderator
    Posted 2 years ago #

    Do you believe that a CSS file that's being called by an embedded tweet is responsible for my inability to change this blockquote font?

    Definite.

  11. Eve Batey
    Member
    Posted 2 years ago #

    Only one way to find out -- I'll pull all the embedded tweets from the site and see if that resolves it. I'll keep you posted!

  12. Eve Batey
    Member
    Posted 2 years ago #

    OK, I pulled the embedded tweets and replaced them with jpgs. Then I did a test post with a blockquote. No change. I am sorry to say that that appears not to have been the issue!

  13. Andrew
    Forum Moderator
    Posted 2 years ago #

    I don't understand, there is no blockquote anymore so how will your CSS have effect?

  14. Eve Batey
    Member
    Posted 2 years ago #

    Gosh, I'm so sorry, but I don't understand what you're asking! Can you please elaborate?

  15. Andrew
    Forum Moderator
    Posted 2 years ago #

    Nevermind.

  16. Christine Rondeau
    WP Yogi & Forum Moderator
    Theme Author

    Posted 2 years ago #

    Hi Eve,

    I just went and looked at your site and I can't see any blockquotes anywhere.
    Can you provide a link to the page that has blockquotes?

  17. Eve Batey
    Member
    Posted 2 years ago #

    Hi, Christine! Unfortunately, since I can't successfully alter the blockquote font from Reenie Beanie, I've had to forgo use of block quotes on the site -- it's just not practical for our purposes.

    If you can tell me how to easily change this within the theme, however, I can start using blockquotes, which would be fantastic!

  18. Christine Rondeau
    WP Yogi & Forum Moderator
    Theme Author

    Posted 2 years ago #

    What you had was perfectly fine, so I'm not sure why it didn't work.

    I see that you are using a custom menu on your site. Why don't you create a page, add a blockquote, but don't add it to your menu. Send me the link and I'll check it out.

  19. Eve Batey
    Member
    Posted 2 years ago #

    Post is here:

    http://thewinnower.com/christine-b-quote/

    password is

    apple

    Thank you for checking this out!

  20. Christine Rondeau
    WP Yogi & Forum Moderator
    Theme Author

    Posted 2 years ago #

    When I view the source it says that line 161 is set to reenie:

    blockquote {
    	margin: 0 1.5em;
    	font-family: ‘reenie’,cursive;
    	font-size: 30px;
    	font-size: 3.2rem;
    	line-height: 1.8;
    }

    can you try changing it to font-family:times, serif;

    Let's see what that does.

  21. Eve Batey
    Member
    Posted 2 years ago #

    I'm really stumped, here. Looking at line 161 in the source for the page this post is on shows me

    <p style="clear: both;" class="subscribe-to-comments"><input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked" style="width: auto;" /><label for="comment_mail_notify"> Notify me of follow-up comments <strong>to my comment</strong> via e-mail</label></p> </form>

    I've done a complete search of my (active, I checked) child theme's style sheet, and the only blockquote option I appear to have is

    blockquote {
    	margin: 0 1.5em;
    	font-family: 'times', serif;
    	font-size: 10.5px;
    	font-size: 3.2rem;
    	line-height: 1.8;

    I honestly cannot figure out what I am doing wrong. Thanks for giving it a shot, Christine!

  22. Christine Rondeau
    WP Yogi & Forum Moderator
    Theme Author

    Posted 2 years ago #

    I think it might be a caching issue. I was using Chrome and couldn't see the style changes either, but I just opened FF and I can see the blockquote now in Times New Roman.

    Just as an FYI, when making a child theme, you should include the original theme styles.css with the @import and then, you just have the changes that you've made in your child theme. So in your case, you would have something like:

    /*
    Theme Name:     Winnower Child
    Description:    Child Theme For The Winnower
    Author:         Eve Batey
    Template:       mon-cahier
    */
    
    @import url("../mon-cahier/style.css");
    
    #blockquote {
        font-family: 'times', serif;
    }

    I know that you made lots more changes than that, so there's no need to change anything, but just in case you need to make another child one day. ;)

  23. Eve Batey
    Member
    Posted 2 years ago #

    This is great advice, for my next child. Thanks for your patient explanation -- as a longtime Movable Type user, entering this WordPress world has been a huge learning experience. I really appreciate all your help getting me where I need to be!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic