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.
Related
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.
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 need some help with positioning my css elements in a wordpress theme. Here is my situation.
First, I call my header. Inside my header is my horizontal nav menu.
Next, I call my slider from the index.php. The slider is created in such a way as it takes up 100% of my screen width with 0 margin-top. Doing this allows my menu to be within my slider images.
My problem is that the next element I call is place directly under my menu, but I would like it placed under my slider images. How do I do this? Do I have to give my next element a margin-top equal to the height of my slider images? Seems there is probably a better way to do this.
The slider is only used on the index page, not on any of the sub pages.
I'm thinking maybe the right answer has something to do with the position tag but I'm not having any luck getting the functionality to work.
Here is the css for my slider positioning.
.slider {
position: absolute;
top: 0px;
width: 100%;
z-index: 1500;
}
Here is my index.php file
<?php get_header();?>
<section>
<?php get_template_part('slider', 'index');?>
</section>
<section>
<div class="row">
test
</div>
</section>
<?php get_sidebar();?>
<?php get_footer();?>
Here is my header
<body>
<header>
<section>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><?php bloginfo('name');?></h1></li><li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array( 'main-menu' => 'Main Menu', 'container' => false, 'walker' => new Top_Bar_Walker(), 'menu_class' => 'right'));?>
</section>
</nav>
</div>
</section>
</header>
And here is my slider-index.php file
<div class="row full-width slider">
<div class="preloader"></div>
<ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
<?php
$args = array('category_name' => 'Featured');
$query = new WP_Query($args);
while($query->have_posts()) : $query->the_post();
?>
<li><?php the_post_thumbnail('featured');?>
<div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
</li>
<?php
endwhile;
?>
</ul>
<div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
</div>
Thanks for any help.
I'm running a query that outputs a span4 element in a row-fluid. I added code in my css to remove the margin-left on the third span4 in a row-fluid. This has also worked so far, but suddenly the one of the span4 jumps a line. Any suggestions why this suddenly stopped working?
You can see the page here:
http://dtm-auto.ch/home/
My css:
.row-fluid [class*="span"]:nth-child(3n+1) {
margin-left: 0!important;
}
My code:
<div id="content" class="clearfix row-fluid">
<div id="main" class="span12 clearfix" role="main">
<h2 class="text-left">Neue Fahrzeuge</h2>
<div class="clearfix row-fluid">
<?php
global $wp_query;
query_posts( array(
'post_type' => 'acme_product',
'posts_per_page' => 6
));
while ( $wp_query->have_posts() ) :
$wp_query->the_post();
?><?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );?>
<div id="front-new-video" class="span4">
<h3 id="car-title"><?php the_title(); ?></h3>
<div class="thumbnail wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">Neu</div></div>
<?php the_post_thumbnail('medium');?>
<p>Preis: <span style="color:#FEF158"><?php the_field('preis'); ?> CHF</span></p>
<p>Jahr: <span style="color:#FEF158"><?php the_field('jahr'); ?></span></p>
<p>Farbe: <span style="color:#FEF158"><?php the_field('farbe'); ?></span></p>
<p>KM: <span style="color:#FEF158"><?php the_field('km'); ?> KM</span></p>
<h4> <i class="icon-chevron-sign-right"></i> Zum Fahrzeug </h4>
</div>
</div>
<?php
endwhile;
?>
</div>
</div> <!-- end #main -->
</div> <!-- end #content -->
It's because you're using height: 100% on #front-new-video which doesn't really do anything because the parents height(row-fluid) needs to be defiend for height: 100% to work.
Use a fixed height or min-height instead and your problem will be solved. e.g height: 419px;
I am trying to style a div that is nested in some ofter divs and having some trouble. Below is the code and css I am attempting to use. If you could show me the correct css tag to style the element called #cleanse I would appreciate it.
<!-- Header starts here -->
<header id="header">
<div class="align">
<!-- Logo start here -->
<div id="logo">
<?php if(get_option( 'ms_plain_logo')=="true" ) { ?>
<h1><a class="text_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"><?php echo get_bloginfo('name'); ?></a></h1>
<?php } else { ?>
<h1><a class="img_logo" href="<?php echo home_url( '/' ); ?>" data-rel="home"></a></h1>
<?php } ?>
</div>
<!-- Logo ends here -->
<!-- Navbar -->
<?php $args=array(
'theme_location'=>'primary-navigation',
'container' => 'nav',
'container_id' => 'navigation-wrapper',
'menu_id' => 'navigation',
'fallback_cb' => false
); ?>
<?php wp_nav_menu($args); ?>
<?php if(!has_nav_menu( 'primary-navigation')) { ?>
<nav id="navigation-wrapper">
<ul id="navigation">
<?php wp_list_pages( 'title_li=&sort_column=menu_order'); ?>
</ul>
</nav>
<?php } ?>
<!-- Navbar ends here -->
<div id="cleanse">
<a href="link" target="_blank">
<img src="img"/></a>
</div>
</div>
</header>
<!-- Header ends here -->
#cleanse { top: 55px; }
What do want to do? Add a margin-top or something?
This only works with position:
#cleanse { top: 55px; }
Try this:
#cleanse { margin-top: 55px; }
Also the css should be placed in the header:
<style>
/* your rules here */
</style>