[mathew bParticipant]

Morning

Again can i reiterate how impressed i have been with this theme, but i would like to show the blog feed in a different style, from whats shown here http://www.ccfewordpress.co.uk. I would prefer just an image and a title as a link to my blog. I don’t want any hover over change. Please could you help.

Thanks in advance

[AlexanderKeymaster]

Hi Matthew,

Thanks for writing in. Looks like your site is coming along nicely! I’m not quite sure what you mean by blog feed. Your blog appears to be empty at the moment. Could you elaborate a bit and perhaps point out where we should look?

[mathew bParticipant]

Ok no problem. I mean i want the blog links off the home page not to change to the rollover image when you go over them with a mouse.Also i would like the title of the blog post to be underneath if possible

Thanks

[ChristianModerator]

Hey Mathew,

To move the title below the featured image, replicate this path in your child theme framework\views\global and create _index.php file and paste the code below.

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

?>

<?php

if ( is_home() ) :
  $style     = get_theme_mod( 'x_blog_style' );
  $cols      = get_theme_mod( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = get_theme_mod( 'x_archive_style' );
  $cols      = get_theme_mod( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';
elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <script>

    jQuery(document).ready(function($){

      var $container = $('#x-iso-container');

      $container.before('<span id="x-isotope-loading"><span>');

      $(window).load(function(){
        $container.isotope({
          itemSelector   : '.x-iso-container > .hentry',
          resizable      : true,
          filter         : '*',
          containerStyle : {
            overflow : 'hidden',
            position : 'relative'
          }
        });
        $('#x-isotope-loading').stop(true,true).fadeOut(300);
        $('#x-iso-container .hentry').each(function(i){
          $(this).delay(i*150).animate({'opacity':1},300);
        });
      });

      $(window).smartresize(function(){
        $container.isotope({  });
      });

    });

  </script>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <div class="entry-wrap">
            <?php if ( has_post_thumbnail() ) : ?>
              <div class="entry-featured">
                <?php x_featured_image(); ?>
              </div>
            <?php endif; ?>
            <header class="entry-header">
              <?php if ( is_single() ) : ?>
              <h1 class="entry-title"><?php the_title(); ?></h1>
              <?php else : ?>
              <h2 class="entry-title">
                " title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php the_title(); ?>
              </h2>
              <?php endif; ?>
              <?php x_renew_entry_meta(); ?>
            </header>
            <?php // x_get_view( 'renew', '_excerpt-content' ); ?>
          </div>
          <?php x_google_authorship_meta(); ?>
        </article> <!-- end #post-<?php the_ID(); ?> -->

      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="entry-wrap">
          <?php if ( has_post_thumbnail() ) : ?>
            <div class="entry-featured">
              <?php x_featured_image(); ?>
            </div>
          <?php endif; ?>
          <header class="entry-header">
            <?php if ( is_single() ) : ?>
            <h1 class="entry-title"><?php the_title(); ?></h1>
            <?php else : ?>
            <h2 class="entry-title">
              " title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php the_title(); ?>
            </h2>
            <?php endif; ?>
            <?php x_renew_entry_meta(); ?>
          </header>
          <?php // x_get_view( 'renew', '_excerpt-content' ); ?>
        </div>
        <?php x_google_authorship_meta(); ?>
      </article> <!-- end #post-<?php the_ID(); ?> -->

    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

If you aren’t using a child theme, go to framework\views\global and modify _index.php. Replace the existing code with code above.

Then, in the Customizer > Custom > CSS, please add the code below.

/* Disable hover effects in featured image */
a.entry-thumb:hover img {
  opacity: 1;
  filter: alpha(opacity=15);
  zoom: 1; }
a.entry-thumb:hover:before {
  opacity: 0;
  filter: alpha(opacity=100);
  zoom: 1; }
/* Add spacing below feature image */
.entry-featured {
margin-bottom: 25px;
}

Hope that helps. 🙂

[mathew bParticipant]

Sorry the CSS didnt work, and the title is already below isn’t it, so i didnt need to put the index in. I meant to say i would like to remove the hover and the box which is around it.

Hopefully you can help, sorry to be a pain

[RadModerator]

Hi Mathew,

You could hide your recent posts hover by adding this css at your customizer’s custom css, or better at your child theme’s style.css

.x-recent-posts a:hover .x-recent-posts-img, .x-portfolio-filters:hover {
background-color: transparent!important;
}
.x-recent-posts .format-standard .x-recent-posts-img:before {
content:""!important;
}
.x-recent-posts a:hover .h-recent-posts {
color:#004d71!important;
}

Hope this helps.

[Drew FParticipant]

Is there anywhere this type of customization is documented more fully?

Thanks,

Drew Falkman

[RadModerator]

Hi Drew,

We could only give you few classes that can be customized, eg. http://theme.co/x/member/kb/css-class-index/ and we don’t provide full documentation as this require knowledge about CSS and it will be different from user to user. It is big so my advice is take some CSS/HTML5 tutorial or classes.

Thank you.

[Author]

Posts