I need to center (tags)shortcode that I put in footer PHP.
I used this plugin [cool_tag_cloud] https://it.wordpress.org/plugins/cool-tag-cloud/
Code that I put in footer PHP <?php echo do_shortcode('[cool_tag_cloud style="blue"]'); ?>
How to center tags from this plugin in my footer?
Sounds very much like you just need to surround the output with a <div>...</div> that is minimal in size and that centers it self, something like this:
<div style="margin: 0px auto;width: 1px;"><?php echo do_shortcode('[cool_tag_cloud style="blue"]'); ?></div>
Kind of like (simulating)
<div style="margin: 0px auto;width: 1px;"><div style="background-color: #0f0;height: 100px;width: 100px;"></div></div>
Related
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I have this CSS for FULL Background image. Now i want to pass PHP variable to this URL to change the background image dynamically. Plz let me know . my codes are..
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/6.jpg");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
You can use Inline or internal css as follow:
Internal
<style>
div { background-image: url(<?php echo $imageURL;?>); }
</style>
Inline
<div style="background-image:url(<?php echo $imageUrl?>) no-repeat center center fixed">
</div>
Reference from Change css background-image with php
you can use php variable in your style code but must need to write css code after php variable . something like this
<?php
$bg_image = '../img/picmax/6.jpg'; // this is static value for test
?>
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
and add style after define php value then you can use this code
<style>
.imgback {
padding-top: 140px;
height: 100vh;
min-height: 400px;
background-size: cover;
background-image: url("<?=$bg_image?>");
}
</style>
of you can use this php value in your html code
<?php
$bg_image = '../img/picmax/6.jpg';
?>
<section class="imgback" style="background-image: url('<?php echo $bg_image ?>')">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
hope it will help you.
You can simply load a data from database and place it inside everywhere you like.
`<?php
$a = "6.jpg";
?>`
then insert it into your css
.imgback {
padding-top:140px;
height:100vh;
min-height:400px;
background-size:cover;
background-image:url("../img/picmax/");
}
<section class="imgback">
<div class="container">
<h1 class="text-center">Traveller's Zone.</h1>
</div>
</section>
But that won't be good enough because php only runs once on every refresh or load. (you can use jQuery) or you better use JavaScript for these type of works as because they are triggered by events so you can change images without refreshing the page
I am using this simple code in my view.php. The div is aligned horizontally correctly, but it aligns vertically in print.
<div class="row">
<div class="col-lg-6">
<div class="col-lg-7" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b>Patient Name:</b> <?= $model->patient_name ?>
</div>
<div class="col-lg-5" style="padding:5px;box-sizing: border-box;border: 1px solid #ddd;background-color:#f9f9f9">
<b> Auth. No.:</b> <?= $model->authorisation_number ?>
</div></div> </div>
I want these div to align horizontally in print as well. I am not using any custom print.css for this page.
Ok I found the answer-
I need to use <div class=col-xs-*> in place of <div class = col-lg-*> that mostly achieves what I am looking for.
I welcome if there is any better workaround.
Thanks.
Sorry if this is a bit dumb but I have never dabbled with PHP before.
Basically I am using a premium wordpress theme called Kingsize, which is beautiful but does not have the author displayed on a post. I have managed to get it in there, on the individual post (by editing single.php) and the post list (loop.php).
I guess I did that sort of right because it is appearing in there. Problem is in both instances it is on the line beneath the date and I want it on same line:
http://bathastronomers.co.uk/category/bath-astronomers/
I thought I could figure it out if I found "post_date" in the style.css but it doesn't appear to be there!
Also, I want rid of the little icons before date and author.
Any ideas?
Here's the relevant code in single.php:
<?php
if( $data['wm_date_enabled'] == '1' ) { //data is enabled
?>
<div class="metadata">
<p class="post_date"><?php the_time(get_option('date_format'));?></p>
<p class="post_author"><?php the_author(); ?></p>
</div>
<?php}
?>
Change it to:
<div class="metadata">
<p>
<span class="post_date"><?php the_time(get_option('date_format'));?></span>
<span class="post_author"><?php the_author(); ?></span>
</p>
</div>
If you want the author to appear on the same line as the Date, add this to your style.css :
.post .metadata p.post_date {
float:left;
}
If you want to hide the small icon on the left, modify the following :
.post .metadata p {
padding: 0px 0px 0px 25px;
background: url("images/calendar.png") no-repeat scroll left -1px transparent;
}
For the following :
.post .metadata p {
padding: 0px;
}
Note that you don't "style PHP". You style HTML. To put it simply, PHP is a HTML generator.
Hi Is there any of you out there that is able to assist me on this. I'm experimenting with the fluid layout of bootstrap on my wordpress site. Apparently the isn't working properly. I created a .span 12 column and its not taking up the full width of the browser. Instead its width shrank. Is there a way around this?
Heres the experiment which i created using a custom page template
<?php
/*
Template Name: page-work
*/
?>
<?php get_header(); ?>
<h1><?php the_title(); ?></h1>
<style type="text/css">
.span12{
background:black;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
.span6{
background:blue;
color:white;
padding:20px 0;
text-align:center;
margin-top:15px;
}
</style>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">span 12</div>
</div>
<div class="row-fluid">
<div class="span6">span 6</div>
<div class="span6">span 6</div>
</div>
</div>
This is because bootstrap has a fixed width of span12 as
.span12 {
width: 1170px;
}
for bigger screens.
If you still want, you can try this:
#media (min-width: 1200px) {
.span12 {
width: 100%;
}
}
Always create a child css file and put that below the bootstrap file.
I would recommend upgrading to Bootstrap 3 as it handles fluid-containers in a much better way and you wouldn't have this problem in the first place.
.span12 becomes col-xx-12 (xx is either xs, sm, md and lg...read up on that!) and has a width of 100%. BS3 uses percentage widths rather than fixed widths as mentioned in the answer above. It's also not too difficult to move from BS2 to 3.
http://getbootstrap.com/ - download here
http://getbootstrap.com/getting-started/ - documentation
As a general rule, wordpress won't really change how your website looks. It's the styles you put around it so Wordpress in this case is irrelevant.