I have written html portion
<ul class="all-products">
<?php while (have_posts()) :the_post(); ?>
<li class="single-product">
<div class="outer-block">
<div class="inner-block">
<div class="product-image">
<?php echo the_post_thumbnail('products-size'); ?>
</div>
</div>
</div>
<p class="title-product">
<?php the_title();?>
</p>
<div class="product-content">
<?php the_content(); ?>
<a class="show-panel" href="#">more</a>
</div>
<div class="lightbox-panel">
<h3> <?php the_title();?></h3>
<p><?php the_content(); ?> </p>
<p align="center">
<a class="close-panel" href="#">Close this window</a>
</p>
</div>
<div class="lightbox"></div>
</li>
<?php endwhile; ?>
</ul>
in jquery as
<script type="text/javascript">
var $=jQuery.noConflict();
$(document).ready(function(){
$("a.show-panel").click(function(){
$(".lightbox, .lightbox-panel").fadeIn(300);
})
$("a.close-panel").click(function(){
$(".lightbox, .lightbox-panel").fadeOut(300);
})
})
</script>
in css as
.lightbox{
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
.lightbox-panel{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
Now the issue is that it displays same text (title and content) for all the post in the loop... please help me!!!
When you say $(".lightbox, .lightbox-panel").fadeIn(300);, it calls all lightbox with that class on the page. You need to target specific lightbox to the post.
Something like this
$("a.show-panel").click(function(){
$(this).parent().siblings('.lightbox-panel').fadeIn(300);
})
Related
I'm developing a WordPress theme with Bootstrap grids, and I see a problem in mobile view. Everything is fixed into the Bootstrap column, but there are some links in the references section that don't stay inside the column and make a mess of my grids and create a horizontal scroll bar:
I've tried everything and nothing works, please I need help.
Here is the code from the single.php:
<div class="c-content-box c-size-md" style="margin-top:4%;">
<div class="container">
<div class="row">
<div class="c-content-blog-post-card-1-grid">
<div class="row">
<div class="col-md-12">
<div class="col-md-8 wow animate fadeInLeft">
<div class="c-media 2 img">
<div class="c-overlay-wrapper">
<div class="c-overlay-content">
<?php the_post_thumbnail( '', array( 'style' => 'max-width:100%; height:auto;' ) ); ?>
</div>
</div>
</div>
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
?>
<div class="col-md-12 c-margin-b-60">
<?php
the_post_navigation( array(
'prev_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">Post Anterior</button>',
'next_text' => '<button type="button" class="col-md-5 col-md-offset-1 col-xs-6 btn btn-md c-btn-red c-btn-square ">Próximo Post</button>',
));
?>
</div>
<?php
echo '<div class="col-md-12 c-margin-t-20">';
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
echo '</div>'
?>
</div>
<div class="col-md-4 ">
<div class="col-md-12 wow animate fadeInRight" >
<?php get_sidebar(); ?>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
</div>
</div>
</div>
</div>
</div>
You'll need to add some CSS to word-wrap your text.
div {
width: 100px;
border: 1px solid black;
margin: 5px;
}
.wrapped {
word-wrap: break-word;
}
<div>https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>
<div class="wrapped">https://stackoverflow.com/questions/45800283/content-posts-doesnt-stay-inside-the-bootstrap-cols</div>
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
Footer css appears right on every page except single.php page.. The browsers reads on every page in css:
#sidebar + #wrapper + #footer {
margin-left:18em;
}
but at full post page
#sidebar + #wrapper + #footer {
margin-left: 18em;
}
it doesn't work
Footer css
/* Footer */
#sidebar + #wrapper + #footer {
margin-left: 18em;
}
#media screen and (max-width: 1280px) {
#sidebar + #wrapper + #footer {
margin-left: 0;
}
}
#footer > .inner a {
border-bottom-color: rgba(255, 255, 255, 0.15);
}
#footer > .inner a:hover {
border-bottom-color: transparent;
}
#footer > .inner .menu {
font-size: 0.8em;
color: rgba(255, 255, 255, 0.15);
}
#header + #wrapper + #footer > .inner {
margin: 0 auto;
}
footer.php
<!-- Footer -->
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<ul class="menu">
<?php if ( ! dynamic_sidebar( 'footer_sidebar' ) ) : ?>
<li>© Untitled. All rights reserved.</li>
<?php endif; ?>
</ul>
</div>
</footer>
<!-- Scripts -->
<?php wp_footer(); ?>
</body>
</html>
single.php
<?php get_header(); ?>
<!-- Wrapper -->
<div id="wrapper">
<!-- One -->
<section id="one" class="wrapper style2 spotlights">
<?php while(have_posts()) : the_post(); ?>
<section>
<div class="content">
<div class="sin_content">
<h2><?php the_title(); ?></h2>
<?php echo do_shortcode("[easy_image_gallery]");
remove_filter( 'the_content', 'easy_image_gallery_append_to_content' ); ?>
</div>
<?php the_content(); ?>
</div>
</div>
</section>
<div class="wordpress_commentss-hd">
<div class="wordpress_commentss">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
</section>
</div>
<?php get_footer(); ?>
why it doesn't work on full posts pages while works fine on other pages?
Haha, found it :) You have one too many closing div's. Remove the one in single.php between:
remove_filter( 'the_content', 'easy_image_gallery_append_to_content' ); ?>
</div> <--- That one!
<?php the_content(); ?>
I have a problem with my container, it actually overlapping to the header, how do I adjust it in css? It should be under the header with a little margin between header and the container.
see the screenshot here
#myHeader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background-color: YELLOW;
box-shadow: 0px 2px 3px #888888;
height: 150px;
opacity:0.95;
filter:alpha(opacity=10);
}
#myContent {
padding-top: 10px;
}
#myContent .row {
background-color: #fff;
}
#myContent h1{
margin-top: 0;
}
<section id="myContent">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<div>
<br />
<?php if ($breadcrumb): ?>
<div id="breadcrumb"><?php print $breadcrumb; ?></div>
<?php endif; ?>
<?php print $messages; ?>
<div id="content" class="column"><div class="section">
<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; ?>
</div></div> <!-- /.section, /#content -->
<?php if($is_front):?>
<h2>MISSION & VISION<br /></h2>
<!-- <img src="<?php print(path_to_theme()); ?>/images/Bottom.jpg" alt="" class="img-thumbnail pull-left" style="margin-right: 10px;" /> -->
<div>
Our company comes to trade few years ago but from beginning we start to do only professional projects.
We our not satisfied with just good result. It needs to be perfect.
<br /><br />
That's why we teach our employers still to make them the best in this region.
Every 2 years we give to our employers test from new technologies to make sure that we are leaders on market.
<br /><br />
There is no excuse for fails. Our standards are so high that for us is every time the first rule quality.
<br /><br />
You can see in photogallery our references but they are more. Our company are in touch with partners like QINT, TSN-D or FinishLine...
<br /><br />
Come to our company take prospects to see if our portfolio fit to your vision and after that we can find the best way
how to realize it TOGETHER!
<br /><br />
</div>
<?php endif; ?>
</div>
</div>
the header should be inside your container and give fixed width you container
here is an example:
.container{ width:100%; max-width:500px; margin:0 auto; position:relative; background-color:yellow; padding-top:100px;}
.header{ width:100%; max-width:500px; margin-left:-250px; left:50%; height:100px; background-color:red; position:fixed; top:0px; text-align:center;}
<div class="container">
<div class="header">Header</div>
This is your container<br/>
This is your container<br/>
This is your container<br/>
This is your container<br/>
This is your container<br/>
This is your container<br/>
</div>
I deppared myself with the same problem here and apparently, I solved it using the following sollution:
style="z-index: 1" for the navbar or header;
style="z-index: 0" for the container;
*Reminder: using the "style" inside your html script instead of a css folder linked to it is deprecated, it will work but its a better practice trying to avoid this.
Basically, i split up the page in 2 columns, and tried inserting sidebar code into the right one (span4). But for some reason, it keeps showing under span8
page code
<div class="row pull-right"><div class="span12" id="hdimg"></div></div>
<div class="row pull-right" id="pgg">
<div class="span8" id="pagecn">
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<div class="ttl">
<?php if ( is_singular() ) {echo '<h1 class="entry-title">';} else {echo '<h2 class="entry-title">';} ?><a title="<?php printf( __('Read %s', 'blankslate'), the_title_attribute('echo=0') ); ?>" rel="bookmark"><?php the_title(); ?></a><?php if ( is_singular() ) {echo '</h1>';} else {echo '</h2>';} ?>
</div>
<div id="cn">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
<div class="span4">
<?php if ( is_active_sidebar('primary-widget-area') ) : ?>
<div id="primary" class="widget-area">
<ul class="sid">
<?php dynamic_sidebar('primary-widget-area'); ?>
</ul>
</div>
<?php endif; ?>
</div>
</div>
</div>
<?php get_footer(); ?>
css for it
#hdimg {
width: 948px;
height:185px;
background-image: url(images/banner.jpg);
}
#pgg {
width:948px;
margin-top:4px;
background-color: white;
padding-top: 10px;
padding-bottom: 20px;
}
#cn {margin-top: 15px;}
link to see live
http://soloveich.com/project3/
#pgg {
width:948px;
margin-top:4px;
background-color: white;
padding-top: 10px;
padding-bottom: 20px;
}
Remove width
#pgg {
margin-top:4px;
background-color: white;
padding-top: 10px;
padding-bottom: 20px;
}
I see what you tried to do but you used it incorrectly - fix background in a different way
<div class="" id="hdimg"></div>
This is for your header - remove grid class
change #hdimg width to
hdimg { width: 960px !important; }
I don't know why does page navigation do not work correctly.
There are more than 8 postings, but it shows just 8 postings. And I can't find page number '2' and the text 'next page'. Why?
<script>
$(".m7").show();
</script><div class="ppddff" style="border-bottom:1px solid black; margin-bottom:2px;">
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
<link rel="image_src" href="http://www.wapsmag.com/wp-content/uploads/2013/02/blog_th.jpg" />
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.blttl a{ font-family: 'Nanum Myeongjo','NanumMyeongjoExtraboldWeb', 맑은 고딕; color:#000;}
.blttl a:hover { text-decoration:none; color:#000;}
.tagstyle a{ font-family: 'Nanum Myeongjo','NanumMyeongjoWeb', 맑은 고딕; color:#000;}
.tagstyle a:hover { text-decoration:none; color:#000;}
.ttop { background-color:black;}
.pagg{padding-top:100px; padding-bottom:0px;}
.catttl a { color:#000000; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif;}
.catttl a:hover{text-decoration:underline;}
.ttyyuu a { color:#000000; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif;}
.ttyyuu a:hover{text-decoration:underline;}
.subm a { margin:0 5px 0 5px; color:#666; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif;}
.subm a:hover { color:#000000; text-decoration:underline;}
.cover1 { display:none;}
</style>
<div style="width:100%; position:relative; overflow:hidden;">
<div style="width:900px; margin:20px auto; ">
<div style="padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #666;">
<div style="width:150px; height:210px; float:left; margin-top:10px; margin-right:20px; position:relative;"><?php ciii_category_images(""); ?></div>
<div style="width:730px; height:210px; float:left;">
<div class="blttl fvb" style="font-family: 'Nanum Myeongjo','NanumMyeongjoExtraboldWeb', 맑은 고딕, 'Georgia'; font-size:16pt; color:#000; padding-top:10px; margin-bottom:3px; text-align:left;" ><?php single_cat_title(); ?> </div>
<div style="font-size:10pt; color:#999; text-align:left; font-family:Georgia, 'Times New Roman', Times, serif; "class="ttyyuu"> <?php echo category_description( ); ?>
</div>
<div style="width:900px; margin:10px auto; position:relative; height:30px; text-align:center;">
<div class="addthis_toolbox addthis_default_style " style="text-align:center; padding-left:0px;">
<a class="addthis_button_favorites"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-505280914104c869"></script>
<script>$(".addthis_button_tweet").css("width","90"); </script>
</div>
</div>
<div style="clear:both;"></div>
</div>
<?php while (have_posts()) : the_post(); ?>
<div style="width:900px; margin:0 auto;">
<div style="width:900px; margin:0 auto; padding-top:20px; padding-bottom:10px; text-align:center; font-size:16pt; color:#000; font-family: 'Nanum Myeongjo','NanumMyeongjoExtraBoldWeb',
맑은 고딕;"><?php the_title(); ?></div>
<div style="width:900px; text-align:center; font-size:9pt; color:#999999; font-family: 'Nanum Myeongjo','NanumMyeongjoWeb', 맑은 고딕;"><?php the_time(); ?></div>
<div style="width:900px; margin:0 auto; line-height:1.8em; font-size:10pt; color:#666666; font-family: 'Nanum Gothic','NanumGothicWeb', 맑은 고딕; padding-bottom:30px;"><?php
the_content(); ?>
</div>
<div style="width:900px; margin:0 auto; padding-top:20px; padding-bottom:20px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; ">
<div style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:12pt; color:#000000; padding-bottom:5px; text-align:left;">Tag <img src="/tagg.jpg" /></div>
<div class="tagstyle" style="font-family: 'Nanum Myeongjo','NanumMyeongjoWeb', 맑은 고딕, 'Georgia'; font-size:10pt; color:#000; text-align:left;"><?php the_tags( '<div
class="tagstyle">', ', ', '</div>'); ?></div>
</div><div style="height:0px;"></div>
</div>
<div class="blttl fvb" style="font-family: 'Nanum Myeongjo','NanumMyeongjoExtraboldWeb', 맑은 고딕, 'Gerogia'; font-size:16pt; color:#000; padding-top:10px; margin-bottom:3px; text-
align:left;" >
</div></div>
<?php endwhile; ?>
<div style="clear:both;">
</div>
</div>
<div style="padding-top:30px; border-top:1px solid black; width:900px; margin:0 auto;"><?php query_posts(array(
'showposts' => 1,
'orderby' => 'rand',
'category_name' => 'sbanner' //You can insert any category name
));
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php echo get_post_meta($post->ID, 'url', true) ?>" target="_new"/> <?php the_post_thumbnail(); ?></a>
<?php endwhile; endif; ?></div>
</div>
<div class="navvi" style="padding-top:20px; padding-bottom:40px; width:900px; margin:0 auto;"><?php wp_pagenavi(); ?></div>
<?php else : if ( is_category() ) { printf("<div class='center sorry' style='padding:150px 0 150px 0;'>Sorry, but there aren't any posts in the %s category yet.</div>", single_cat_title
('',false));} endif; ?>
</div>
<style>.sorry {font-family: 'Nanum Myeongjo','NanumMyeongjoWeb', 맑은 고딕; font-size:12pt;}
.navvi a { color:#666666;}
.navvi a:hover { color:#000000; text-decoration:underline;}
</style>
</div>
You are doing a second post query in your page, before calling the pagination plugin so it use this query to display pages, not the first/main one.
<div style="padding-top:30px; border-top:1px solid black; width:900px; margin:0 auto;">
<?php query_posts(array(
'showposts' => 1,
'orderby' => 'rand',
'category_name' => 'sbanner' //You can insert any category name
));
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php echo get_post_meta($post->ID, 'url', true) ?>" target="_new"/> <?php the_post_thumbnail(); ?></a>
<?php endwhile; endif; ?></div>
</div>
Before the second query, get the value of wp_pagenavi() (check this to learn how to do it : http://wordpress.org/support/topic/plugin-wp-pagenavi-returning-a-string-not-printing-it-directly)
Then echo this value where you actually call wp_pagenavi();