We're building a custom tool that requires us to remove image styles (derivatives). It's very simple to remove all image styles for all nodes via drush or programatically.
How can we remove all image styles for a single node?
Related
I've got a lot of custom stuff to style inside my current project ( first one made with Gutenberg) and editing two files (that include a lot of media queries) makes the task deeply infuriating.
Is it possible (and viable) to merge the 'frontend' styles and the editor styles within one CSS file in WordPress? So I can have the 'frontend' and 'editor' versions opposite one another in the CSS file and nothing flips out?
This will cause unnecessary code in the admin panel.
Write CSS Separately for Gutenberg(editor styles). Gutenberg CSS file must include these: heading(h1,h2 etc...), , quote etc... Add this style even if the style element is for your front end. These attributes must be placed in editor styles.
Then enqueue the editor styles CSS file both.
Ali is mostly right but the reasoning is kind of reversed.
You want the public views to be as small as possible, so while adding weight to Gutenberg would suck, adding weight to public views is much worse and will negatively impact page scores?
In posts, the Gutenberg editor will by default automatically resize via css any images uploaded as galleries, resulting in too small and blurry images.
I can't for the life of me figure out how to prevent this from happening in the first place, or find a way to revert the image size back to full size - does anyone?
Whether there's an already built in option I'm missing, or if there's a plugin that fixes this, or ideas for how to change the code. Any ideas welcome!
ps. note that when uploading single images, the right hand side toolbar has an option to change the image sizes - however this does not appear when uploading multiple images at once via gallery mode.
Cheers
Styles on Gutenberg can be added same like the classic editor through which you can add stylesheet and then target the element and manipulate styles.
Add Theme Support add_theme_support('editor-styles');
Add Stylesheet add_editor_style( 'css/custom-editor-style.css' );
If you want to change functionality or core block then it is recommended to create new block instead of manipulating core blocks because it can create layout or functional problems with other plugins.
New blocks can be created with this guide of Writing Your First Block Type.
Stylesheet of your blocks can be added by using this guide Apply Styles From a Stylesheet
These action hooks can also be used:
enqueue_block_editor_assets - for enqueuing data only on backend that is Gutenberg Editor.
enqueue_block_assets - for enqueuing data on frontend + backend
I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?
I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?
So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.
Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.
If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).
You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:
.#{prefix}-i-alignleft:before
You can use the keyword alignleft as an icon for your custom button.
I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.
Recently I started a small online shop and I have a problem with the top horizontal menu in Prestashop 1.6.
When I activate the Top horizontal menu is not horizontal, is vertical. It's like it does not have css style.
Can you help me with this issue please ?
Go to Modules> Modules > Top Menu > Reset just the parameters, you will get the default structure back.
The default blocktopmenu in Prestashop (1.6) has 2 CSS files located in
"prestashop/modules/blocktopmenu/":
superfishmodified.css
blocktopmenu.css
If you want to overwrite these default css styles you have to create exact the same css files in your theme folder in the exact same hierarchy "themes/default_bootstrap/css/modules/blocktopmenu/"
Try the following
But in your case your best option is to try and delete the css files of the blocktopmenu in "/themes/default_bootstrap/css/modules/blocktopmenu/"
after you delete the css files there Prestashop will switch back to the default css files located in "/modules/blocktopmenu/" delete the files in the red circle. But it's always safe to backup these 2 files first just in case.
Other options is to download a fresh copy of the Prestashop version you're using and replace both the superfishmodified.css and the blocktopmenu.css.
The blocktopmenu.php loads css and js only if you add a hook to your header.
Manage hooks and insert Top horizontal menu to displayHeader. By default the hooks are just under actionCategoryUpdate and displayTop.
Refer the File:
https://github.com/PrestaShop/blocktopmenu/blob/master/blocktopmenu.php
Contao CMS gives the possibility to import .css files (which is the only way to get your css into this weird CMS), but interprets them and re-writes them somewhere into the file structure (or DB ?).
Problem is: It cannot handle modern CSS, and throws everything away that's not basic 2002 style css. Like gradients, media queries etc...
Is there a way to get around this ? Like linking to real .css files ?
Contao 3.2.2 does not need the manual insertion of a <link rel=stylesheet …/>.
Upload the CSS to the contao file tree.
Then proceed via Themes → choose for your theme its icon “Edit the page layouts for theme” → Edit layout → in section “Style sheets” below “Additional style sheets” click on “Change selection” to select the CSS you want from the server file tree.
Contao will then serve your CSS content as part of the CSS it generates (under a somewhat synthetic name) and itself place a <link rel=stylesheet …/> to it in your page.
If you have access to FTP or some other way to get files onto the server, just serve your .css file without passing it through the CMS, and put a <link> to that file in the headers. I used to do this with TextPattern because I didn't want to edit my css in the browser.
Write your custom css and place it in the files folder.
You have two choices to link the css to your template
1.Via the theme :
Mouse click and select style sheet or paste in code to path <link rel="stylesheet".... in relevant field.
2.Make a custom template :
In menu item 'template', create a fe_page.html5 or .xhtml. re-name it something.html5 put your code <link rel="stylesheet".... in the header. Don't forget to add the new template to your theme setup (default template is fe_page..)
How to edit css without ftp :
In the menu item 'File manager' browse to the css sheet, press on the blue square icon. you can now edit your style sheet online.
All the above can be made in css3, html5 or whatever your coding pleasure.