Every time I inspect my code, there is a circle that appears. Does anyone know what this is?
Edit 1:
Thank you to Sam I now know that they are text nodes. I am having a little trouble identifying where they are in my code. If anyone can spot them and point them out to me it would be much appreciated.
<?php get_template_part( 'parts/shared/header' ); ?>
<?php
if(have_posts()) : ?>
<div id="main-content">
<div id="inside">
<div class="content">
<div class="container">
<div class="padding_30">
<h1 class="page_header_blog">Blog</h1><br>
<div class="blog_wrapper">
<?php while(have_posts()) : the_post(); ?>
<div class='post'>
<div class='thumbnail'>
<?php the_post_thumbnail(); ?>
<?php echo get_avatar( get_the_author_meta( 'ID' ) , 32 ); ?>
</div>
<h2 class='each_blog_info' id='post-<?php the_ID(); ?>'></h2>
<div class='blog_info'>
<small><i class='fa fa-calendar-o' aria-hidden='true'></i>
<?php the_time('F jS, Y') ?> ❘
<i class='fa fa-user' aria-hidden='true'></i>
<?php the_author() ?> ❘
<?php the_category( ', ' ); ?>
</small>
</div>
<h2 class='blog_title_link'><a href='<?php the_permalink() ?>' rel='bookmark' title='Permanent Link to <?php the_title_attribute(); ?>'>
<?php the_title(); ?></a></h2>
<div class='excerpt'>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif;?>
<div class="text-center"><?php
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'spafix' ),
'next_text' => __( 'Next page', 'spafix' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'spafix' ) . ' </span>',
) );
?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php get_template_part( 'parts/shared/footer' ); ?>
This is the code from my index.php page where the text nodes are apprearing in inspector. They appear after the loop with the div class of 'post'.
This is "text nodes", they are generated by not accurate PHP and contain " ".
These are due to white spaces... Generally when two or more nodes which inline-block property comes together
Related
The title of my featured article is positioned via css, but the results are not showing up properly in every screen.
I tried to place "mvp-feat2-main-text" element before "mvp-feat2-main left relative".
Problem: Text is shown behind the image. I need the text to show on top of the image.
Here is the relevant code:
<section id="mvp-feat2-wrap" class="left relative">
<?php global $do_not_duplicate; global $post; $recent = new WP_Query(array( 'tag' => get_option('mvp_feat_posts_tags'), 'posts_per_page' => '1' )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; ?>
<div class="mvp-feat2-main left relative">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<div class="mvp-feat2-main-img left relative">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<?php the_post_thumbnail('mvp-post-thumb', array( 'class' => 'mvp-reg-img' )); ?>
<?php the_post_thumbnail('mvp-mid-thumb', array( 'class' => 'mvp-mob-img' )); ?>
<?php } ?>
<?php if ( has_post_format( 'video' )) { ?>
<div class="mvp-feat-vid-but">
<i class="fa fa-play fa-3"></i>
</div><!--mvpfeat-vid-but-->
<?php } else if ( has_post_format( 'gallery' )) { ?>
<div class="mvp-feat-gal-but">
<i class="fa fa-camera fa-3"></i>
</div><!--mvpfeat-gal-but-->
<?php } ?>
</div><!--mvp-feat2-main-img-->
<div class="mvp-feat2-main-text">
<h3 class="mvp-feat2-main-cat left"><span class="mvp-feat2-main-cat left"><?php $category = get_the_category(); echo esc_html( $category[0]->cat_name ); ?></span></h3>
<div class="mvp-feat2-main-title left relative">
<?php if(get_post_meta($post->ID, "mvp_featured_headline", true)): ?>
<h2><?php echo esc_html(get_post_meta($post->ID, "mvp_featured_headline", true)); ?></h2>
<?php else: ?>
<h2 class="mvp-stand-title"><?php the_title(); ?></h2>
<?php endif; ?>
</div><!--mvp-feat2-main-title-->
<div class="mvp-feat1-info">
<span class="mvp-blog-author"><?php esc_html_e( 'By', 'click-mag' ); ?> <?php the_author(); ?></span><span class="mvp-blog-date"><i class="fa fa-clock-o"></i><span class="mvp-blog-time"><?php the_time(get_option('date_format')); ?></span></span>
</div><!--mvp-feat1-info-->
</div><!--mvp-feat2-main-text-->
</a>
</div><!--mvp-feat2-main-->
Try to use
style="z-index:value">
on your html at then end where you want to have your element appear ontop of the image
Example:
<div class="mvp-feat2-main-text" style="z-index:99;">
the z-index value must larger then the z-index of the image so try to increase that value until it appears ontop.
I'm trying to remove the featured image at the top of this blog post wordpress template. The author did a great job, but just left the blog pretty bad. I still need the featured images for thumbnails, however on this page it's a real mess. I'd like the video to sit right under the banner up top. I took out a bunch of stuff and messed it up. I researched about using the class functions, another solution talked about editing the single.php file. After looking through the single.php file, I concluded that everything that i wanted to remove appears to be located in a file called content.php.
so, here's the link: http://beautynetworkeffect.com/ground-zero-hong-kong-fashion-extravaganza-2015-fashion-one/
and here's the code:
<?php
/**
* The default template for displaying content
*
* Used for both single and index/archive/search.
*
* #package WordPress
* #subpackage Javo_Directory
* #since Javo Themes 1.0
*/
global $wp_query;
$javo_author = new WP_User( get_the_author_meta( 'ID' ) ); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> class="row">
<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
<div class="featured-post">
<?php _e( 'Featured post', 'javo_fr' ); ?>
</div>
<?php endif; ?>
<div class="row">
<div class="col-md-12">
<header class="entry-header text-center">
<?php the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
<div class="label-ribbon-row {f}">
<div class="label-info-ribbon-row-wrapper">
<div class="label-info-ribbon-row">
<div class="ribbons" id="ribbon-15">
<div class="ribbon-wrap">
<div class="content">
<div class="ribbon">
<span class="ribbon-span">
<?php echo get_the_date( 'M d Y'); ?>
</span>
</div>
</div><!-- /.content -->
</div><!-- /.ribbon-wrap -->
</div><!-- /.ribbons -->
</div><!-- /.label-info-ribbon -->
</div><!-- /.ribbon-wrapper -->
</div><!-- /.label-ribbon -->
</header><!-- .entry-header -->
</div><!-- col-md-4 -->
</div>
<div class="row entry-author-info-wrap">
<div class="col-md-2 col-xs-2 entry-author-image">
<a>
<div class="javo-thb" style="width:80px; height:80px; background-image:url('<?php echo apply_filters( 'javo_load_attach_image', $javo_author->avatar );?>');"></div>
</a>
</div>
<div class="col-md-10 col-xs-10 entry-author-meta-wrap">
<div class="entry-author-name"><?php echo $javo_author->display_name; ?></div>
<div class="entry-author-social">
<div class="entry-author-category">
<i class="fa fa-bookmark-o"></i>
<?php the_category( ', ' ); ?>
</div>
<?php if( comments_open() ) : ?>
<div class="pull-left" style="margin:0 10px;">
<span class="separator">/</span>
</div>
<div class="entry-author-comment">
<i class="fa fa-comments-o"></i>
<?php
comments_popup_link(
__( '0 Comment', 'javo_fr' )
, __( '1 Comment', 'javo_fr' )
, __( '% Comments', 'javo_fr' )
); ?>
</div>
<?php endif; // comments_open() ?>
</div>
</div>
</div><!--row entry-author-info-wrap-->
<div class="row entry-description-wrap">
<div class="col-md-12 entry-description">
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="single-post-meta row">
<div class="col-md-10 post-meta-infor">
</div> <!-- col-md-10 -->
<div class="col-md-2 text-right post-social">
<span class="javo-sns-wrap social-wrap">
<i class="sns-facebook" data-title="<?php the_title();?>" data-url="<?php the_permalink();?>">
<a class="facebook javo-tooltip" title="<?php _e('Share Facebook', 'javo_fr');?>"></a>
</i>
<i class="sns-twitter" data-title="<?php the_title();?>" data-url="<?php the_permalink();?>">
<a class="twitter javo-tooltip" title="<?php _e('Share Twitter', 'javo_fr');?>"></a>
</i>
</span>
</div> <!-- col-md-2-->
</div> <!-- single-post-meta -->
<?php else : ?>
<h1 class="entry-title">
<?php the_title(); ?>
</h1>
<?php endif; // is_single() ?>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
if( is_category() )
{
printf('%s', get_permalink(), javo_str_cut( get_the_excerpt(), 300));
}else{
the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'javo_fr' ) );
} ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'javo_fr' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
</div><!-- 12 Columns Close -->
</div><!-- Row Close -->
<footer class="entry-meta">
<div class="inner-footer">
<div class="inner-footer-more">
<a href="<?php the_permalink(); ?>">
<?php _e( "more", 'javo_fr' ); ?>
</a>
</div>
<?php //javo_drt_entry_meta(); ?>
<?php edit_post_link( "<i class=\"fa fa-cog\"></i>" . __( 'Edit', 'javo_fr' ), '<span class="edit-link">', '</span>' ); ?>
<?php if ( is_singular() && get_the_author_meta( 'description' ) && is_multi_author() ) : // If a user has filled out their description and this is a multi-author blog, show a bio on their entries. ?>
<div class="author-info">
<div class="author-avatar">
<?php
/** This filter is documented in author.php */
$author_bio_avatar_size = apply_filters( 'javo_drt_author_bio_avatar_size', 68 );
echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );
?>
</div><!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'javo_fr' ), get_the_author() ); ?></h2>
<p><?php the_author_meta( 'description' ); ?></p>
<div class="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">→</span>', 'javo_fr' ), get_the_author() ); ?>
</a>
</div><!-- .author-link -->
</div><!-- .author-description -->
</div><!-- .author-info -->
<?php endif; ?>
</div>
</footer><!-- .entry-meta -->
</article><!-- #post -->
To only remove the featured image you have to remove or comment the "the_post_thumbnail" line:
<?php // the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
To remove the featured image and the date ribbon remove all those lines:
<div class="row">
<div class="col-md-12">
<header class="entry-header text-center">
<?php the_post_thumbnail('full', Array('class' => 'img-responsive')); ?>
<div class="label-ribbon-row {f}">
<div class="label-info-ribbon-row-wrapper">
<div class="label-info-ribbon-row">
<div class="ribbons" id="ribbon-15">
<div class="ribbon-wrap">
<div class="content">
<div class="ribbon">
<span class="ribbon-span">
<?php echo get_the_date( 'M d Y'); ?>
</span>
</div>
</div><!-- /.content -->
</div><!-- /.ribbon-wrap -->
</div><!-- /.ribbons -->
</div><!-- /.label-info-ribbon -->
</div><!-- /.ribbon-wrapper -->
</div><!-- /.label-ribbon -->
</header><!-- .entry-header -->
</div><!-- col-md-4 -->
</div>
Remember that all changes will be overwritten when you update the theme to a new version. A good option to avoid this is to create a Child Theme, the recommended way of modifying an existing theme. More information can be found at: https://codex.wordpress.org/Child_Themes
Test it and let me know if you have any problem.
Regards.
I am gonna add something here since it can be helpful for those who are willing to learn about Wordpress file Content.php.
This file is how wordpress generates post content on wordpress.
It can easily be understood by this code
if ( is_single() ) {
the_title( '<h1 class="entry-title">', '</h1>' );
} elseif ( is_front_page() && is_home() ) {
the_title( '<h3 class="123123">', '</h3>' );
} else {
the_title( '<h2 class="entry-title">', '</h2>' );
}
?>
It shows different content on the base of the page that is being requested.
how can I display and create box with newest post outside the loop in Wordpress? I showed this on the picture in this link http://i.imgur.com/UbBvlnE.png. I'm talking about this in the red frame ;)
Sorry for my english.
I use a Masonry CSS for all my post on homepage http://sickdesigner.com/masonry-css-getting-awesome-with-css3/
This is a code for the loop:
<div class="all_center">
<?php query_posts($query_string."&orderby=post_date"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
<?php the_post_thumbnail('mediumImageCropped'); ?>
<div class="entry">
<?php the_excerpt(); ?>
<div class="postmetadata">
</div>
</div>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<?php endif; ?>
</div>
$recent_posts = wp_get_recent_posts( array( 'numberposts' => '1' ) );
echo get_the_post_thumbnail($recent_posts[0]['ID'], 'thumbnail');
echo $recent_posts[0]['post_content'];
Internet Explorer is giving me a hard time here. I've made a WordPress theme and have made it mostly compatible with IE, all except for a table at the bottom of posts. This table is spilling over the side of the container div it's in, and it also seems too large in IE. (It should be 430 x 200 px) You can see the JSFiddle here: http://jsfiddle.net/vlyandra/kEm3R/
The Wordpress theme code used to generate each post looks like the following:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
I'm terrible with IE, and would love any help.
Have you tried the following...
margin:0px auto; or
left:0; right:0;
You have set the div it is in to the corect dimensions and do not want it spilling from that div...
Well then set the
CSS:
tblid{
width : 100%;
length : 100%;
}
Not sure if above is correct css format
I'm trying to get my divs to float correctly in IE. They look great in Chrome and Firefox, but IE chews up the code. You can see the jsfiddle here: http://jsfiddle.net/vlyandra/kEm3R/ Basically, the image div does not line up horizontally with the entry div, and the table at the bottom (despite having a max width) is not resizing. The code to generate the posts is below:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
Any help would be greatly appreciated!
I'm not seeing it. Can you send a link to your site?
Also, have you tried applying .alignleft to the images?