Intro:
I have a page designed simply with html and css, mostly just div's with css to mold the div boxes.
I want to integrate only the blog posts of a wordpress blog site into this page. Everything in the design is to be the same except for one (large) div that contains the "imported" posts. I do not want this div to contain it's own scrollbar, as if it's a window to the wp site. I want the whole site to expand vertically, determined by the height of the wp blog posts, whatever they may be.
I have used the method provided here: http://moshublog.com/2005/07/05/integrate/2/
to incorporate the blog, this has worked.
Problem:
The div containing this the blog posts ("the loop") does not expand vertically. It simply cuts the blog post(s) off as if they are not detected. The height is set to 100% on the div containing it and any div's parent to that one.
Question:
How can the div containing the wp blog posts expand vertically based on the height of those blog posts?
What I've tried:
- - - Overflow:hidden; I have floating elements on the page. I have tried every possibility with overflow:hidden;, which was suggested in any other questions I could find. This did not change anything.
- - - Making body and html height=100%. This did not change anything.
- - - Changing the height of the div containing it and any of the parent div's to a fixed height. This changed the height. If it was larger, then more of the blog posts were seen. The posts are there, just cut off.
Here is the code:
<!-- Main Body Start -->
<div class="clean" style="width:1200px; height:100%; border:0px; margin:0 auto;">
<!-- Body Column One Start -->
<div class="clean" style="width:950px; height:100%; float:left;">
<!-- Blog Integration Start -->
<div class="clean" style="width:946px; height:100%; max-width:946px; border-style:none solid; border-color:#99AAFF;
border-width:0px 2px; float:left; overflow:hidden; background-color:#ffff77;">
<div class="clean" style="width:926px; height:100%; margin:0px 10px;">
<!-- WP Blog code goes in here -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small>Posted in <?php the_category(', ') ?> on <?php the_time('F jS, Y') ?> by <?php the_author() ?> –
<?php comments_popup_link('Be the first to comment', '1 Comment', '% Comments'); ?>
<?php edit_post_link('Edit', ' | ', ''); ?> </small>
<div class="entry">
<?php the_content('<span class="more">read more »</span>') ?>
</div>
<?php if(is_single()) {?><p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?></p><?php } ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Older Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
Everything below "wp blog code goes here" to "?php endif; ?" is from the wp blog site, and is "the loop".
Thank you.
Don't set the height of the divs, doing so will limit them to the height you set them, having said that, if you set the height to 100%, the div will fill 100% of the area of its container, not 100% of its contents, so for the outermost div this will be 100% of the window.
Related
I'm currently developing a theme for my blog, I have a question about the integration of Carousel Slider in Wordpress.
The slider works pretty well, showing the latest 5 posts with a featured image and a caption with the title of the post. However i've had to set a fixed height to the img, cause different size of images would change constantly the height of the carousel, so the result was not pretty good.
The problem is that on mobile the img stretch a lot, so i would like to set the post thumbnail as a background of the carousel, so i can set bg-size, bg-position etc. in order to achieve a perfectly responsive image.
Do you know if there is a way to reach that? Or maybe it is possible with my actual code without setting the thumbnail as a bg?
Thank you all in advance.
<div class="carousel-inner">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<?php $active_class = ( 0 === $the_query->current_post ) ? ' active': ''; ?>
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('full') ?>
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
You can register a new image for your carousel using add_image_size( 'home-carousel', <width here>, <height here>, false );.
Then, you can call the_post_thumbnail('full') like this- the_post_thumbnail('home-carousel'). If you have already uploaded the images, you need to regenerate the thumbnails using this plugin.
If you still want to go with the background image option - you can get the URL of the featured image by this function - get_the_post_thumbnail_url and set it as background for the .carousel-item div.
This is my actual code using the thumbnail as a background-image.. but, like i said, the permalink doesn't work. Is there a way to have it work also with the thumbnail as a background? If I'm not clear, i want that when the user clicks on the image, it redirect to the single page post.
<div class="carousel-item <?php echo esc_attr( $active_class ); ?>" style="background:url('<?php the_post_thumbnail_url('full');?>') center center no-repeat; background-size: cover; min-height: 75vh;">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
</a>
<div class="carousel-caption d-md-block">
<h2><?php the_title();?></h2>
</div>
</div>
I am having problems figuring out how to display my wordpress page title above all the main content, including the sidebar. In other words, straight after the header. It is fine with a full width page but on a page with a left aligned sidebar the page title sits to the right of the sidebar content and over the main content section rather than at the very top of the page, directly above the left-aligned sidebar content. Am using JointsWP theme and having looked into loop-page.php it seems as though the page title is being called above the entry-content:
<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article" itemscope itemtype="http://schema.org/WebPage">
<header class="article-header">
<h1 class="page-title"><?php the_title(); ?></h1>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
<?php the_content(); ?>
</section> <!-- end article section -->
<footer class="article-footer">
<?php wp_link_pages(); ?>
</footer> <!-- end article footer -->
<?php comments_template(); ?>
</article>
If I remove the article header section from loop-page.php and insert it directly into page.php after the closing of the get_header(); tag then I get the desired result, but I don't think this is the correct way to handle it. Sorry if this is a really basic question but I have searched online and haven't been able to find an answer.
Where each item appears on the page is a product of both your theme and the CSS applied to the page. The code you've pasted above doesn't include the code that is used to generate the sidebar. Usually the sidebar is called by the file 'header.php'. For example, here is the code from the common theme "twenty fifteen" that generates the sidebar (right at the end of the header.php file):
</header><!-- .site-header -->
<?php get_sidebar(); ?> </div><!-- .sidebar -->
You could solve this purely with CSS, but I would recommend adding the title before the header - this will make it a little easier. In the example above, try editing header.php as follows:
</header><!-- .site-header -->
<div id="the_title">
<h1 class="page-title">
<?php the_title(); ?>
</h1>
</div>
<?php get_sidebar(); ?> </div><!-- .sidebar -->
Depending on the formatting you're using, it might be helpful to place the title inside a div that shares the main page content class, as below.
</header><!-- .site-header -->
<div id="content" class="site-content">
<div id="the_title">
<h1 class="page-title"><?php the_title(); ?></h1>
</div>
</div>
<?php get_sidebar(); ?> </div><!-- .sidebar -->
Then add CSS formatting to id="the_title" to ensure it displays as you want it to. For the CSS edits, you're probably going to want to add something like the below to your style.css file:
#the_title {
width:100%;
margins: 40px;
}
I am trying to build a website for a friend, I am building it using Drupal 7.
I have a CSS problem that is driving me crazy. The secondary menu, which I float to the right isn't next to my content. Instead it appears to the right below my content.
I feel like I have tried everything. I have the first menu floating left, secondary floating right, and the content on margin auto left and right.
I also tried clear both on the underlying container but it didn't help either.
I am experiencing this error in both Firefox and Chrome.
The only solution i could find online that i haven't tried yet, is to float right before floating left, because I'd have to tinker with Drupal core.
I actually had the problem before, and rebuild the whole damn website, and it happened again while trying to center my components.
I have changed too much since to press 'undo', so it would be awesome if someone with a lot of CSS knowledge could explain me why this occurs.
If you want to see the problem, its on this page www.mohaaleague.com, in the right bottom, but it should be as high as the left menu....
.two-sidebars #content /*the middle element*/
{
width: 827px;
margin-left:auto;
margin-right:auto;
}
#sidebar-second /*the right sidebar*/
{
width: 287px;
float:right;
}
#sidebar-first /*the left sidebar*/
{
float:left;
width: 287px;
}
#main /*the underlying div that holds all the others*/
{
width: 1650px;
margin-left: auto;
margin-right: auto;
position: relative;
clear: both;
}
btw I started from BARTIK theme.
Okay, so I managed to solve it by changing page.tpl.php,a ctually it was something I adressed in my question.
The problem was that float right was being called, before the float left. So I changed the order in which Drupal renders the page. By making Drupal render my second-sidebar first, and then my first-sidebar, and then the content i solved the problem.
I changed page.tpl.php in my themes templates directory like this, if you are reading this and have the same problem change the order of the code to this:
<?php if ($page['sidebar_second']): ?>
<div id="sidebar-second" class="column sidebar"><div class="section">
<?php print render($page['sidebar_second']); ?>
</div></div> <!-- /.section, /#sidebar-second -->
<?php endif; ?>
<?php if ($page['sidebar_first']): ?>
<div id="sidebar-first" class="column sidebar"><div class="section">
<?php print render($page['sidebar_first']); ?>
</div></div> <!-- /.section, /#sidebar-first -->
<?php endif; ?>
<div id="content" class="column"><div class="section">
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<a id="main-content"></a>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1 class="title" id="page-title">
<?php print $title; ?>
</h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?>
<div class="tabs">
<?php print render($tabs); ?>
</div>
<?php endif; ?>
<?php print render($page['help']); ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
I'm not sure exactly what kind of script I need for this, hopefully someone on here knows.
On the home/archive pages of a wordpress powered blog I am building I have a grid of thumbnails (featured images) only. Instead of these linking to the actual post/page, I'd like them to trigger a lightbox type of element that has a description of the post/page.
From there, the user would be able to either continue (via read more) to the post or close it and continue searching the grid.
Any insight is greatly appreciated!
Pure CSS Solution:
<body>
<div id="featured-grid">
<?php
if(have_posts()) : while(have_posts()) : the_post();
$default = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_thumb.jpg">';
$thumb = has_post_thumbnail() ? get_the_post_thumbnail() : $default;
?>
<div class="post-block">
<div class="post-thumb">
<a class="hover-trigger" href="#"><?php echo $thumb; ?></a>
</div>
<div class="post-preview lightbox">
<div class="preview-wrap">
<a class="featured-image" href="<?php the_permalink(); ?>"><?php echo $thumb; ?></a>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php
endwhile;endif;
?>
</div>
</body>
<style type="text/css">
.post-block{width:300px;height:300px;}
.post-thumb{width:100%;height:100%;margin:10px;float:left;}
.post-thumb *{display:block;width:100%;height:100%;}
.lightbox{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
position:fixed;
top:0;
left:0;
}
.preview-wrap{width:960px;margin:0 auto;position:relative;top:40px;background:#FFF;}
.post-block:hover .lightbox{display:block;}
.post-block:hover .post-thumb{display:none;}
</style>
This is EXTREMELY rudimentary and is largely untested. Overall, this should get you started in the right direction. Hope this helps!
I have been modifying a wordpress theme and as I just began to put content in the pages, I noticed the h2 header is displaying below the content (see here:http://mefo1.ecin1prod1lnx1.com/about/history/). I can't seem to find an explanation.
Below is the page.php code. I am happy to PasteBin any other code that might be needed.
Thank you very much,
Alex
<?php get_header(); ?>
<script>
jQuery(document).ready(function(){
jQuery(".share").click(function(){
jQuery(this).next("div").slideToggle("slow");
jQuery(this).toggleClass("active"); return false;
});
});
</script>
<div class="posts-column">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/includes/share.php'); ?>
<div class="entry">
<?php the_content(); ?>
</div>
<div class="clear"></div>
<?php endwhile ?>
<div class="clear"></div>
<h2 class="page"><?php the_title(); ?></h2>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>
</div><!--end posts-column-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Move above your div class entry
Read what #Shaun said. Remember, divs are block elements by default which means they will grow to take up as much room as they need. This forces any sibling blocks to start below unless otherwise specified through css. Move your h2 to the top of the document. Normal document flow is left to right, top to bottom so your first div (with class "entry") will be displayed as a block level element (since you didn't specify otherwise) and it's sibling will be rendered below hence why your h2 element is not where you expect.