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
Related
I am new to wordpress development . In My custom wordpress theme posts are not rendering perfectly may be there is css issue but i am not able to figure out .
I have added code of my index.php please have a look.
Index.php ->>
<?php get_header(); ?>
<div id="primaryContent" class="content-area">
<main id="main" class="container site-main" role="main">
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post_box">
<div class="post_title"> <h2> <?php the_title(); ?> </h2> </div> <!--end of post title-->
<div class="post_thumb">
<?php
if (has_post_thumbnail() )
{
the_post_thumbnail();
}
?>
</div> <!-- end of post thumb-->
<div class="post_content">
<?php echo substr(get_the_excerpt(), 0 , 200); ?> </br>
Read more
</div> <!-- end of post content-->
<?php endwhile; else: ?>
<p> No Post Found </p>
<?php endif; ?>
</div> <!-- end of post box -->
</main>
</div><!-- .content-area -->
<?php get_footer(); ?>
CSS ->>
#primaryContent
{
Clear:both;
}
.post_box
{
width:700px;
min-height:220px;
border:1px solid;
margin : 5% 0 5% 0;
}
.post_title
{
margin-top:10px;
margin-top:10px;
color:#000000;
}
.post_title h2
{
text-align:center;
text-decoration:none;
color:#000000;
}
.post_title h2 a
{
color:#000000;
}
.post_title h2 a:hover
{
text-decoration:none;
}
.post_thumb
{
float:left;
width:180px;
height:140px;
margin-left:10px;
}
.post_thumb img {
width:100%;
height:100%;
border:1px solid #cccccc;
padding:5px;
}
.post_content
{
float:left;
width:400px;
border :1px solid #000000;
margin-left:25px;
min-height:100px;
margin-top:5%
}
.read_more
{
background:#0E5198;
color:#ffffff;
padding:5px 10px;
text-decoration:none;
margin-top:12%;
float:right;
}
Images when there is only 1 post
Images when there is only 1 post
Image when there are 2 posts
Image when there are 2 posts
Please help me solve this issue. Thanks in advance
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;
?>
hi what i'm trying to do is show posts with thumbnails and display the title and the first three lines of the content what i'm trying to acheive is this
Date
thumbnail - title
some content
at moment i have the featured image coming through but i'm struggling to get the rest just to reiterate i'm wanting a featured image on the left hand side and next to it the title date and content next to it. heres what it looks like at the moment
heres my function
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' ); } //Adds thumbnails compatibility to the theme
set_post_thumbnail_size( 200, 170, true ); // Sets the Post Main Thumbnails
add_image_size( 'recent-thumbnails', 55, 55, true ); // Sets Recent Posts Thumbnails}
function recentPosts() {
$rPosts = new WP_Query();
$rPosts->query('cat=4&showposts=3&orderby=date');
while ($rPosts->have_posts()) : $rPosts->the_post(); ?>
<li>
<?php the_post_thumbnail('recent-thumbnails'); ?>
<h2><?php the_title();?></h2>
</li>
<?php endwhile;
wp_reset_query();
}
heres my css
#posts { width:600px; height:auto; float:left; margin-top:20px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#080808;}
#posts .news{ width:600px; height:auto; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; display:inline-block;}
#posts a{ font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000000; display:inline-block;}
heres how i'm calling it in my index.php
<div class="news">
<?php echo recentPosts(); ?>
</div>
To get the thumbnail, title and text displaying you could use something like this:
<?php the_post_thumbnail('recent-thumbnails'); ?>
<h2><?php the_title();?></h2>
<p><?php the_excerpt(); ?></p>
#news img {
float:left;
margin: 0 5px 5px 0;
}
#news h2 {}
#news p {}
You can control excerpt length to display only a certain amount of characters from the post. See more info on using the excerpt function on Wordpress Codex http://codex.wordpress.org/Function_Reference/the_excerpt
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;
I'm trying to center the navigation on this page: http://66.147.244.50/~schneie1/
However, the div containing the ul of buttons take up the entire width and thus I can't do "text-align:center;"
Here's the page.tpl.php and the CSS-file:
<nav id="navigation" role="navigation" class="clearfix">
<?php if ($page['navigation']): ?> <!--if block in navigation region, override $main_menu and $secondary_menu-->
<?php print render($page['navigation']); ?>
<?php endif; ?>
<?php if (!$page['navigation']): ?>
<?php if ($main_menu): print $main_menu;
endif; ?>
<?php if ($secondary_menu): print $secondary_menu;
endif; ?>
<?php endif; ?>
</nav> <!-- /#navigation -->
#navigation {
margin: 0 0 1.5em;
padding: 0;
width:auto;
margin-left:auto;
margin-right:auto;
}
#navigation ul.main-menu {
margin:0;
padding: 0;
display:block;
width:auto;
}
#navigation ul.main-menu li {
float: left;
margin: 0;
padding: 0;
}
Thanks in advance!
Change your width on your #navigation from "auto" to a value. Auto means it will extend the full width of the screen, unless you've already wrapped it in a block level element which has a fixed width. You need something for your "auto" to reference.