WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image borders in Blog posts help please (19 posts)

  1. thescarletfire
    Member
    Posted 1 year ago #

    Hello.

    I've built a WordPress website here and everything looks great except one nagging issue. For some reason, my premium theme does not like the default WordPress caption/border CSS that styles blog images with that border and center caption. I've added the core CSS .caption code found on the bottom of the page here:
    http://codex.wordpress.org/CSS#CSS_Resources

    Can someone please help me in figuring out why my blog images have the border AND the center styling in the WordPress post editor, but when I publish, my blog images have no border and text is not centered.

    Thank you. I really appreciate it, I can't progress without resolving this.

  2. Tammie
    Member
    Posted 1 year ago #

    Hi thescarletfire, would you be able to link your site to see this there?

  3. thescarletfire
    Member
    Posted 1 year ago #

    Hello,

    Sure if you think it would help.

    I am the webmaster for this site and responsible for updating the blog contents monthly:

    http://www.geniusound.com

    Here is one blog post that has a lot of images for you to see the problem:

    http://www.geniusound.com/gear-reviews/ddmf-iieqpro/
    See how all those images in the post have no border and the caption is not centered? I had to manually italicize the caption, but it still looks nothing like it did in the actual post editor in WordPress. Why would the images have the proper WordPress border / caption formatting in the post editor, but after publishing, not have any formatting? :(

    I just now took over this project.

    If you could please take a moment, check out my CSS (I only have the one 'standard' CSS file) and tell me why the blog images don't have the WordPress default border around them, and why my captions are not centering, I would be very happy.

    You see, I've already checked and confirmed that in the post editor, as I create the post in WordPress, the image has a border and the caption is centered. When I go to publish, and visit the blog itself, it has no border and no formatting on the caption / image.

    Why is that? Is there any other file from my theme contents that would conflict with my CSS for this image / caption, or is the problem 100% related to my CSS file only?

    Thank you! You truly are saving me here.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your images, in the blog page provided, have a border due to line 714 style.css

    img.wrapped {
    padding: 2px;
    border: 1px solid #D9D9D9;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    }

    Is this what you mean?

    why my captions are not centering

    Which captions? The title like, "Tonight we’ll be hearing works..." ?
    Or the title like, "EVERYTHING BUT THE KITCHEN SINK" ?

  5. thescarletfire
    Member
    Posted 1 year ago #

    Hello,

    Thank you so much for stopping by to help.

    No, those are OK and part of the theme. In the actual EQ blog post itself, as you scroll down, see all those EQ snapshots (blue GUI screens), with italics under them - those images I am talking about.

    http://www.geniusound.com/gear-reviews/ddmf-iieqpro/

    Each post itself has a featured image, which is fine and styled OK, but once you load a blog post itself (not just looking at the blog) - you'll notice any images within that post have no borders and their captions are not centered. I was only able to italicize them.

    Don't be confused:
    http://www.geniusound.com/blog/
    The blog 'main' page is ok - it's the individual blog posts that I am concerned with only. Hope that helps. Thank you again!

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    In the actual EQ blog post itself, as you scroll down, see all those EQ snapshots (blue GUI screens), with italics under them - those images I am talking about.

    That border is applying on line 835 style.css

    .wp-caption {
    background: white;
    border: 1px solid #F0F0F0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
    }
  7. thescarletfire
    Member
    Posted 1 year ago #

    Right, I added that CSS from the WordPress codex to try and get my images to have borders and proper caption formatting. But I'm not seeing it here after publishing, only during the post editing behind the scenes.

    Are you saying that those EQ images all throughout that post have borders around them? Why would you be able to see them but not myself?

    I'm confused, sorry. So I did put the correct CSS in to get the 'default' WordPress image borders?

  8. thescarletfire
    Member
    Posted 1 year ago #

    Here is something that should help you help me :)

    Here are two screenshots I've just taken. Please take a look and see what I mean. I would like my individual blog posts to have images with borders, and any captions centered.

    Here is what I would like it to look like (and how it look as I'm editing the post):

    Before Publishing
    http://i.minus.com/if6V0fHweI5xR.JPG
    Notice the border and caption formatting.

    After Publishing (what it looks like actually online)
    http://i.minus.com/i4T3IMWvYVnw9.JPG
    See how it looks nothing like it did? :(

    Please tell me what I need to put in my CSS file to get my blog posts to actually look the way they do in the WordPress editor. Thank you so much!

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you saying that those EQ images all throughout that post have borders around them? Why would you be able to see them but not myself?

    Try clearing your browser cache, or use a different browser.

  10. thescarletfire
    Member
    Posted 1 year ago #

    I have cleared all caches, flushed my DNS, restarted my router, used Ccleaner, etc - everything.

    Did you see those two pictures I uploaded just now? (See above post)
    See how they are completely different? I want my blog to look as it does in the WordPress editor. Hmm....

    Are you confirming that the blog itself looks identical to the editor "Before Publishing" image I uploaded to show you?

    Can you take a screenshot of what you see maybe?

    I can't seem to wrap my head around this.

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

  12. thescarletfire
    Member
    Posted 1 year ago #

    No way! How is that possible? lol

    I don't understand why it doesn't look like that here. Other CSS changes I've made reflect after a cache clearing, but not this for some reason.

    Um...how do I force a full cache clear for myself and get it to look like it does for you? :) I've seriously tried everything I could think of as I mentioned earlier. Crazy!

    Thank you SO MUCH for helping me - I guess I added the CSS correctly but never could "see" it here. Doh!

    Any tips on how I can force clear everything on my end?

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which browser are you using?
    I'm using Chrome 14.0, perhaps it's a browser compatibility issue?

  14. thescarletfire
    Member
    Posted 1 year ago #

    Chrome 21 here.

    Hmm...maybe, but I've tried IE and Firefox as well.

    One other question, about the screenshot you sent me.
    http://awesomescreenshot.com/0d2ciywd3

    If you look at it, see how there is extra "blank" space under the caption (on the upper blog picture in your screenshot) - is there a way to trim that so the border is closer to the caption itself? See what I mean? Just make it tighter under the caption.

    Thank you again! I owe you one :)

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry I meant 21.0 (was getting confused with firefox 14.0).

    The blank space is coming from line 864 style.css, padding bottom of 5px;

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
    }

    and
    line 835 padding bottom of 10px

    .wp-caption {
    background: white;
    border: 1px solid #F0F0F0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
    }
  16. thescarletfire
    Member
    Posted 1 year ago #

    :) It's OK. I assumed you were thinking about FF14 while posting.

    Thank you for the code hints! That's exactly what I needed.

    Finally, would you recommend a certain approach to this? Do I need to edit both lines?

    What's the best way to change the overall padding so that the border of the entire image itself is just a little bit closer "up" to the bottom of the caption text?

    Thanks again Andrew, great help!

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    I would avoid editing the theme's CSS file, as once the theme is updated, your changes will be forever lost.

    I would either use custom styles (I don't actually know how to do this), or a child theme (http://codex.wordpress.org/Child_Themes) to create new CSS styles.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    What's the best way to change the overall padding so that the border of the entire image itself is just a little bit closer "up" to the bottom of the caption text?

    I would remove padding bottom from

    .wp-caption p.wp-caption-text {
     ...
    }

    And change padding bottom to 5px on

    .wp-caption {
     ...
    }
  19. thescarletfire
    Member
    Posted 1 year ago #

    Hmm, ok. I think I follow you. I haven't ever actually created a child theme, only used them. Is it possible to make a child theme to a theme after you've already edited the theme though? The premium theme was extensively edited and so, wouldn't it be impossible to now make a child theme?

    Also, thanks for the padding tip - I'll do that! :)

Topic Closed

This topic has been closed to new replies.

About this Topic