I'm not sure why this is, but my wordpress post isn't actually nested inside the div that the PHP code is nested in.
Here is the code on the html side:
<!-- BLOG -->
<div class="blog" id="blog">
<div class="wrap">
<div class="col-sm-12">
<?php
$args = array( 'numberposts' => 1, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
echo '<section id="latest_posts">';
foreach ($postslist as $post) : setup_postdata($post); ?>
<h2><?php the_date(); ?></h2>
<h2> <?php the_title(); ?></h1>
<?php endforeach; ?>
<p><?php the_content();?></p>
</section>
</div>
</div>
</div>
And here is the only CSS affecting this code:
/* BLOG */
.blog {
background-image: url("../images/pat_1_bg.png");
padding-top: 60px;
padding-bottom: 60px;
height: 100%;
}
Any idea why this would be sitting outside of the div? It's almost like it has a positive z-index, which it doesn't. I can change the height of 'blog' as much as I want, and it will indeed affect the height of the div, but the post content is unaffected.
Related
The page contents floats left initially and when scrolled down it displays in the center of the page.
Please see https://buckbaaz.com/category/photography/
I could not find out the CSS issue
Any help?
Code
<div class="col-md-12 text-center pad20">
<h1>Category : <?php the_category(', '); ?></h1>
</div>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<h2><?php echo the_title(); ?></h2>
<?php
if (is_category( $category = 'Photography' ) ) {
if(has_post_thumbnail()){
echo '<div class="postthumb">';
the_post_thumbnail('thumbnail');
echo '</div>';
}
}
?>
</div>
<?php
endwhile;
// Archive doesn't exist:
else :
esc_html__( 'Nothing found, sorry.','north' );
endif;
vntd_pagination();
?>
</div>
</div>
Make your page-content DIV full width:
#page-content {
overflow: hidden;
position: relative;
width: 100%;
}
Can anybody help me get to the bottom of this?
I have icons for several post types that will be appearing across the screen, the whole thing is supposed to look like this on the page if I can get the icons to show up:
The farthest I have gotten is having every thing BUT the icons on display, here's why:
This is what puts the icons on the page. It's a custom field with some radio buttons for names and the values coordinate to class names in the HTML tags for the icons.
<div class="section-header">
<!-- If user uploaded an image -->
<?php if( !empty($features_section_image) ) : ?>
<img src="<?php echo $features_section_image['url']; ?>" alt="<?php echo $features_section_image['alt']; ?>">
<?php endif; ?>
<h2><?php echo $features_section_title; ?></h2>
<!-- If user added body text -->
<?php if( !empty($features_section_body) ) : ?>
<p class="lead"><?php echo $features_section_body; ?></p>
<?php endif; ?>
</div><!-- section-header -->
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'course_feature', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-sm-2">
<i class="<?php the_field('course_feature_icon'); ?>"></i>
<h4><?php the_title(); ?></h4>
</div><!-- end col -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- row -->
</div><!-- container -->
</section><!-- course-features -->
The html classes are then taken by the CSS file and specified.
/* === CUSTOM ICON SPRITES === */
i.ci {
display: inline-block;
height: 40px;
width: 40px;
background: url('/wp-content/themes/Bootstrap2WordPress/bootstrap2wordpress/assets/img/icon-sprite.png') no-repeat;
}
.ci.ci-computer { background-position: 0 0; }
.ci.ci-watch { background-position: -40px 0; }
.ci.ci-calendar { background-position: -80px 0; }
.ci.ci-community { background-position: -120px 0; }
.ci.ci-instructor { background-position: -160px 0; }
.ci.ci-device { background-position: -200px 0; }
The background for the icon's class assigns the background image url to all the icons, this is because the background is a sprite sheet and the CSS for the individual CSS classes crop all the other sprites out of the sprite sheet. It's a ridiculously complicated way of doing it, I know, but I've got to do it this way.
So, I try it out and I get this.
What do I do?
Use background-image:url(); instead of just background:;
update: It is most likely the lack of url() and not the fact that you used background versus background-image
I want to add a picture above the footer as seen picture below, or you can visit the website: http://creativelab.twofour54.com/en/
Example of the photo from TwoFour54
The website I'm testing it on is wordpress. I tried playing with the footer.php however it works nicely but when I stretch the site (zoom out or in) It gets ruined. I tried to make it static with position tag from CSS but that didnt work.
<div class="cfa" style="margin-left: 200px; width: 100%; z-index: 10;">
<div class="container">
<div class="col-sm-12">
<img src="http://localhost:8080/TESTWORDPRESS/wp-content/uploads/2017/01/Sketch-Book-icon.png">
</div>
</div>
</div>
<?php
/*
Template for Footer
*/
?>
<footer id="footer">
<div class="row clearfix">
<?php
if ( ! dynamic_sidebar ( 'footer_widgets' ) ){
thdglkr_emptysidebar('Footer');
}
?>
</div><!-- row -->
<?php if (_option('footer_menu','1')=='1'){ ?>
<div class="footer-last row mtf clearfix">
<span class="copyright"><?php echo _option('footer_text'); ?></span>
<?php
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu' => 'Footer Menu',
'container' => 'div',
'container_class' => '' ,
'menu_class' => 'foot-menu',
)
);
}else{?>
<div class="footer-last row mtf clearfix center">
<span class="copyright center"><?php echo _option('footer_text'); ?></span>
<?php } ?>
</div><!-- end last footer -->
</footer><!-- end footer -->
</div><!-- end layout -->
</div><!-- end frame -->
<?php if (_option('footer_gototop')==1): ?>
<div id="toTop"><i class="icon-angle-up"></i></div><!-- Back to top -->
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
note: code above is Footer.php from my test local host
Does anyone have any ideas?
Put your .cfa inside your footer in your html. And in your css:
.cfa {
position: absolute;
top: 0;
left: 200px;
margin-top: -100px; //change this to the height of your image
}
EDIT: Actually it's better if you can remove it from your HTML and just add it via css using a :before pseudo-element if you're using it just for design purposes.
DISCLAIMER : I did not code the theme. This was made by another developer who left the project and I am making adjustments based on the new requirements. I don't have experience in Wordpress Theming but I can understand codes.
I am making a design in a website and I want to make my logo to be like floating above the Slider layer. I am working on a wordpress theme:
As you can see the Logo 'Red Dela Cruz' is on the top occupying a separate space or div. I want it inside the slider and floating on it like a layer, whenever the slide changes image, logo should still be there. Here is my code:
<div class="slider">
<img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
<div id="one-by-one-slider" class="one-by-one-slider">
<ul class="one-by-one-slider-large">
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li>
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
<div class="slider-content text-center">
<div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</div>
</div>
<div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
<div class=" container">
<div class="row">
<div class="col-md-12">
<h3><?php the_content(); ?></h3>
</div>
</div>
</div>
</div>
<!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
<div class=" container">
<div class="row">
<div class="col-md-12">
For Bookings
</div>
</div>
</div>
</div> -->
</div>
</li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
<div class="one-by-one-slider-nav">
<ul class="one-by-one-slider-thumbs">
<li class="one-by-one-slider-element"></li>
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li></li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
</div><!-- one-by-one-slider-nav -->
</div><!-- one-by-one-slider -->
</div><!-- slider -->
The logo is on the 2nd line and I haven't done any css on class
web-logo
This should work:
.web-logo {
position:absolute;
}
If the logo goes "behind" the slider, you should add a z-index, and make it higher, untill the image is showing:
.web-logo {
position:absolute;
z-index:2;
}
you can try this one:
.web-logo {
position: absolute;
right: 10px;
top: 10px;
z-index:2;
}
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.