I have the following css the margins are no working at all. Here is a link to the live site, keep in mind it is in mobile development so thats why it looks all funny. The element thats not moving is the austin kitson one right beside the tweet
css
i{
font-size:0.6em;
margin-top:-5px;
margin-left: -25px;
position:relative;
padding-bottom:10px;
}
html
<section class="blogPostsSection">
<header class="blogPostsHeader">
<?php edit_post_link('edit', '<p>', '</p>'); ?>
<h2><?php the_date(); ?></h2>
<h3><?php the_title(); ?></h3>
</header>
<?php $image = wp_get_attachment_image_src(get_field('add_images_here'), 'large');?>
<?php if( $image !=false ) {?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('add_images_here')) ?>" />
<?php } ?>
<p>
<?php the_content(); ?>
</p>
<a href="https://twitter.com/share" class="twitter-share-button"
data-text="<?php the_title(); ?>" data-via="twitterapi" data-lang="en">Tweet</a>
<script>
!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}
(document,"script","twitter-wjs");
</script>
<i>Austin Kitson</i>
</section>
You're not including your CSS: All your CSS and JS reference localhost. e.g., http://localhost/~anderskitson/techbasics/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.3.3
Related
I want to move left-sidebar which contains sticky top to below because it below to main header while down scrolling.
However, I cant add margin top to sticky-top under col-sm-1.
<style>
.col-sm-1 .sticky-top { margin-top: 50px}
</style>
50px is not important.The lenght should be enough to move the div to below header.
the page's codes:
<?php get_header(); ?>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-10" >50%
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<h1>
<!-- <?php //the_title(); ?>-->
</h1>
<!-- /post title -->
<div class="row">
<div class="col-sm-1 " >50%
<?php global $post; ?>
<style>
.logo-img2{
border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
}
</style>
<style>
.col-sm-1 .sticky-top { margin-top: 50px}
</style>
<div class="sticky-top ">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
</div>
</a>
<a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2"">
</div>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
</div>
</a>
<div class=" logo-img2" style="padding: 0px; text-align: center">
<ul class="list-inline">
<li class="list-inline-item">
Tooltip
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-11" >
<!-- post details -->
<span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
<span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
<span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
<!-- /post details -->
<?php the_content(); // Dynamic Content ?>
<?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
<p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>
<p><?php _e( 'This post was written by ', 'html5blank' ); the_author(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<?php comments_template(); ?>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-md-2" style="background-color:orange;height: 100%; width: 100%;">50%
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
There are some undeleted lines which is showed with <!-- so sorry.
The link : http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/10/yazi-9/
Welcome to SO!
As you have position sticky so you need top value to move it like in your case set top: 60px rather then margin
.col-sm-1 .sticky-top {
/* margin-top: 50px; */
top: 60px;
}
The main difference between static or relative and absolute or fixed
was the space they take up in the flow of the DOM. Positions static &
relative keep their natural space in the flow of the document, while
the absolute & fixed don’t — their space is removed and they have a
floating behavior.
Reference for more understanding
Also its bad to use default frame-work classes to target any class/ make it selector
I have created a custom Gutenberg block that is basically a link. When I click the block in the editor I immediately get sent to the page the block links to instead of being able to edit the block. How do I stop this from happening? I've already tried putting pointer-events: none as a style on it but that doesn't do anything surprisingly.
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
</a>
Since this may help others in the future, wrap your <a> tag in an if statement to check if your in the admin area. If you are, then it won't output those tags.
<?php if ( ! is_admin() ) : ?>
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<?php endif; ?>
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
<?php if ( ! is_admin() ) : ?>
</a>
<?php endif; ?>
My fonction should be very simple but it's not so easy for me, I need help for that.
Here is my website
and I use Custom fields so display into a modal box :
- either an image, when there is any
- or a soundcloud embed track, when there is any
Never both! But both shown by a thumbnail on homepage.
This is my code which is working actually but there is some bug like, why is there a souncloud box on the page, it should be on the lightbox.
<div id="post">
<a href="#" data-featherlight="#fl3">
<?php
if ( get_field('music') and get_field('music') != '' ) {
?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php } else { ?>
<div
<?php $image = get_field('image');
if( !empty($image) ): ?>
class="img"
href="<?php $image = get_field('image');if( !empty($image) ): ?> <?php echo $image['url']; ?>"
alt="<?php echo $image['alt']; ?> <?php endif; ?>"
data-featherlight="image" >
<?php endif; ?>
<?php } ?>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</div>
</a>
</div>
The idea is simply :
If
there is a music, get the music.
else
Get the image
any idea?
Sorry if my code is a bit dirty, I'm not a developper.
If you use php code inside of a html 'template' I would recommend the Alternative syntax for control structures.
See:
http://php.net/manual/en/control-structures.alternative-syntax.php
Then it will be something like this (it needs to be cleaned though):
<?php $image = get_field('image') ?>
<div id="post">
<?php if ( get_field('music') and get_field('music') != '' ): ?>
<iframe width="100%" height="166" scrolling="no" class="lightbox" class="frame" id="fl3" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?> &color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
<?php elseif( !empty($image) ): ?>
<a href="<?php echo $image['url']; ?>">
<img
class="img"
alt="<?php echo $image['alt']; ?>
data-featherlight="image" />
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail('post-thumbnails');
}
?>
</a>
</div>
<?php endif; ?>
</div>
This is probably not totally correct, but there is much wrong with the structure of your HTML. class="img" alt="<?php echo $image['alt']; ?> data-featherlight="image" is not added to a tag. So I assumed it had to be and img-tag. Also there are mixed attributes that belong to an a-tag.
Also the $image variable is defined twice.
I've seen this article but it's not exactly relevant to what I'm trying to do. I have a simple blog loop in which each blog has an <div class="exerpt">for the preview of the blog text. All of my posts have a border-bottom and I'm simply trying to get rid of the border-bottom, as well as make other adjustments for the last-child. However every element is being styled, not just the last one. Please note I'm using the mighty html5blank
index.php
<div class="page-section" style="padding-top:150px;">
<div class="wrapper">
<?php get_template_part('loop'); ?>
<?php get_template_part('pagination'); ?>
</div>
</div>
loop.php
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="journal-title">
<?php the_title(); ?>
</h2>
<span class="date"><?php the_time('F j, Y'); ?> </span>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail(); // Declare pixel size you need inside the array ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<!-- /post title -->
<div class="exerpt">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
</article>
.exerpt {
margin-bottom:80px;
border-bottom:1px solid #999;
padding:40px 0px 80px 0px;
}
.exerpt:last-child {
border:none;
margin-bottom: 60px;
}
Thanks!
You can add a separate class for the last item in the loop by doing something like this:
First add this before the loop starts:
<?php $post_counter = 0; ?>
Add this within the loop:
<?php $post_counter++; ?>
Then modify your excerpt code:
<div class="exerpt <?php if( $post_counter == count( $posts ) ) echo 'last-post'?>">
<?php html5wp_excerpt('html5wp_index'); // Build your custom callback length in functions.php ?>
</div>
CSS:
.last-post {
border:none;
margin-bottom: 60px;
}
I'm rebuilding my wordpress portfolio site. I have featured images that start as grayscale with a transparent PNG on top, and roll over into full colour with no PNG.
So after figuring out how to get the transparent PNG to sit on top of my featured image, I gave myself a pat on the back before realizing that the PNG makes the entire box unclickable.
It's cancelling out the links underneath (featured images to post)
"pointer-events:none" doesn't help either, it actually glitches the rollover effect a bit.
This is the CSS related to the image...
#png1 {width: 305px;
height: 175px;
float: left;
position: absolute;
z-index: 1;
}
#png1:hover {opacity: 0;
}
And this is the php I've got going on...
<?php if ( have_posts() ) : ?>
<?php $i = 0; ?>
<?php while ( have_posts() ) : the_post(); $i++; ?>
<div class="post_home">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(array(305,175)); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url'); ?>/i/noimage.jpg" width="305" height="175" alt=""/>
<?php endif; ?>
</a>
<h2><?php the_title(); ?></h2>
</div>
<?php if ($i % 6 == 0) echo '<div style="clear: both;"></div>'?>
<?php endwhile; ?>
Any suggestions?
EDIT:
I am by no means a web designer at all. I'm a print designer. I work in WP because I'm comfortable with CSS. I have a feeling the answer is right there in the code, staring at me, and I just have no idea what to do with it.
Any help at all would be super awesome :)
As I explained in my comment, you can just change the structure of the html slightly and put the img tag inside the anchor, this can be achieved by simply swapping the two lines:
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
becomes
<a href="<?php the_permalink() ?>" class="thumb" title="<?php the_title(); ?>">
<img id="png1" src="http://www.katiehodgson.com/test/wp-content/uploads/2013/07/thumb_overlay1.png" />