I am trying to set the post title and post excerpt to align under the date beside the featured image but I am only able to set the date but not the title and except.
This is my CSS for the date which is a simple float:
.post-thumbnail {
width: 24%;
float: left;
margin-right: 20px;
}
HTML
<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">
<?php the_title(); ?>
</h2><!--/.post-title-->
<?php if (ot_get_option('excerpt-length') != '0'): ?>
<div class="entry excerpt">
<?php the_excerpt(); ?>
</div><!--/.entry-->
<?php endif; ?>
When I add float: left to the class .post-meta it moves the title and excerpt but not aligned under the post meta.
This is my new www.gazetbits.com. Any guide would be appreciated or would it be correct to group the title and post except into a Div and apply the float.
Thanks
The .post-meta takes too much height. I achieved your desired behavior adding this rule:
.post-meta {
height: 22px;
}
or changing the display type:
.post-meta {
display: table;
}
Related
I have a white space appearing between the two div elements
col3-2 and the_content which I have been unable to resolve.
Visit site here
You can see the white gap between the image, and the green element.
HTML - PHP:
<div id="imageslider" class="clearfix">
<?php echo do_shortcode('[advps-slideshow optset="1"]'); ?>
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<?php
$args = array( 'pagename' => 'home' );
$the_query = new WP_Query( $args );
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="the_content">
<?php the_content(); ?>
<?php edit_post_link(__('Click to edit this content','themify'), '[', ']'); ?>
</div>
<?php endwhile; wp_reset_query();?>
</div>
</div>
CSS:
.col3-2
{
float: left;
margin-left: 0%;
}
.col3-2 {
width: 100%;
font-family: 'Titillium Web', sans-serif;
}
.col3-2 h1 {
margin-right: 20px;
font-size:300%;
}
.the_content{
display: none;
}
#content {
float: left;
padding: 0 0 0%;
width: 100%;
}
The problem lies in an extraneous <p> tag appearing in the div.the_content tag:
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p>
...
It looks like you're pulling this in from somewhere else, so editing the code you posted probably won't help much. Simply remove the <p></p> from the source of the content.
As stated in a previous answer, the problem is due to the p element in the code snippet:
<div id="imageslider" class="clearfix">
...
</div>
<div class="col3-2">
<div id="content" class="clearfix">
<div class="the_content">
<p></p> <!-- this causes the problem... -->
<div id="section1">
<p></p>
...
Removing the p could solve the problem, but since the content can be edited in the future (Wordpress is the CMS in this case), then the p could reappear if the user editing the content inserts an extra carriage return or two in a WYSIWIG inline editing window.
The issue is due to collapsing margins between the p (and the containing blocks such as .the_content) and #imageslider.
A better fix would be to force the .the_content block to start a new block formatting context, which can be triggered by using:
.the_content {
overflow: auto;
background-color: #17C2A4;
}
If you specify the background color on .the_content in addition to or instead of on #section1, then the background color will extend all the way to the bottom edge of the #imageslider block.
Reference: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
I am trying to edit my footer.php in my child-theme (localhost for now, no link to share) in a way that I won't loose the "powered by ..." text. The theme authors (and wordpress too) surely deserve to be referenced there with the great work they do.
I want to add a row with 3 sections, in-line, and above the "footer-menu" and "site-generator" that came with the template. Can you point where the html structure, or the css, is/are incorrect?
Here's what I added to my child-theme footer.php and style.css:
<footer id="colophon" role="contentinfo">
<div class="footer-wrap">
<!-- New inserted code STARTS HERE -->
<div class="engage-row">
<div class="col-1">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/campaigntest.jpg">
</div>
<div class="col-2">
<img src="http://localhost/apoise/wp-content/themes/virality-child/images/footer/about-engage.jpg">
</div>
<div class="col-3">
<!-- Will add a subscription form here -->
</div>
</div>
<!-- Newly inserted code ENDED HERE -->
<div class="footer-wfix">
<?php virality_footer_nav(); ?>
<div id="site-generator">
<?php echo __('© ', 'virality') . esc_attr( get_bloginfo( 'name', 'display' ) ); ?>
<?php if ( is_front_page() && ! is_paged() ) : ?>
<?php _e('- Powered by ', 'virality'); ?><?php `enter code here`_e('WordPress' ,'virality'); ?>
<?php _e(' and ', 'virality'); ?><?php _e('WP Dev Shed', 'virality'); ?>
<?php endif; ?>
</div>
</div>
In style.css I added:
.col-1{
display: inline;
float: left;
}
.col-2{
display: inline;
float: left;
}
.col-3{
display: inline;
float: left;
}
How can I keep the footer_nav and the site-generator in a new line under the new row I created? Right now they are extending to the right. Or is there a better way to do this?
In your css file you need to add
div.footer-wfix {
clear:left;
}
Should do the trick.
It has a very basic code and i'm sure i'm missing something. What is it?
<div class="span8" id="pagecs">
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php the_content(); ?>
</div>
</div>
#pagecs {
font-family: 'Goudy Bookletter 1911', serif;
color: #405160;
}
as Stefan says in the comments your missing the css floats for example:
#pagecs .entry-content img {
float:left;
}
will align the image left.. and for good measure you can place some margins on it for spacing if you require
The align attribute is deprecated, so we'll use CSS:
.alignLeft {float: left;}
I'm converting someone's static HTML design to Wordpress, but I run into a problem when working with the titles.
The case is that the title expands downwards, which means that when one title becomes more than one line, the other titles also jump up, even though they are only one line.
This is what happens
This is how I want it
This is the CSS I use to position the titles so the bottom of the title hits the bottom of the image:
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
margin-top: -86px;
position: fixed;
}
So the question is: Is there a CSS property that can solve this problem, so extra lines of text get added on TOP of the title instead at the BOTTOM of it?
As requested, the HTML:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="content_container">
<div class="thumb_art">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="thumb_img" style="z-index: 0;">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail();
}?>
</div>
</a></h2>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<div class="single_title">
<?php the_title();?>
</div></a></h2>
</div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<div class="navigation"> <div class="alignleft"><?php previous_posts_link('« Next Entries') ?></div> <div class="alignright"><?php next_posts_link('Previous Entries »') ?></div></div>
<?php get_footer(); ?>
Make thumb_art position relative and then set bottom to 0 on single_title to get it always stick to the bottom
css
.single_title {
font-family:Novecent_norm, arial, helvetica, sans serif;
font-size: 18px;
width: 240px;
color: white;
background-color: purple;
bottom:0;
position: fixed;
}
And if not already set to relative add this aswell
.thumb_art{
position:relative;//actually any positioning would do
}
Still not entirely sure if I understood your question correctly, if there is something im missing please do tell.
Edit:
This is how it would look like if you had used my method
http://jsfiddle.net/nhewu/
This is my first HTML to Wordpress conversion that I am doing for a bakery. I've attempted to trouble shoot with the wordpress codex and forums with non-successful responses.
The following scenarios are for a full-width page. I'm sure it's something simple (I could be wrong) but I'm not seeing it.
Scenario 1: When I type the text alone, the alignment works just fine but, the return key between paragraphs will not separate the paragraphs like it should
Scenario 2: The image alignment to the right moves only 1 sentence line next to the picture and the rest below it.
Scenario 3: When inserting an image or a table, everything moves out of the designated container (div) and losing the style set to it.
http://www.treunorth.com/pennycakes/about/
Is there a line of code I need to add to the 'page-full.php' or adjust the css to make this work?
page-full.php:
<?php /* Template Name: Page - Full Width */ ?>
<?php get_header(); ?>
<!-- Page Article -->
<div class="clear"></div>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<section id="story" class="container_16 clearfix">
<div class="story-top grid_16"></div>
<div class="story grid_16">
<h1 class="meander"><?php the_title(); ?></h1>
<p class="m500">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<?php edit_post_link( __( 'Edit', 'pennycakes' ), '<span class="edit-link">', '</span>' ); ?>
<?php endwhile; endif; ?>
</p><!-- .entry-content -->
</div>
<div class="story-bottom grid_16"></div>
</section>
</article><!-- #post-<?php the_ID(); ?> -->
<div class="clear"></div>
<!-- //Page Article -->
<?php get_footer(); ?>
Stylesheet:
.container_16 .grid_16 {
width: 972px;
}
/*--------------------------------
9) STORY
--------------------------------*/
#story { margin-top: 30px; }
.story-top { background: url('../css/images/bg-full-top.png') no-repeat center top; height: 30px; }
.story { background: url('../css/images/bg-full.png') repeat-y center top;}
.story h1 { font-size: 64px; color: #BF4A72; text-align: center; padding: 15px 0;}
.story p { font-size: 13px; color: #73656e; line-height: 19px; padding: 0 42px 0 42px; }
.story p.signature { background-position: 0 -949px; font-size: 26px; line-height: 51px; margin-bottom: 20px; margin-left: 42px; margin-top: 24px;}
.story-bottom { background: url('../css/images/bg-full-bottom.png') no-repeat center top; height: 31px;}
The table has no width, neither has the cells in it. So styling it is not easy...
The paragraph tag has some styles also. Like a line height of 19px f.x and more.
Also most styles isn't inherited from the div to a table that is in it. You need to ad some styles to the table also.
You have missed few paragraph tags. Put these text in paragraph tag in about page
<p>I am a trained chef. I went to school at the California Culinary Academy in San Francisco. There I took courses in baking. Through my journey of gaining experience in the field I spent a year of that working in a bakery specializing in cake decorating. Post bakery my cake journey has gained me experience state side and 2 years in Finland baking cakes in restaurants and for family and friends.</p>
and
<p>I am a trained chef. I went to school at the California Culinary Academy in San Francisco. There I took courses in baking. Through my journey of gaining experience in the field I spent a year of that working in a bakery specializing in cake decorating. Post bakery my cake journey has gained me experience state side and 2 years in Finland baking cakes in restaurants and for family and friends.
</p>