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...
Related
i'm trying to improve speed of my website. i'm using PageSpeed Insights to check my site performance and it was telling me to remove render blocking java script and css. so i did it and know its causing problem in my website design. so what should i do to remove rendering blocking without causing problem in my website design.
Render Blocking CSS
Render blocking CSS will always show on Google Page Speed Insights if you are using external resources for your CSS.
What you need to do is to inline all of your 'above the fold' styles in <style></style> tags in the head of your web page.
I will warn you, this is NOT easy and plugins that claim to do this often do not work, it requires effort.
To explain what is happening:-
A user navigates to your site and the HTML starts downloading.
As the HTML downloads the browser is trying to work out how to render that HTML correctly and it expects styling on those elements.
Once the HTML has downloaded if it hasn't found styles for the elements that appear above the fold (the initial part of the visible page) then it cannot render anything yet.
The browser looks for your style sheets and once they have downloaded it can render the page.
Point 4. is the render blocking as those resources are stopping the page from rendering the initial view.
To achieve this you need to work out every element that displays without scrolling the page and then find all the styles associated with those elements and inline them.
Render Blocking JS
This one is simpler to fix.
If you are able to use the async attribute on your external JS then use that.
However be warned that in a lot of cases this will break your site if you have not designed for it in the first place.
This is because async will download and execute your JS files as fast as possible. If a script requires another script to function (i.e. you are using jQuery) then if it loads before the other script it will throw an error. (i.e. your main.js file uses jQuery but downloads before it. You call $('#element') and you get a $ is undefined error as jQuery is not downloaded yet.)
The better tag to use if you do not have the knowledge required to implement async without error is to use the defer attribute instead.
This will not start downloading the script until the HTML has finished parsing. However it will still download and execute scripts in the order specified in the HTML.
Add async in the script tag and put the css and js in the last of the page
I am in the process of integrating Netlify CMS to a Gatsby site. Right now, while editing or creating content, a preview of the content appears to the right of the screen in plain text. Is it possible to use the same styles for both the main page and the preview page so that they both look same?
I assume since the preview page gets rendered using the page template and the page template comes with its own styles, there would be no need for an extra stylesheet.
I've tried linking the stylesheets using CMS.registerPreviewStyle("link/to/my/css/file"); but nothing changes.
The developer console returns the error
Refused to apply style from 'https://my-site-name.com/admin/cms.css'
because its MIME type ('text/html')" is not a supported stylesheet
MIME type, and strict MIME checking is enabled."
However when I try to load the style sheet directly, I get a 404 error showing that it does not exist.
What you are doing is correct, just make sure that the path is right. For example, make sure that your CSS files are nested in the static folder.
I have built a stylesheet but it doesn't appears on the page on the first load. It needs a reload to appear properly. However when I look to the source download on the dev console's network tab, I see the CSS is well downloaded. So what can lead to the non-display of my CSS on the first load since it is well loaded in a CSS module-hash's mode ?
Any hint would be great,
thanks
I Just need some Custom CSS code to change my Chat text a bit on an app called DiscordApp,
Auto Scroll To bottom of Page
Custom Text Size
Custom Avatar Text Channel Size
Link to DiscordApp
Link to Example CSS sheet for a random Theme
To inject custom CSS and JS into Discord, you'll need a third party plugin such as BetterDiscord
For the case of BetterDiscord, you have to follow their tutorial for the CSS changes. You can also dive into the settings and add it straight into custom CSS.
TLDR
Create a MyCSS.theme.css file with a META-tag and CSS
//META{"name":"My custom CSSScript","description":"Mine.","author":"Me","version":"1.0"}*//{}
.my-css-class{
/*Example...*/
}
Save this file to %AppData%\BetterDiscord\themes
Reload Discord with Ctrl+R and activate your theme, if you hadn't already
If you want to quickly try out themes or Javascript, hit the Ctrl + Shift + I keycodes. It'll open the developer tools of Discord
Auto Scroll To bottom of Page sounds more of a JS function though, you can easily achieve it by creating a scrollToBottom.plugin.js file containing at least
//META{"name":"ScrollDown"}*//
window.scrollTo(0,document.body.scrollHeight);
the function being inside of a button you place on screen. Discord supports jQuery, so pure javascript isn't even necessary.
The steps for adding javascript plugins is about the same, but inside of the plugins folder instead, and they're called MyPlugin.plugin.js
Note: installing unofficial third party tools or software might leave you prone to hacks, leaks and other security issues.
I've read some of the topics here but did not found a solution for me. When I try to set a feature image to the post/portfolio the media upload window gets frozen(cant even close it down - pressing esc does the trick) and also can't set the feature image, upload an image, ..
If trying this in IE 8 I get a pop up error when opening the media upload(pressing set feature image) with this content "Out of memory at line 2!"
I am using the Wordpress version 3.5.1, thanks in advance for a posibble solution.
TNX!
May add that the IE8 also gives errors for:
wp-admin/js/media-upload.min.js?ver=3.5.1 and
wp-includes/js/tinymce/tiny_mce.js?ver=358-23224,
if switching to themeeleven the upload works ok, but not in my theme.
If uploading works fine in a default Wordpress theme like twentyeleven or twentytwelve, that means there is a javascript conflict with your theme, esp. indicated by the IE8 errors. Possibly a plugin, but most likely the theme.
Look at http://wordpress.org/support/topic/troubleshooting-wordpress-35-master-list?replies=4 to see if your theme (or a plugin) is listed as problematic and to learn how to check for javascript errors that will impact the Wordpress admin area.
Use Firebug with Firefox, or use the developer tools in Chrome or Safari or IE to see what javascript is loading on your site and see any errors and conflicts.