[Theme: Bueno] Styling featured image (9 posts)

  1. beatricebp
    Posted 4 years ago #

    I've recently decided to use post thumbnails (featured images) in order to use the "Fix Facebook Like" widget.

    So far, I've done this:

    In Functions.php

    // Thumbnails
    if ( function_exists( 'add_theme_support' ) )
    { add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 490, 350 );
    add_image_size( 'single-post-thumbnail', 490, 350 ); }

    In single.php, I've added this code

    <?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

    So far, so good. Featured images show up in each entry as well as the main page.

    However, I cannot figure out where to change the style of my featured images to the same as my images...

    This is my style.css:

    /* 3.2 Images */
    .entry img { border: 2px solid #330066; }
    img.wp-smiley  { padding: 0 !important; border: none !important; margin: 0 !important; }
    .entry img, .wp-caption { margin-bottom: 15px; max-width:490px; height: auto; }
    .fullwidth .entry img, .fullwidth .wp-caption { max-width:100%; }
    .entry .alignleft  { float: left; margin: 10px 15px 10px 0; border: 2px solid #330066; }
    .entry .alignright  { float: right; margin: 10px 0 10px 15px; border: 2px solid #330066; }
    .entry .aligncenter  { display: block; text-align: center; margin: 10px auto; border: 2px solid #330066; }
    .entry .wp-caption { padding: 1px; text-align:center; background:#F8F8F4; border: solid 1px #e6e6e6; }
    .entry .wp-caption img{ margin:0; padding:4px 0; background:none; border:0; }
    .entry .wp-caption-text { margin:0; padding:0; font-size:11px; text-align:center; }

    Website: http://beatricebp.com
    Theme: Bueno
    Started off on WordPress.com, used the guided transfer to WordPress.org and then played around in the CSS and PHP a bit.

  2. Michael
    Forum Moderator
    Posted 4 years ago #

    please post a direct link to a post with featured image.

    do you use any alignment on the post thumbnails?

  3. beatricebp
    Posted 4 years ago #

    Link: http://beatricebp.com/2010/02/19/test/

    For photos, I usually only align them directly in each post. Since I don't think I can do that with thumbnails, it would be preferable to align them in the center.

  4. Michael
    Forum Moderator
    Posted 4 years ago #

    I get a 'page not found' for the link ;-(

  5. beatricebp
    Posted 4 years ago #

    Stupid me still had the entry on private.
    Same link should work now: http://beatricebp.com/2010/02/19/test/

    Thanks :)

  6. Michael
    Forum Moderator
    Posted 4 years ago #

    try to add something like this to style.css of your theme (or where-ever custom styles are added to the theme):

    img.attachment-single-post-thumbnail { display:block; margin: 5px auto;}

    this copies the style of a centered image.

  7. beatricebp
    Posted 4 years ago #

    This worked to center the image! Thanks.

    But adding border: 2px solid #330066; didn't change the border size. Any idea why?

    I've been able to figure out most PHP/CSS but this is really puzzling me!

    Thanks for your help.

  8. beatricebp
    Posted 4 years ago #

    ...and it works if i add the exact same code to the "Edit CSS" but not in the actual css stylesheet. I'm lost.

    Now I only need to figure out why it's showing up differently on the category page...

  9. beatricebp
    Posted 4 years ago #

    Ahhh I did it. Because I'm using categories as navigating tools, I'm creating archives, and therefore had to change the code in the archive.php file. SOLVED! :)

Topic Closed

This topic has been closed to new replies.

About this Topic