Can
(@candanbl0g)
No CSS required i believe.
Just go to your theme’s index.php file and look for the … part that includes linking of image and text. Remove the closing from the image part and remove the beginning from text part – and voila! There it is.
If you encounter any problem or need further help, add your index.php file content here.
Don’t forget to take back-up at first of everything.
Hi Can,
this is all I can find in the index.php
<?php get_header(); ?>
<section class="content">
<?php get_template_part('inc/page-title'); ?>
<div class="pad group">
<?php get_template_part('inc/featured'); ?>
<?php if ( have_posts() ) : ?>
<div class="post-list group">
<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
<?php get_template_part('content'); ?>
<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
</div><!--/.post-list-->
<?php get_template_part('inc/pagination'); ?>
<?php endif; ?>
</div><!--/.pad-->
</section><!--/.content-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
thoughts?
Can
(@candanbl0g)
My mistake, it should be content.php file, not index.php – Sorry about that 🙁
<article id="post-<?php the_ID(); ?>" <?php post_class('group'); ?>>
<div class="post-inner post-hover">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumb-medium'); ?>
<?php elseif ( ot_get_option('placeholder') != 'off' ): ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-medium.png" alt="<?php the_title(); ?>" />
<?php endif; ?>
<?php if ( has_post_format('video') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-play"></i></span>'; ?>
<?php if ( has_post_format('audio') && !is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-volume-up"></i></span>'; ?>
<?php if ( is_sticky() ) echo'<span class="thumb-icon"><i class="fa fa-star"></i></span>'; ?>
</a>
<?php if ( comments_open() && ( ot_get_option( 'comment-count' ) != 'off' ) ): ?>
<a class="post-comments" href="<?php comments_link(); ?>"><span><i class="fa fa-comments-o"></i><?php comments_number( '0', '1', '%' ); ?></span></a>
<?php endif; ?>
</div><!--/.post-thumbnail-->
<div class="post-meta group">
<p class="post-category"><?php the_category(' / '); ?></p>
<p class="post-date"><?php the_time('j M, Y'); ?></p>
</div><!--/.post-meta-->
<h2 class="post-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</h2><!--/.post-title-->
<?php if (ot_get_option('excerpt-length') != '0'): ?>
<div class="entry excerpt">
<?php the_excerpt(); ?>
</div><!--/.entry-->
<?php endif; ?>
</div><!--/.post-inner-->
</article><!--/.post-->
here is the content. Just so I don’t totally kill it, what would be the changes?
Can
(@candanbl0g)
Is the URL you have written is a page or post? I couldn’t match your content.php with the URL you have written. If “2013 Episodes” titled thing is a page, then any modification related to content of a page must be done in page.php file. If so, your page.php content is required.
Sorry for the headaches, its within a page
So the coding for just that first image+text (since I imagine it will be repeated with all the others) is
<a href="http://www.riffnralk.com/episode-17"><img class="alignnone wp-image-661" src="http://www.riffnralk.com/wp-content/uploads/2014/01/Picture11-768x254.jpg" alt="Picture11" width="540" height="178.5" /></a>
<div><a href="http://www.riffnralk.com/episode-17">Lady Gaga - Artpop / Melt-Banana - Fetch / 1st Annual Riff 'n Ralkies</a></div>
If you need all of it let me know
Thanks again for your help!
Alex
Can
(@candanbl0g)
I am not sure as I am not a HTML or CSS expert but give this a try. Replace that code block with the below one.
<div><a href="http://www.riffnralk.com/episode-17"><img class="alignnone wp-image-661" src="http://www.riffnralk.com/wp-content/uploads/2014/01/Picture11-768x254.jpg" alt="Picture11" width="540" height="178.5" /></a>< br/>Lady Gaga - Artpop / Melt-Banana - Fetch / 1st Annual Riff 'n Ralkies</a></div>
ok, I played with it a bit on my own and I almost got it, just gotta figure out how to remove that gap in the middle where the link isn’t responsive, the hover is working though.
http://www.riffnralk.com/podcasts/music-tock/2013-episodes/
I might get rid of the border, haven’t decided
Here are the codes I used (thank you google inspect element!). I had to go into the styles.css and create a Div category
Here is the .css code
}
.archiveitem {
float: left;
}
.archiveitem div {
margin-left: 25px;
overflow: hidden;
padding: 2px 5px;
}
.archiveitem img {
margin: 15px 18px 0px 18px;
padding: 10px;
background: #0D0D0D;
border: 1px solid #0D0D0D;
}
.archiveitem a {
font-size: 18px;
}
.archiveitem img, #featuredImg img {
border: 1px solid #0D0D0D;
}
.archiveitem:hover img, #featuredImg:hover a img {
border: 1px solid #fff;
}
.archiveitem:hover a, #featuredImg:hover a {
text-decoration: underline;
}
and here is the input code for the post
<div class="archiveitem"><a href="http://www.riffnralk.com/episode-17"><img class="alignnone wp-image-661" src="http://www.riffnralk.com/wp-content/uploads/2014/01/Picture11-768x254.jpg" alt="Picture11" width="540" height="178.5" />
<div>Lady Gaga - Artpop / Melt-Banana - Fetch / 1st Annual Riff 'n Ralkies</div>
</a>
</div>
http://www.riffnralk.com/podcasts/music-tock/2013-episodes/
Here is as far as I could get. I can not for the life of me figure out why the image creates this gap between itself and text. I’m going mad trying to determine what the issue is.
Edit: I resolved it! It was one bloody ‘/’ in the on page coding I missed. I cannot believe that one little backslash could cause such a massive headache!
Can
(@candanbl0g)
Yeap, it looks great now 🙂
