Need help? Check out our Support site, then


More fonts issues: Thumbnail Image caption's font; Breadcrumband Navigation

  1. I'm using Arimo (Site header, regular 6) and PT Serif Body text (3).

    When I show my images in thumbnails British post boxes, the font appeared in caption is way too large, and italicised too.

    I would like to:

    1) Reduce thumbnail image caption font size to regular (around 12); regular, not italicised.

    (When images are in gallery, the font size is perfect though: small and non italic.)

    2) I also want to reduce font size in the Breadcrumb area: "This entry was posted in......and tagged ......:". I want the font size to be the same as in my body text.

    3a) I would like the font in my navigation bar larger, more obvious.

    3b) I would like the font of my page subheading (Awards, under About) smaller. At the moment, this subheading is far too large.

    Many thanks for my font solutions.

    The blog I need help with is janetsnotebook.com.

  2. 1) Reduce thumbnail image caption font size to regular (around 12); regular, not italicised.

    (When images are in gallery, the font size is perfect though: small and non italic.)

    I checked http://janetsnotebook.com/2013/06/28/british-post-boxes/ and I'd like to look at specific examples. For the text that says "Hexagonal Victorian post box in Norwich," you can adjust the text with this CSS:

    .gallery-caption {
    	font-size: .8em;
    	font-style: normal;
    }

    To adjust the text that says "AA Box" below the other image, you can use CSS like this:

    .wp-caption .wp-caption-text {
    	font-size: .8em;
    	font-style: normal;
    }
  3. 2) I also want to reduce font size in the Breadcrumb area: "This entry was posted in......and tagged ......:". I want the font size to be the same as in my body text.

    This will adjust the font size of the text that starts with "This entry was posted in"

    footer.entry-meta {
    	font-size: 1em;
    }
  4. 3a) I would like the font in my navigation bar larger, more obvious.

    You can adjust the font size in the main menu of http://janetsnotebook.com/ with this CSS:

    .main-navigation li {
    	font-size: 16px !important;
    }
  5. 3b) I would like the font of my page subheading (Awards, under About) smaller. At the moment, this subheading is far too large.

    to target the submenu item font size such as "Awards" under About, you can use this:

    .main-navigation li ul li a {
    	font-size: 16px;
    }

    You've made some good updates! Note that to find out which CSS selectors to use to make these kinds of updates, you can right-click on any element and select the "Inspect Element" option. A panel should open in your browser that shows the HTML for what you clicked on as well as all of the CSS that applies to it on the right. If you click through the different HTML elements, such as the "li" elements or the "a" elements in the main menu, you should be able to find the CSS properties such as "font-size" on the right. If you copy those rules, paste them into the CSS editor, remove the things you don't want to adjust, and then just change the values for the things you want to change (like "font-size") then you should be able to find most of the CSS rules you need without waiting for help in the forums. If you still need help her, that's okay too! I wanted to make sure you knew about the browser tools though. :)

  6. Thank you -- you're such a lovely happy engineer!

    Thank you for helping me make these changes. I'm very happy.

    I'll try CSS at some point. At the moment, it's all too confusing as I don't understand how the CSS work. I'm trying to work at the elementary level. If you have any suggestion, please let me know. I would like to start with the beginner's level.

    However, with these changes, I've started to see some interesting patterns. It will be 'fun' to try out new things on WordPress.

    Thank you -- you're a star!

  7. Yes! Try this when you're ready:
    http://www.htmldog.com/guides/cssbeginner/

  8. Thank you for this tips. Yes, I'll learn css this summer.

    In the meantime, I need your help with the size of my comment from readers' point of view.

    My reader told me that my site's design makes the text in the comment box microscopic. They have to zoom in in order to read what they're writing when making comment.

    This problem, as I was told, has interfered with commenter's ability to comment.

    Could you set my font size bigger, such as 18? Many thanks.

  9. Could you set my font size bigger, such as 18? Many thanks.

    What I can do is help you learn how to do this.

    My reader told me that my site's design makes the text in the comment box microscopic.

    The first thing you should do is find out if you can see the problem they're referring to. I checked the comments section on your latest posts at http://janetsnotebook.com/2013/07/03/swimming-and-blogging/#comments and the comments look normally sized to me.

    Here is what I see in a test using Firefox 22 on a Mac: http://cl.ly/Q7XE

    Is that also what you see?

  10. Thank you. When my friend tried to leave comments, the font size was too small for her to see the words.

    Please see this screen shot from her: http://janetscraft.files.wordpress.com/2013/07/comment_font_small_in_form.png

    I would like my commenter to be comfortable in leaving comments. The small font size is currently a problem.

    Many thanks. Thank you for your patience.

  11. The screenshot is very helpful! I was looking at comments before, not the comment form. :)

    Try adding a rule like this to change the font size for everything inside the comment form area:

    #respond form *,
    #respond #comment-form-comment textarea,
    #comment-form-share-text-padder textarea,
    #respond p.comment-subscription-form label {
        font-size: 18px !important;
    }

    Adjust the 18px value as needed.

  12. Thank you. I've added the above on my css. I'm waiting for my friend's feedback once they've tried it again. Many thanks for always being there for me. What a wonderful service you've given me!

  13. Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic