I am working on simplifying the design of my WordPress log. All I want for the metadata that appears above a post or a post's title is it to appear in a single, fairly nondescript line.
The pseudo-code would look like this:
$date $category $edit
What it actually looks like is here: http://johnlaudun.org/20120828-isaac-at-9pm/
The CSS for this line is:
.entry-meta {
font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
font-size: .75em;
text-transform: uppercase;
}
.entry-meta p {
white-space: nowrap;
}
.entry-meta a {text-decoration: none;}
.entry-meta .date {color: #000;}
.cat-links a {color: #436EEE;}
.edit-link a {color: orange;}
And the PHP is:
<div class="entry-meta">
<p>
<?php if ( ! is_page() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_time( 'Y M d' ); ?></a>
<?php endif; ?>
<span class="cat-links">
<?php the_category( ', ' ); ?></span>
<span class="edit-link">
<?php edit_post_link( __( 'Edit', 'chunk' ) ); ?></span>
</p>
</div>
It generates the following output to a browser:
<div class="entry-meta">
<p>
<a href="http://johnlaudun.org/20120828-isaac-at-9pm/">
2012 Aug 28</a>
<span class="cat-links">
status</span>
<span class="edit-link">
<a class="post-edit-link" href="http://johnlaudun.org/wordpress/wp-admin/post.php?post=5052&action=edit" title="Edit Post">Edit</a></span>
</p>
</div>
What am I missing that is inserting some sort of line break into what should be, from my point of view, a fairly simply output?
Take a look at style.css, line 191 :
.cat-links, .tag-links {
display: block;
}
Try with : display: inline;
Related
On main blog page all excerpt is showing but there is no continue reading and Have coded very well?
on the content.php I have the code
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div><!-- post-excerpt -->
On function.php I have place this code and the moretag class is not present in my style.css file and not in bootstrap is this is the reason.
/**
* Replaces the excerpt "more" text by a link.
*/
function new_excerpt_more($more) {
global $post;
return '... <a class="moretag" href="'. get_permalink($post->ID) . '"> continue reading »</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I expect output on the main blog page every excerpt should have continue reading link and should clickable and show full post.
after 4 hour of struggle I have found answer to my question yahoooo!!
on content.php place this.
<div class="post-excerpt">
<?php the_excerpt(); ?>
<?php if (!is_home()): ?>
<div class="continue-reading">
<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
<?php
printf(
/* Translators: %s = Name of the current post. */
wp_kses( __( 'Continue reading', 'mano-theme' ), array( 'span' => array( 'class' => array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
);
?>
</a>
</div>
</div><!-- post-excerpt -->
<?php endif ?>
on function.php place this code.
/**
* Customize the excerpt read-more indicator
*/
function new_excerpt_more( $more ) {
return " …";
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
On style.css paste this code
.continue-reading {
text-align: center;
}
.continue-reading a,
.entry-content .continue-reading a {
display: inline-block;
margin: 1em auto;
padding: 1em 2em;
font-family: "Fira Sans", sans-serif;
text-decoration: none;
border: 1px solid #c3c3c3;
}
.continue-reading a:hover,
.continue-reading a:focus,
.entry-content .continue-reading a:hover,
.entry-content .continue-reading a:focus {
border-color: #000;
border-width: 1px;
box-shadow: none;
}
.continue-reading a::after {
content: "…"
}
.continue-reading::after {
display: block;
content: "";
width: 7em;
border-bottom: 1px solid #c3c3c3;
margin: 4em auto 0;
}
.entry-content .continue-reading::after {
display: none;
}
OUTPUT:
So I am trying to understand why my divs are not floating when requested. I am wrapping the loop of the post in a div that floats but they are just stacking as they normally would when you add a new post.
My theme is totally blank btw so there is no conflict in css.
/* My Code */
body{
background-color: #fafafa;
font-family: 'Open Sans', sans-serif;
}
#container{
margin: 0 auto;
width: 1000px;
max-width: 90%;
background-color: #ffffff;
overflow:auto;
height:auto;
}
.blogPost{
float:left;
background-color: #D9E8EC;
display:inline-block;
width: 300px;
}
this is from my index page where the posts are listing.
<div class="blogPost">
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</div>
I'm a bit confused by this, do you just want to do a loop displaying posts next to each other? If so the code would be:
<?php
if( have_posts() ) :
while( have_posts() ) : the_post();
?>
<div class="blogPost">
<?php
get_template_part( 'entry' );
comments_template();
?>
</div>
<?php
endwhile;
endif;
?>
I have this Jsfiddle:
http://jsfiddle.net/JohnnyDevv/XQ5Xd/2/
I'm trying to get zero distance between 2 html5 navs
PHP Example:
<nav>
<?php foreach($nav_list as $id => $nav_item): ?>
<?php echo anchor(strtolower($id), $nav_item, array('class' => ($nav == $nav_item ? 'active' : ''))) ?>
</li>
<?php endforeach ?>
</nav>
<img src="<?php echo site_url('_inc/img/divider.png') ?>" width="960" height="4" alt="Divisão de Menu">
<nav>
<?php foreach($subnav_list as $ids => $subnav_item): ?>
<?php echo anchor(strtolower($ids), $subnav_item, array('class' => ($subnav == $subnav_item ? 'active' : ''))) ?>
</li>
<?php endforeach ?>
</nav>
Here's an example image of what I'm trying to accomplish:
You simply need to add display: block; to the image tag you are using to separate the nav elements. By default, images use display: inline-block; which was adding that unnecessary white space above the image.
#wrapper img {
margin: 0;
padding: 0;
display: block;
}
Hope this solves your issues! Let me know if you have any questions.
I have a landing page with three sections- a most recent blog section, an about section, and a Tweeter feed.
These elements are all styled the same and in the same format, however something is not quite right with the most recent blog section.
Specifically, there is a larger space under, <h2>Growing Edge Blog</h2>, and <span style="color:#b8bf33">Continue Reading</span></p> is much further down and larger than it should be.
Any ideas?
Live site.
This is the relevant code:
<div id="landing-brief">
<ul>
<li>
<h2>Growing Edge Blog</h2>
<p>
<?php
// Get the most recent post
$the_query = new WP_Query( 'posts_per_page=1' );
// Pull the excerpt
while ( $the_query->have_posts() ) : $the_query->the_post();
the_excerpt();
endwhile;
// Reset Post Data
wp_reset_postdata();
?>
<br /><br /><span style="color:#b8bf33">Continue Reading</span></p>
</li>
<li>
<h2>Meet Mary Anne</h2>
<p>Mary Anne is the founder of Growing Edge Coaching™, a coaching and consulting company, where she helps individuals and companies develop powerful strategies to move forward in their life, their work, or their business. Her coaching is founded on her 20 years of experience as a manager and senior leader in non-profits. <br /><br /><span style="color:#b8bf33">More About Mary Anne</span></p>
</li>
<li>
<h2>Recent Tweets</h2>
<div id="twitter-feed">
<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=Growing_Edge');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<?php echo str_replace('Growing_Edge: ', '', $item->get_title()); ?>
</li>
<?php endforeach; ?>
</ul>
</div><!-- end twitter-feed -->
<br /><br /><p><span style="color:#b8bf33">Follow #Growing_Edge</span></p>
</li>
</ul>
</div><!-- end brief -->
#landing-brief {
width: 860px;
margin: 0 auto;
padding-bottom: 20px;
padding-top: 40px;
}
#landing-brief ul li {
display: inline-block;
padding-right: 20px;
vertical-align: top;
width: 250px;
}
#landing-brief ul li:last-child {
padding-right: none;
}
#landing-brief ul li p span {
color: #b8bf33;
}
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
}
<h2>Growing Edge Blog</h2>
<p>
<p>“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]</p>
<br /><br />
<span style="color:#b8bf33">Continue Reading</span>
</p>
should be this:
<h2>Growing Edge Blog</h2>
<p>
“Embrace the messy imperfect genius. Seek to be misunderstood by creative minds.” ~Ross Martin One thing I have learned over the years as an entrepreneur is that when I am in my most creative space, I have to release being a perfectionist and jump into my creative messiness. I need to create space that allows [...]
<br /><br />
<span style="color:#b8bf33">Continue Reading</span>
</p>
I suggest you to use inspect tools like Chrome Developer toolbar to inspect the page, it gives lots of information, help you figure out where's the problem.
I am currently coding a Wordpress website. I have a sidebar and the main body for my blog posts. The sidebar currently has the following properties:
.nav{
width:25%;
height: 100%;
background: #FFF;
display:block;
float:left;
position:relative;
border-right:thin solid #C8C8C8;
}
and the main body for blog posts:
body {
font-family: Myriad Pro, Tahoma, arial, helvetica, sans-serif;
font-size:16px;
margin-left:20%;
margin-right:20%;
}
.post {
padding-left:10px;
border-left:thin solid #000000;
}
I am currently trying to add padding-left to .post so that there is a gap between the right border of the sidebar and the blog posts. However, this is not working (a gap is not created) for some reason. Nor is border-left (there is no border created; I tried removing the border-right property on the sidebar).
This is currently the code for index.php
<div id="blog">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class = "sidebar">
<?php get_sidebar(); ?>
</div>
<div class="post">
<h3><?php the_title(); ?></h3>
<div class="entry">
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
</div>
</div>
How do I make padding-left and border-left work for the main blog posts?
Thanks!
Padding is applied within the element, so the border is on the other side of the padding. What you need is margin, which is applied outside of the element:
.post {
margin-left:10px;
border-left:thin solid #000000;
}
Here is an article explaining padding and margin in more detail.
This sounds like a conflict between the default Wordpress CSS and your themes CSS file(s). A quick hack is to add !important to the end of the CSS declarations as follows:
.post {
padding-left: 10px !important;
border-left: thin solid #000000 !important;
}
A long-term solution is to examine what CSS files are loaded (and in what order) and what selectors are being used. Excellent resource: http://codex.wordpress.org/CSS_Troubleshooting