I need to embed a custom embed code from an external website into my wordpress blog post.
the custom embed code has this format:
<!-- TradingView Chart BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var tradingview_embed_options = {};
tradingview_embed_options.width = '640';
tradingview_embed_options.height = '400';
tradingview_embed_options.chart = 'z1zThvGU';
new TradingView.chart(tradingview_embed_options);
</script>
<p>GBPUSD, Forecast on H4. by DatTong on TradingView.com</p>
<!-- TradingView Chart END -->
the code works fine but its not fully responsive when viewed in mobile or table and its not also centered in desktop. maybe because the code has generated a fixed width and a fixed height.
But that is the issue. I need to override the embed code styles so that I can style it however I want.
I have tried many options but its not working. I also inspected the DOM and found out that there is a wrapping div that was generated but when trying to style that generated wrapping div, its still not working. another option I did was to manually wrapped the code inside wordpress editor hoping that I can control the width and the height but still its not working. Although even if it worked, its not a good idea to manually style it in each and every blog posts so it would be great if we can overrride it using a custom stylesheet.
See fiddle below:
http://jsfiddle.net/7695akjh/8/
Any ideas how I can make this code fully responsive?
after fiddling with the markup, I finally figured it out! so this is solved.
Related
I have dashboard, displaying n number of cards. If card contains some charts, but when data is not provided card displays "No data to display". For charts I have been using highchart. Problem is that "No data to display" text is not visible in card. On debug found that, one of highchart CSS have transform(-50%, -50%); which causes it to display somewhere in top of screen and its not visible.
I tried overriding existing CSS, but new CSS gets loaded before highchart CSS.
Is there any way, that I load my CSS once highchart CSS are loaded?
You can add a short code in to the head section of the html where you linked your css.
<link rel="stylesheet" href="location of the css file you want to load after loading all the code" media="none" onload="if (media != 'all') {media = 'all'}">
media="none" onload="if (media != 'all') {media = 'all'}" this code has to be add in your link tag. And it will cause your css to load at the end of loading all the code. Hope it will work for you.
I have a Materialize menu that i use in other areas of my website and i tried to import it into Wordpress. With a few edits its been successful and the menu is running fine. you can see it working here
The issue i'm having now is that the external css called to use Materialize has overridden of the css in wordpress/my theme.
Does anyone know how to limit the Materilize css to one element on a website, in this case it'd be my menu div.
here's the scripts i called to get Materialize to work. I found that i had to make small edits to the menu which was built for a standard html page, but nothing too significant, other than calling these scripts. ja little trial and error needed to get to where i am now.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
edit: this question is different from this one because scoped css is depreciated (the 1st answer), and i can't wrap it in the div in my css file as the css being called is an external one, quite a large one, from Materialize (the second answer)
I'm using Meteor and when I want to inspect the body source of a page I have to scroll past tons of script tags. Is it possible to make it so I can fold those up or get them out of the way somehow?
Wrap the scripts in a <div> or other generic element. That way it will be collapsed (or collapsible) without affecting functionality.
I am very very new to this, so I apologize if this is very simple or has been asked elsewhere.
I am using Responsive Table Generator to generate a table from a Google document that I then try to place on a webpage using their iFrame code.
The generator gives me a handful of .js files and a .html and .css file to upload to my site. I then use the provided iFrame code to embed it on the page I want.
<div id="table-iframe-container"></div>
<script src="http://nesemc.com/test/markdown-3/news-table/pym.js"></script>
<script type="text/javascript">
(function() {
var pymParent = new pym.Parent(
'table-iframe-container',
'http://nesemc.com/test/markdown-3/news-table/index.html', {});
}());
</script>
However, I believe the parent page is some how overriding the .css style of the generated table.
You can see an example here: LINK
How can I stop this?
Your styles aren't leaking. Your iframe isn't wide enough to see the "full view", and you have styles that are responsive and don't work when that small. Make your iframe wider and it'll look like you want. If you remove max-width: 960px; from the #affero-page styles in consolidated.css, you should see it.
To see what you are looking at, go to this page: http://nesemc.com/test/markdown-3/news-table/index.html?initialWidth=860&childId=table-iframe-container (your iframe content), and play with the browser width. You will see once you get too small, it then displays how you have it.
Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.