How can I create a full-width dashboard widget in WordPress?
I want to create a widget like the new one "welcome" in WordPress 3.3.
That plugin is in dashboard.php in wp_welcome_panel() but I don't know how they show it full-width.
They create a div "welcome-panel" outside the main div where all the widgets go, "dashboard-widgets-wrap":
<div id="welcome-panel" class="welcome-panel"></div>
<div id="dashboard-widgets-wrap">
<div id="dashboard-widgets" class="metabox-holder">
<div id="postbox-container-1" class="postbox-container" style="width:50%;">
<div id="postbox-container-2" class="postbox-container" style="width:50%;">
<div id="postbox-container-3" class="postbox-container" style="display:none;width:50%;">
<div id="postbox-container-4" class="postbox-container" style="display:none;width:50%;">
</div>
How can I achieve that?
Edit
I've found in wp-admin/index.php in line 90 this:
<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>
<?php wp_welcome_panel(); ?>
<div id="dashboard-widgets-wrap">
<?php wp_dashboard(); ?>
<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->
</div><!-- wrap -->
So they do it inserting directly the code.
The only solution I see is maybe using jQuery?
Any other option?
A full-width widget can be very useful for adding content at the top of your own themes with updates or corroborative info or anything.
Starting with WordPress 3.5.0, you can directly modify the welcome panel:
First remove the existing content, then add your own function to render the content:
remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'my_custom_content' );
function my_custom_content()
{
?>
<h1>Hello!</h1>
<?php
}
I was able to achieve this goal by modifying the admin css as below:
add_action('admin_head', 'panfor_admin_custom_styles');
function panfor_admin_custom_styles() {
$output_css = '<style type="text/css">
#media only screen and (min-width: 800px) and (max-width: 1499px) {
#dashboard-widgets #postbox-container-1 { width: 100% !important; }
#dashboard-widgets #postbox-container-2 { width: 50% !important; }
#dashboard-widgets #postbox-container-3 { width: 50% !important; }
}
#media only screen and (min-width: 1500px) and (max-width: 1800px) {
#dashboard-widgets #postbox-container-1 { width: 100% !important; }
#dashboard-widgets #postbox-container-2 { width: 50% !important; }
#dashboard-widgets #postbox-container-3 { width: 50% !important; }
}
</style>';
echo $output_css;
}
The above code enforces full width for all widgets in the first column of Dashboard for certain screen widths. The second and third columns are displayed below first colum.
This is what it looks like in my Dashboard
So it is not the widget as such that determines its width, but the css styles.
There is still a small problem in my CSS that I cannot solve. Namely, the second and third columns switch places, depending on the width of the window.
Unfortunately, there's no way to hook into that Welcome panel.
I've got two solutions for this.
Manipulating the div with CSS and jQuery
or
Injecting an iframe
In this case, I'm cleaning all the dashboard widgets, tabs, welcome panel. Forcing a one-column layout. And finally filling the void with the iframe.
But this can be easily adapted to suit your taste.
Related
I have an issue in my wordpress blog post thumbnail image. The height was stretch, I do the css height: auto; but still won't behave as expected.
.post-image img {
height: auto;
}
<?php if(has_post_thumbnail()) { //check for feature image ?>
<div class="post-image">
<?php the_post_thumbnail(); ?>
</div><!---end post image-->
<?php } ?>
Use <?php the_post_thumbnail(array(200x200)); ?>
add height & width using array to apply to image. Still not resolved then css comes from any parent structure.
I want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.
This is the error that I get:
http://prntscr.com/d4getm
This is the code that I have:
<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>
<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<div class="col-sm-6 col-md-3">
<div class="thumbnail"><?php the_post_thumbnail(array(100, 100)); ?>
<div class="caption">
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><?php the_title(); ?></h3>
<!--// Repeat the process and reset once it hits the limit-->
</div>
</div>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
And this is the CSS:
div.caption{
text-align: center;
}
div.thumbnail{
border: 4px inset black;
height: 200px;
}
h3.center{
font-size: 20px;
}
The answer is found here: How can I make Bootstrap columns all the same height?
For this particular problem some adjustments need to be made to the html structure in order to get it to work.
I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/
UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/
Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.
I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.
Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/
You'll need to work out the bottom border though.
Hiall,
I’m using wordpress and are displaying a main title header for feature article.
<span class="mytitle">
<?php the_title(); ?>
</span>
Now if the heading title is 30 characters in length it fits onto 1 line perfect, but if the length of the title is 32 characters then it spills onto 2 lines and I have an ugly looking headline because there is all this unwanted space.
Is there anyway to tell the title header in css to stay on 1 line and automatically reduce its own font size to fit in that one line etc???
I know I can use
css
white-space: nowrap;
to stop the line from wrapping to the next line, but what about the font-size, anyway for it to automatically reduce its size based on the container it is in or?
Any help would be great
In my opinion the best option is to set 2 css classes and a simple if statement for the title length:
$string = the_title();
$length = strlen( utf8_decode( $string ) );
if ($length > 30) {
echo '<span class="larger">' . the_title() . '</span>';
} else {
echo '<span class="smaller">' . the_title() . '</span>';
}
You can use a media query to change the size of the text based on screen size.
example css:
#media screen and (max-width:1024px) {
.mytitle{
font-size:28px;
}
}
you can put whatever pixel amount you want in the max-width: <-- what ever screen size you want to trigger this style at.
you can copy paste the same code and use it at a mobile width of like 480px and change the font size to 24px, so then it works are a bunch of different screen sizes.
You can achieve this with JavaScript in a number of ways. Here's a simple plug and play solution. Note that it requires your container to have a height:
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}
adjustHeights('h1');
#container {
width: 300px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<h1>Some text that normally flows more than one line</h1>
</div>
Source: Meta Toad
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}
adjustHeights('h1');
#container {
width: 300px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<h1>Some text that normally flows more than one line</h1>
</div>
List item
In Magento 1.9.0.1, how can I overlap 2 images on image product (product page) and resize they in the same way as image product resize on changing resolution?
I tried with css pseudo-element (:before and :after) but I'm not able to resize and to be honest I noticed strange behavior (images initially isn't shown and appear only when you resize Chrome/Firefox window...).
.product-image.product-image-zoom.zoom-available:before {
content: url("/media/css/image_top.png");
z-index: 10;
position: absolute;
top: -6px;
left: -5px;
}
.product-image.product-image-zoom.zoom-available:after {
content: url("/media/css/image_bottom.png");
z-index: 10;
position: absolute;
bottom: -4px;
}
So alternatively, I tried to insert the images through html in view.phtml
......
<div class="product-img-box">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<img src="media/css/image-top.png">
<img src="media/css/image_bottom.png">
<?php echo $this->getChildHtml('media') ?>
</div>
.......
and with similar css I was able to place it in right position but... I don't know how to "bind" resizing with product image so they can scale "togheter" (image product, image-top.png and image-bottom.png) like if they was a only one image.
Image1: http://s30.postimg.org/7fnfl2yrl/screen.png
Image2: http://s30.postimg.org/78z4gzh0x/screen3.png
I'm just a dumb, I realized now that in view.phtml
<?php echo $this->getChildHtml('media') ?>
call file /template/catalog/product/view/media.phtml so I put my <img> inside
<div class="product-image-gallery">
container and now they resize correctly. For "micro-adjust" resizing of image-top.png that less wide of div container I added some padding-right.
Just having a couple of css issues which havn't been able to figure out so I left it back to the default css.
Below is the application showing image sliders: Application
My question is how to get the Prev and Next links to be displayed on either side of the image outside the image slider rather than in the slider as it is overlapping over the images?
My other question is below the sliders it contains the slider numbers 1 2 3 so we know which image is first second and third in sliders and select them. My question is how to separate the numbers so they are not too close together?
Below is CSS for Prev and Next links:
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
Below is css for the numbers bottom of images:
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
HTML and jquery:
<div id="banner-image_<?php echo $key; ?>">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-image_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
The answer to the second part of the question is to add padding to
ol.bjqs-markers li{display:inline;}
As shown here: http://jsfiddle.net/uYXkA/
I will answer the first part after the OP posts the HTML.
EDIT:
All right, it looks like jquery creates it's own css for your prev and next. We can get around this- just add this to your css:
ul.bjqs-controls.v-centered li.bjqs-prev a {
left: -40px;
}
And:
ul.bjqs-controls.v-centered li.bjqs-next a {
right: -40px;
}
Next you will likely want to shift the images as a whole. To do this just change the css for div.lt-container. If you add
margin: 0 auto;
width: 50%;
it will become centered.
It won't look very pretty, but it will work.