I have two flags in header ( im using customizr theme ), but in Chrome I see only 1 flag and in firefox 2 flags.
In Google Chrome:
and in Mozille Firefox:
My Question is, why I see only 1 flag in chrome ?
My code for this :
<header class="<?php echo implode( " ", apply_filters('tc_header_classes', array('tc-header' ,'clearfix', 'row-fluid') ) ) ?>" role="banner">
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
<div style = 'position: absolute; right: 100px; top: 10px; z-index: 201'>
<?php wp_loginout(); ?>
</div>
<div style = 'position: relative; right: 80px;'>
<?php
// The '__header' hook is used with the following callback functions (ordered by priorities) :
//TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
do_action( '__header' );
?>
</div>
</header>
I already tried to move flags right position to 40,100, ... But nothing.
Can somebody help me or give some clue :) Thanks !
Try to remove the position styles from flags div because of this one flags not appear properly. Just empty for now and than check where flags displayed.
<div style = ''>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
Related
images order vertically, I want to display horizontally one row.I use fancybox3 and boostrap4
this is my code
<?php
$sayfa = 'Ürünler';
include('inc/vt.php');
include('inc/head.php');
include('inc/nav.php');
$sorgu = $baglanti->prepare("SELECT * FROM urunler where aktif=1 order by sira");
$sorgu->execute();
$yon = 'sag';
while ($sonuc = $sorgu->fetch()) {
?>
<section class="imglist">
<a href="img/<?= $sonuc['foto'] ?>" data-fancybox data-caption="This image has a caption">
<img src="img/<?= $sonuc['foto'] ?>" style='height: 50%; width: 100%; object-fit: contain;display:
block;margin: auto auto' />
</a>
</div>
<?php
if ($yon == 'sag') $yon = 'sol';
else $yon = 'sag';
} //while end
include('inc/footer.php');
?>
I am on mobile so please excuse grammar/formatting.
Change your display attribute to:
display: inline-block;
and LMK if that fixes it.
I have two pictures in my wordpress header, but these pictures are broken. How or where I need to put these pictures..
I created folder C:\wamp\www\wordpress\wordpress\wp-content\images and there is 2 images, but how I get these in to my header.
I already tried:
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='images\english.gif' /></a>
</div>
But its not working, what im doing wrong ??
Can somebody help me ? Thanks !
Images should generally go in a your-theme-name/images folder. What you're doing isn't necessarily wrong but it can lead to confusion down the line.
You can use <?php get_template_directory_uri(); ?> to get the current's template directory path. This is used for when your current theme is a child theme.
You can also use <?php bloginfo('template_directory');?> which will return the current template directory. If you're using a child theme, it will return the uri to the parent theme, not the child.
Long story short, you can use it like this for no child:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php bloginfo('template_directory');?>/images/image-name" /></a>
And like this for a child theme:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php get_template_directory_uri(); ?>/images/image-name" /></a>
Are you trying to add these pictures to a header theme? When editing a Wordpress theme I think you have to find the original theme header file in the theme folder in the wp-content folder.
C:\wamp\www\wordpress\wordpress\wp-content\themes\ (the name of your theme folder)
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
I'm creating a WordPress theme and can't get two posts to nest next to each other correctly, the guys on the WP forums haven't been any help (one response). Without any of the WP hookups (the PHP stuff) the divs nest correctly, I styled and structured them like this:
CSS:
.singlecolumnpost .post {
float: left;
display: block;
}
.twocolumnpost .post {
float: left;
display: block;
width: 50%;
}
.singlecolumnpost img {
display: block;
max-width: 940px;
max-height: 529px;
width: 100%;
padding: 5px 0;
}
.twocolumnpost img {
max-width: 460px;
max-height: 259px;
width: 100%;
padding: 5px 0 5px 0;
z-index: 4;
}
.post-thumb {
width: 100%;
margin: 0 auto;
}
HTML:
<div id = "main">
<div class = "singlecolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
</div>
<div class = "twocolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
<div class = "post 2">
<div class = "post-thumb 2">
<img src = "img/db.jpeg"
</div>
</div>
</div>
<div class = "singlecolumnpost">
<div class = "post">
<div class = "post-thumb">
<img src = "img/db.jpeg"
</div>
</div>
</div>
</div>
This works because I declared a post class twice inside the twocolumnpost. Now for the wordpress structure (same styling):
<div class = "twocolumnpost">
<div <?php post_class() ?>>
<?php if (has_post_thumbnail()) : ?>
<div class = "post-thumb">
<?php the_post_thumbnail(); ?>
<div class = "caption">
<p class = "caption-text">Caption</p>
</div>
</div>
<?php endif; ?>
</div>
</div>
This makes them nest weirdly as you can see here: http://suburbia.comoj.com/wordpress/
I'm struggling to get them to play ball and just sit next to each other with the correct padding and I'm not sure if this is because I've only declared one post in the twocolumnpost. If I do declare two posts, it doubles the image which isn't right.
So what I'm asking, is either to have the posts aligning nicely with current structure, or a method of checking the previous post for the first post id, and displaying the next one on the second post.
First, get rid of the empty pagination div ntgCleaner is right that is messing it up.
The other thing is that your CSS applies a 5px padding to .twocolumnpost img but the post on the left isn't an image, it's a video in an iframe tag so that isn't being applied. Either change the CSS selector to be .twocolumnpost img, .twocolumnpost iframe or remove the padding.
This is what it looked like when I did that:
I have the following code :
<div class="wrap">
<div class="next">
<?php next_post('%', 'Next post', 'no'); ?>
</div>
<div class="prev">
<?php previous_post('%', 'Previous post', 'no'); ?>
</div>
</div>
and after hours of trying i am not able to add an image (small arrow image in png format) instead of "next post" and "previous post"
I tried (in the CSS) background-image: url(../img/arrow-left.png); amongst other things.
It does seem to work however when i create href tags
but the problem is that I cannot embed <?php next_post(); ?> in the href can I ?
like so : " class="next">
which did not work for me..
If you need any more information, please let me know and I will provide it.
Wordpress function next_post has been deprecated. Better to use the next_post_link function.
http://codex.wordpress.org/Function_Reference/next_post_link
You can change the output format including the images like this :
<div class="wrap">
<div class="next">
<?php $next_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-right.png'/>"?>
<?php next_post_link('%link', $next_dir . '<span>Next Post</span>', TRUE); ?>
</div>
<div class="prev">
<?php $prev_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-left.png'/>"?>
<?php previous_post_link('%link', '<span>Previous Post</span>' . $prev_dir, TRUE); ?>
</div>
</div>
UPDATE 1
With the provided solution you have also to modify your css file to your needs. Another way to do this (which is better imo) is without changing any php code is to do something like this :
.next a{
width: 25px;
height: 25px;
background: url(/img/arrow-right.png) no-repeat 0 0;
text-indent: -9999px;
}
.prev a{
width: 25px;
height: 25px;
background: url(/img/arrow-left.png) no-repeat 0 0;
text-indent: -9999px;
}
The html code rendered by wordpress is a links like .
You should also change the width and height to the dimensions of your images.