I'm using the WordPress plugin Advanced TinyMCE to give my client the ability to change font sizes within the editor. My issue is, it has a predefined set of sizes to choose and I need to add more to this. Is there an easy way to hook onto this plugin to extend it?
got this one from WP explorer- link included for further reading as there's more useful stuff. Bear in mind it was written for 3.9 so definitely worth testing before deploying.
Adding something like this to your functions.php file should do the trick, you can edit the available sizes by adding to the array:
// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
function wpex_mce_text_sizes( $initArray ){
$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
link below for further reading:
WP Explorer Tiny MCE customisations
Related
I'm using ACF to create custom fields in my custom post types. It all works fine but the Ui of the default editor is not adding any margin to the bottom of the screen and the ACF field is not accessible. Please check the screenshot to understand better.
Is there a way to add spacing at the bottom or a workaround to make the field accessible?
You could add a margin between both by injecting a bit of css via a the admin_head action hook in your function.php file.
<?php
add_action( 'admin_head', 'admin_script' );
function admin_script() {
echo '
<style media="screen">
div.postbox-container {
margin-bottom: 25px;
}
</style>';
};
?>
I’m trying to remove WooCommerce product image in my WP page (I'm using eStore template). I don’t need the product image to be shown, but when I remove the product image using the following PHP snippet, I get a blank space where the image is supposed to be, and it looks terrible:
remove_action( ‘woocommerce_product_thumbnails’, ‘woocommerce_show_product_thumbnails’, 20 );
I've tried to remove the image placeholder by inserting the following CSS snippet, but nothing happens:
.single-product .product .summary {
width: 100% !important;
float: none !important;
}
Could you please give me some guidance on this?
Note - this code come from: Remove WooCommerce image
Just make the image gallery area display as nothing and 100% should fill the area. I tried the following with your CSS on the default template and it worked for me:
.single-product .product .images { display:none; }
And here is an example page for those wondering:
https://demo.themegrill.com/estore/product/shoe-for-men/
Koda
the image variable/object is being shown on this template you are using. if you cannot figure that out, just do a super hacky:
divName img {
display:none;
}
and move on to learning how to manipulate the templates inside WooCommerce for better flexibility. You could even write a function to hide this image...
I am having trouble overriding the default styling that comes with WooCommerce. Specifically, I am trying to hide certain fields that display on my checkout page (see screenshot of the code). I mocked up my page on Code Pen and my css is working fine, so I am not sure why it doesn't work on my styles.css of my child theme. Any help is appreciated!
.variation li div:first-child {
display: none; }
https://codepen.io/jagorski/pen/oZBYrd
Clear the browser cache & try this:
.variation-JobListing:first-child {
display: none !important;
}
Hi there I am creating a plugin for WordPress and I am at the stage of creating the CSS side of the administration menu. I have been reading the codex for WP but still not entirely sure how I can Implement the whole thing. Firstly I have two files adminstyle.css and adminstyle.html. I know I have to use wp enqueue style/script functions in WP but need some assistance on the actual implementation. Firstly the html/css side is a page for admin inputs/textareas/radio buttons for the admin to choose his/her settings. So my question is is there any WP CSS conventions or is it as simple as including a CSS/HTML script on the admin menu for the admin to choose his/her settings?
Its not so hard to implement but you should aware to wordpress hooks, filters and technique to implement it.
If you want some code sample, then by default there is a file located in plugins directory with name hello.php, its a default Hello Dolly Plugin. Take a look on this sample that how to implement style on admin side:
function dolly_css() {
// This makes sure that the positioning is also good for right-to-left languages
$x = is_rtl() ? 'left' : 'right';
echo "
<style type='text/css'>
#dolly {
float: $x;
padding-$x: 15px;
padding-top: 5px;
margin: 0;
font-size: 11px;
}
</style>
";
}
add_action( 'admin_head', 'dolly_css' );
In above codes dolly_css is a function which is attached to the admin_head hook.
Here is screen shot : http://d.pr/i/QhkF
My theme is : http://www.templatemonster.com/wordpress-themes/37712.html
Any idea?
If you want to fix the content area of an editor of wordpress, then the only way way to do this by adding the custom css to your default template.
To do this go to your default template and add the below line to your functions.php.
suppose i have given a name for my custom css file like test.css.
add_editor_style('test.css'); //in functions.php
and then create a file named test.css (or whatever) in your theme directory and put this line of code inside it:
html .mceContentBody {
max-width: 400px !important; // whatever improbable size you want
}
When you personalize your site you'll need to go to site styling > custom CSS and add this script :
body {
overflow-x: hidden;
}
It will enable your horizontal scroll.