Docs

[Lorie]

Is it possible to change the dimensions of the recent post images (see attached) so they don’t cut off the graphics. My graphics will always be this exact size. Thanks!

[Lorie]

You can see them at the bottom of this post:

http://www.drnetworking.net/news-information/text-phishing/

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-recent-posts .x-recent-posts-img {
    background-size: contain !important;
}

Let us know how this goes!

[Lorie]

This reply has been marked as private.

[Jade]

Hi there,

Please backup the current CSS in the customizer and replace it to this:

 .x-logobar {
     background-color: #900020;
 }
 .x-navbar {
     background-color: #900020;
 }
 .x-topbar {
     background-color: #900020;
 }
 .x-icon-computer-service-1.png {
     background-image: url(computer-service-1.png) top center no-repeat;
     width: 30px;
     height: 30px;
 }
 .x-ul-icons .x-li-icon i.x-icon-bullseye {
     background-image: url(http://www.drnetworking.net/wp-content/uploads/2016/05/computer-service-1.png);
 }
 body .x-pullquote {
     width: 100%;
 }
 .x-navbar .desktop .x-nav > li > a:hover,
 .x-navbar .desktop .x-nav > .x-active > a,
 .x-navbar .desktop .x-nav > .current-menu-item > a {
     box-shadow: none;
 }
 .x-colophon.bottom {
     padding-top: 0 !important;
 }
 .desktop #menu-item-339 a {
     padding-top: 0;
     height: 40px
 }
 .x-logobar {
     border-bottom: none;
 }
 .x-navbar .desktop .sub-menu a {
     color: #902000;
 }
 .x-recent-posts .x-recent-posts-img {
     background-size: contain !important;
 }

Hope this helps.

[Lorie]

Oh wow! Thank you so much.

That did fix several things, but I’m still having the following issues:

1) When I change the header design to stacked, it looks perfect, until I hit save and publish and then it turns yellow! I’ve looked at it in different browsers and it’s yellow. See attached.

2) The blog icon graphics on this page are still cut off a bit: http://www.drnetworking.net/news-information/text-phishing/

3) I have removed the automatic blog post title and replaced it with a custom headline. .single-post .entry-title { display: none; } However, I would like the headline to align with the top of Recent articles on the right, but I can’t figure out how to remove the white space. The solutions on the forum haven’t worked: http://www.drnetworking.net/news-information/text-phishing/

Thank you so much for the amazing support. I love this company and this theme. It’s the only one I use now!

Lorie

[Joao]

Hi There,

Regarding 1)

Please replace :

 .x-logobar {
     background-color: #900020 ;
 }

for

 .x-logobar {
     background-color: #900020 !important;
 }

Regarding the other two questions, please provide a screenshot of what you are referring to in order to clarify.

Thanks

Joao

[Lorie]

Hurray. Thank you so much!!! Please see attached screen shots. I’d love for the recent posts to use the full image rather than cropping it.

And I’d like to eliminate the white space above the title.

Thanks!

[Rahul]

Hey There,

Glad that the above code worked for you.

To use the fullwidth image in the recent posts shortcode, you can try adding following code in your child theme’s functions.php file :

// Recent Posts Customization - Showing images in full size
// ================================================================================

function x_shortcode_recent_posts2( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => ''
  ), $atts, 'recent_posts' ) );

  $id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
  $type          = ( $type        == 'portfolio' ) ? 'x-portfolio' : 'post';
  $count         = ( $count       != ''          ) ? $count : 3;
  $category      = ( $category    != ''          ) ? $category : '';
  $category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset      != ''          ) ? $offset : 0;
  $orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
  $no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
  $fade          = ( $fade        == 'true'      ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = x_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
      'orderby'          => 'date',
      'post_type'        => "{$type}",
      'posts_per_page'   => "{$count}",
      'offset'           => "{$offset}",
      "{$category_type}" => "{$category}"
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-fullwidth', NULL ) . '</div>';
        $image_output_class = 'with-image';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

add_filter('init', 'custom_recents_posts');

function custom_recents_posts() {
   remove_shortcode( 'recent_posts' );

   add_shortcode( 'recent_posts', 'x_shortcode_recent_posts2' );
}

Hope this helps!

Let us know how it goes!

[Author]

Posts