I am using the Twenty Thirteen theme as a base for a custom child theme that I am creating. The client would like only three widgets in the footer and I need to evenly space them. When I put three widgets there is still room on the right for a fourth (I am not using the sidebar widget, which would knock the 4th widget below the top three).
I found this code in the functions.js file:
/**
* Arranges footer widgets vertically.
*/
if ( $.isFunction( $.fn.masonry ) ) {
var columnWidth = body.is( '.sidebar' ) ? 228 : 245;
$( '#secondary .widget-area' ).masonry( {
itemSelector: '.widget',
columnWidth: columnWidth,
gutterWidth: 20,
isRTL: body.is( '.rtl' )
} );
}
} )( jQuery );
It looks like it changes the width but how do I change it to make it only 3 widgets across instead of four?
Thanks,
Matt
The gutterWidth option adds additional spacing between columns, but not on the outer sides of the container. You can alter that value to increase spacing.
However, I think you are going to have to alter other files to properly achieve the task.
Related
This is an angular app (but anyone with css knowledge can help), where there is a text area with dynamic content.
So as the content item.text changes the text area should grow or shrink according to the content to fit the content perfectly without any overflow.
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
// dont worry about the placeholder. you can ignore that.
Currently in my case scrollbar appears & it is not shrinking or growing with the dynamic content.
How can I achieve that?
Or if there is a way to convert a regular html <div> to a textarea, you can suggest that too. But prefers a solution for the above one.
I've tried css rules like, max-content fit-content etc... nothing is working out!
Install npm install ngx-autosize
in html add autosize
<textarea autosize [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
then in appmodule
put in imports: [AutosizeModule ],
Demo
This can't be accomplished with just css, it needs JavaScript that has quite a few corner cases and can be tricky. Such as, pasted input, input populated programatically, auto filled input, handling screen size changes correctly, and on and on, and doing so in a way that is reusable and performs well.
Given all that, I recommend using a lib for this.
I've used angular material's plenty of times with no issues, just add material to your project (can be done via angular CLI with ng add #angular/material) and either import the MatInputModule from #angular/material/input or TextFieldModule from #angular/cdk/text-field (TextFieldModule is quite a bit smaller) to the module where you want to use it, then do:
<textarea cdkTextareaAutoSize cdkAutosizeMinRows="5" [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold"></textarea>
you can exclude the cdkAutosizeMinRows option and then it will default to 1 row, but you can use that option to set however many minimum rows you'd like to display. You can also use the cdkAutosizeMaxRows option to make it stop growing at a certain number of rows if you wish, otherwise it will grow indefinitely with the content.
blitz: https://stackblitz.com/edit/angular-4zlkw1?file=src%2Fapp%2Ftext-field-autosize-textarea-example.html
docs: https://material.angular.io/components/input/overview#auto-resizing-textarea-elements
https://material.angular.io/cdk/text-field/overview
You can't change the height of the textarea without Javascript. But you can use an editable div instead. In plain HTML something like this would serve the same purpose as an textarea and will resize automatically based on the content.
<div class="font-xl font-bold" contentEditable>Hello World</div>
If you use a <div> which you can edit then it can grow or shrink accordingly.
<div contenteditable="true">This is a div. It is editable. Try to change this text.</p>
The below will loop over the item and compare height to scrollHeight incrementing the height by lineHeight. Then resets the rows once the height is greater than the scroll height
(function () {
const el = document.querySelector('textarea');
dynamicallyResize(el);
el.addEventListener('change', function () { dynamicallyResize(el); });
})();
function dynamicallyResize(el) {
el == undefined && (el = this.target);
const lineHeight = 16;
let i = el.getAttribute('rows'),
height = Math.ceil(el.getBoundingClientRect().height);
el.style.overflow = 'visible'; //triger redraw
while(height < el.scrollHeight) {
height += lineHeight;
i++;
el.setAttribute('rows', i);
}
el.style.overflow = 'auto';
}
<textarea [value]="item.text" [placeholder]="item.text ? '' : 'Your Text Here...'" class="font-xl font-bold" rows="2">Starting text that exceeds the 2 row limit initially placed on this particular text area.</textarea>
I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?
It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.
On resize, css removed the float at width 767px. So the side bar falls to the bottom.
With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.
NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.
**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() < 768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});
I converted my wordpress theme to responsive..
all values of "width" change to percents (%)
and the poroblem is :
from 400px width it show:
first line 2 post
second line just one post (instead 2 post)..
how can i fix that so the page will show 2 post in all line?
i attached some pictures to explain the situation.
image of smartphone until 400px width
image of 500px
Ok your situation was a little tricky. The theme was not really designed in the best way to make those "blocks" responsive. To make it work I added js to your footer (you can move this to a js file if you prefer)
<script>
function equal_cols(el)
{
var divs = jQuery(el);
divs.css('height', '');
var tallestHeight = divs.map(function(i, al) {
return jQuery(al).innerHeight();
}).get();
divs.css('height', Math.max.apply(this, tallestHeight));
//alert(Math.max.apply(this, tallestHeight));
}
( window ).resize(function() {
$('.products-row').each(function(){
var el = $(this).find('.product-container');
equal_cols(el);
});
}).resize();
jQuery(window).resize(function() {
columnConform();
});
jQuery(document).ready(function() {
columnConform();
});
Then in the movie-home.php and taxonomy-movie-genre.php file I commented out the "clears" that were being added every third row. We don't need that any more since we are making all the boxes the same size with JS.
<?php /* if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; */ ?>
The only gotcha is that all the boxes are the same size now regardless of how much content is in them.
Pre 3.8 there was simply side and core for positioning admin dashboard widgets. Now that we are in the 3.8+ world we have 4 columns. I've looked all over but I cannot seem to find anyone with an example on how to position a widget in a specific column.
For example I created a custom widget and have coded it to force itself to the top left position as seen here - http://cl.ly/image/3H1b1G052n2X
Specifically I'm asking how can I move the "Activity Widget" to the top right?
You can disable 2 columns feature, applying this filter in your theme, functions.php
// force one-column dashboard
function shapeSpace_screen_layout_columns($columns) {
$columns['dashboard'] = 1;
return $columns;
}
add_filter('screen_layout_columns', 'shapeSpace_screen_layout_columns');
function shapeSpace_screen_layout_dashboard() { return 1; }
add_filter('get_user_option_screen_layout_dashboard', 'shapeSpace_screen_layout_dashboard');
Source: http://digwp.com/2013/12/bring-back-single-column-dashboard-in-wp-3-8/
I recently switched from Bootstrap to Foundation, just for the top-navigation bar. I'd like to set the menu items to always adjust accordingly and fill the bar at all times.
A bootstrap example is available here: http://getbootstrap.com/2.3.2/examples/justified-nav.html
In this example, no matter how many items exist in the menu, they always adjust their width accordingly so that the nav bar is always filled.
How do I achieve such thing in Foundation?
You can use jQuery to count the number of li and set the width of each li to the appropriate %.
So 8 list items each one would be 12.5%;
JQuery
(function( $ ){
$.fn.autowidth = function() {
return this.each(function() {
$('li', this).css({'width' : (100 / $('li', this).length) + '%'})
});
};
})( jQuery );
$(document).ready(function(){
$('nav > ul').autowidth();
});
CODEPEN DEMO.
Add & Remove list items to see it work.