I'm currently working on a theme aimed at studios and I thought i was about finished, but then i noticed that the audio isn't implemented correctly(which is kinda important for a music based theme).
When the file is added using the add media button in the back-end, then the file is added to the page/post. When you view the page, then the media player seems to load in the HTML5 audio tag and not the built in MediaElements, but if you inspect the page and change the screen size to 768px or less, then the MediaElements is loaded. I have looked and looked, but I can't seem to find out what it is that is causing it.
There appears to be a JS error in the console that only shows when you load the site at larger than 768px wide as you mentioned in your post. The error stems from your theme /assets/masonry-settings.js file. I think the JS error is blocking the JS from the media elements plugin from being able to hijack the native HTML5 audio tag as it is supposed to do.
Uncaught TypeError: $container.masonry is not a function
at runMasonry (masonry-settings.js?ver=1.0:29)
Assuming you are the theme developer you should be able to troubleshoot the issue...
My wordpress template doesn’t compatible in IE11 But working fine in chrome,safari,Firefox. The page just cannot appear and the pre-loader icon keep spinning.
I try to check the debug console and found the jquery got some error.
http://www.grittnco.com/wp-content/themes/melissa/assets/js/super-guacamole.min.js?ver=1.0.0
The supper-guacamole.min.js return error from command
e.constructor.name.toLowerCase()
Unable to get property ‘tolowecase’ of undefined or null reference.
Do anybody face the wordpress theme compatibility problem in IE11?
The Wordpress theme is downloaded from template monster theme name Melissa. My wordpress version 4.92.
Just some month ago it still working fine at IE but just recent Therese is feedback not workin anymore.
https://www.templatemonster.com/demo/52153.html
Most websites no matter from where they are, they look diferent or look bad in IE so dont waste your time with IE
I have a problem with a Wordpress site, the editor is showing the text as white (on a white background) so unless you highlight the text, you can't see it. This is only in the admin section of the site, the front-end doesn't seem to be affected
I have found where the css is changing the text to white ( /wp-includes/css/editor.min.css ):
.js .tmce-active .wp-editor-area{color:#fff}
I have removed this and cleared the cache (even tried a different browser) but it's still showing in the editor.
Also, the 'Visual' and 'Text' buttons don't work.
Any ideas?
I have gone through an disabled each plugin, one at a time but it still is a problem.
Check your javascript console. If you see an error like:
"post.php?post=2840&action=edit:2783 Uncaught ReferenceError: tinymce is not defined"
Then the loading of wp-tinymce.php failing. Because the editor hasn't loaded, it appear as if your text is white, or "invisible" in the editor. This can be worked-around by adding:
define('CONCATENATE_SCRIPTS', false);
(Per Tijmen above, or https://wordpress.stackexchange.com/a/63172/118510)
(I use WP Fastest Cache plugin which has it's own concatenation, so if I use that plugin, then I'm OK skipping the default Wordpress concatenation.)
The root problem, however, is that a request to:
/wp-includes/js/tinymce/wp-tinymce.php?c=1&ver=4506-20170408
Is failing or receiving a 404. This could be due to a security restriction on your hosting or CDN.
Let's start with the obvious: is your Wordpress install completely up-to-date, including all plug-ins, themes etc?
It could help to actively declare the color to be black, instead of simply removing the line of CSS you removed, so:
.js .tmce-active .wp-editor-area{color:#000000}
Alternatively, this issue has been known to be caused by several plugins, such as PS Disable Autoformatting, however that instance was a few years ago. Did you recently install a plug-in? If so, try disabling that plug-in to see if that returns the editor to normal.
If none of this solves the issue, you can also try downloading Wordpress and replacing the /wp-includes/js/tinymce/ folder. Although it's unlikely, it's not impossible that something went wrong during an update or so.
If nothing else works, according to this link, you can open your wp-config.php file and add the following line at the very top after the php opening tag.
define('CONCATENATE_SCRIPTS', false);
I have just fixed this problem and thought it would be worth mentioning this basic check to others. If you are installing another theme or a second theme that installs it's own set of plugins, make sure you don't have any existing plugin composers installed or still activated. This can cause the conflict that makes the text white and the tabs to not work.
For me, I had both CMSMasters Content Composer (From previous theme) and WPBakery Visual Composer (From new theme) installed and active, which gave me this exact issue. I had also tried replacing the tinymce file and adding the extra line to wp-config, but none of these worked. Deactivating CMSMasters Content Composer fixed the white text issue for me.
Go into your account settings and check "Disable the visual editor when writing" ... Now try your page and/or post again. You should have text, not in white, and now you should be able to edit your page. Of course, you won't have a visual editor and that isn't any fun.
I think this eventually is a server problem where there are not enough resources for all the block rendering for both javascript and css. In Chrome, check the 'performance' of the page in developer tools ... it's likely less than 30.
For me, the problem was caused by the way the wordpress editor interacts with vue.js in my plugin's custom admin page.
Specifically, the white-text issue on the editor was caused by being inside of a v-if. There must be some conflict in how v-if renders the content which breaks TinyMCE if it is inside of the v-if.
The fix was as simple as switching to v-show. This causes the TinyMCE to be rendered once on page load and then just hidden as needed. Using v-show causes the editor text and toolbar rendered normally.
I am using DataTables 1.10 and bootstrap downloaded from Datatables CDN link source.When I am integrating both with wordpress plugin, bootstrap changes the background color as white(#ffffff) for the whole wordpress admin panel and plugin page by default.Not getting why this happened ? This should not happen as i have seen in the examples.Please help me to sort this out. Thanks in advance
I believe you are probably enqueuing the CSS for whole WP admin, rather than just that specific plugin settings page. Also, if the background for body / container is changed, probably you are enqueuing some generic styles file (which sets style for body element). It's the easiest to see why this happens from Chrome's console (or Firebug or similar tool) - click "Inspect element" on the changed background, and see what CSS file does it come from.
Also you might want to check this free WordPress plugin that integrates DataTables in WordPress: http://wordpress.org/plugins/wpdatatables/
When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.
It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.
Does something like this exist?
I have found the answer to this, at least as of Chrome v14.
While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.
This place exactly:
In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"
This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.
See the Live Editing and Revision History section of this tutorial.
Firediff is a Firebug add-on that tracks changes done in Firebug. It logs everything you'll do in the HTML pane (great) but also your brief use of the Web Developer Toolbar extension (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
I have seen a Firebug extension in Chrome but didn't test it, I use Firediff with Firefox.
In Chrome there is also the Changes tab in the console drawer that displays all the modifications of CSS. It's not an export, but at least it is very convenient to quickly grasp what has changed.
I built a Chrome extension that does exactly this.
It's called StyleURL - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
Here's an example where I added "padding-bottom: 50px" to this page:
It's open-source and on GitHub too: https://github.com/Jarred-Sumner/styleurl-extension
Both Firefox and Chrome support this feature now, but worth to note that in some platforms if not all Chrome does not show it by default, you need to enable the "Changes" view to see it (in my Kubuntu Linux 20.04 it wasn't by default), here is how you can enable it: go to the "Customize and Control DevTools" button in the Developer Tools bar > "More tools" > "Changes", then the tab will appear at the button:
In Firefox there is no need to enable it, but if you come from the Chrom* world may be hard to find it. Just check the last section in the right at the "Inspector" tab:
I've suggested this product on SO before (I'm not affiliated with them in any way).
http://www.skybound.ca/
Excellent product. Sounds like exactly what you're looking for and much more.
EDIT: Several other answers here have mentioned Google Chrome's ability to link to your local files (which is very very cool). Check out the other answers!
If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)
As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the Chrome DevTools Autosave extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by #addyosmani on his blog, here.
There is also a handy screencast which details the extension rather well.
With Workspaces you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ and Disable automatic saving of CSS changes in Chrome Developer Tools.
My in-beta-soon product LIVEditor does this exactly.
To let you understand it easily, you can think of Firebug's inspector is embedded into your text editor.
That way you don't have to make the changes manually again in your code editor after you tweaking it using Firebug or Webkit's developer tools.
If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the {} symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!
To add an answer for Safari specifically — it's kind of possible.
When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit Cmd-S to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.
When you edit CSS at the top of the Styles section, under Style Attribute to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.
The official Apple docs are a little dated but found here: Web Inspector Tutorial - Editing Code to Change Your Webpage.
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css