Replace stylesheet over other webpage's own stylesheet - php

Question

I am building the website www.verbum.xtrweb.com/verbum.php
I use the request function in php to get the definition of spanish words from the site: www.rae.es . The output i get is in an , but unfortunately, i cannot change the style of the elements it outputs. For example, if you look up the word "hola" you will get the meaning for "hola" but with www.rae.es 's stylesheet. What i want is to apply to this output my own style (color, font, font size, etc.)
I now there is something called $important! but according to the way i have previously tested, it did not work.
I evoke the magic aid of the stackoverflow community with urgence.

Answer 1

The content you want to change is located in an iframe. I would suggest that you just inject the stylesheet into the iframe direct, but unfortunately the content you want is on a different domain. Because of the cross-domain security policy, you will not be able to modify the content of the iframe directly.
There are two ways to solve this. You can use a PHP application to get the content you need, then you can filter it and change it in any way you would like. This would replace the iframe, and instead you would just display the content you need on the page. The other option is to use a more simple PHP application that gets the content, but doesn't modify it at all. Then you point your iframe to this PHP app, and it would display in the same way as it does now, BUT it will be from the same domain. Then you can inject a stylesheet with Javascript and make it look any way you want.
The "important!" CSS override might be needed if you go with the second method I mentioned, but it is not the root cause of your problem. If you want to read more about how to use important!, I recommend this article.
Below I have implemented an example of the first method I described. This will download the requested page, then inject a custom set of styles.
<?php
$url = 'http://lema.rae.es/drae/srv/search?id=IwxflJmT9DXX2DMkYs8Z';
$css = <<<EOT
<style type="text/css">
body
{
background: #eeeeee;
}
.a
{
color: green;
}
.f
{
font-size: 200%;
}
.o
{
font-size: 80%;
}
img
{
opacity: .5;
}
img:hover
{
opacity: 1;
}
</style>
EOT;
$data = file_get_contents($url);
$data = str_replace('</head>', $css.'</head>', $data);
echo $data;
?>