Adding CSS to External Webpages
What is this?
What do I mean by "Adding CSS to External Webpages?" I mean being able to add CSS to a webpage that doesn't belong to me. It is external in the sense that I don't have direct access to the code on the server.
And, while the title says "adding CSS," I'm also adding jQuery. The point being is that I can take a webpage of interest, process it using this technique, and make it look and function like I want, or at least close to what I want.
Why would I want to do this?
Well, in my case I access scores for a sporting event on a regular basis, and these scores are displayed in a fashion that makes them difficult to read. And since the page belongs to someone else I can't edit it, but, using the ideas in this article I'm able modify the page by adding CSS, and in this case, jQuery, to it.
Now, granted that this idea requires some effort so you'll not want to do it for a one-time use. But if the page of interest is updated regularly, then once you write the code to handle it's structure you'll be able to reuse it each time. And I'll show you that by providing an input field you only need to copy and paste the URL of interest into the field to then display the page with the code (i.e. CSS, jQuery, etc.) you've added.
Probably best just to show an example.
Here's a real file that I wanted to add some CSS and jQuery to so that it would display and function better. First, I'll open this in a new window so that you can leave it open and compare it to the processed file next. Here's the example file located at (Yes, I realize this article is about adding CSS and jQuery to external webpages, but for the purposes of demonstration I moved, and sanitized (removed real names), the file of interest to my server.)
When you view this file in your browser you'll notice that the table is pretty wide and in some cases may be so wide that it's difficult to follow a specific row to see all of the times, without losing track of the row. Also, the table header rows scroll off the page so as you look down table it's no longer possible to know what the table values refer to.
Now, using a little Perl to modify the text of the page and send it back to the browser, I can make that page look and function better.
Below, I've allowed for user input, why, because this is something I'll want to use on a regualr basis. The files that I want to view in a useful manner are posted weekly. All I need to do is access the file of interest, copy the URL, and paste it into this form, and submit. The result is the same data, but in a format that is much more usable.
When you compare the two files you'll notice that I've been able to add several features. First, jQuery has allowed me to highlight the rows on hover and to set a highlight by selecting an item in a row. Second, I've modified the table structure somewhat to improved the its overall layout, kept the column headers visible as I scroll down the table, and I've modified the fonts.
Development process:
First, I need to decide how I want to modified the webpage to make it more usable. I do this by copying the source of the file, then editing it locally. While editing my goal is not to re-write the structure of the file, but instead add CSS classes to elements, and then the associated CSS rules. Since I'm also adding jQuery, I place the necessary code for that in my editied file as well. This file becomes my template, so to speak.
Once I have the local copy of the file modified the way I want it, I use Perl to:
- Read in the external file, the file whose code I want to modify, and save that as a temporary file
- Open that file and process the code adding jQuery and CSS classes and rules as needed
- Send that file back to the browser.
This process takes a little time. I found myself writing a few lines of Perl, then looking at the results, then a little more Perl. As I mentioned, this takes some effort, but once it's complete, you never need to touch it again.
Explanation
As you can see above, I have an input field on this page that takes the URL of interest. For the purpose of demonstration, I have put the file on interst on my own server, but in real-life it would be the file that's external and I don't have direct access to.
Below is the Perl I've written to process this and then send it to the browser.
Pleae note, this is not meant to be a Perl tutorial. If you're new to Perl you can find a lot of resources on the web. My purpose in showing the code is simply to show that I'm able to use Perl to modify the code, then send it to the browser to provide an improved display of the external page.
Here is the file, bwp-add-css-to-remote-file-via-input.pl.
A few things to comment on.
First, the original file is nowhere near being HTML compliant. It begins with a <style> section. So in lines 58-71 I replace the oringinal <style type="text\/css"> with some HTML elements as well as some JavaScript that I need for use with jQuery. Beginning in line 73, through 127, I bring in some of the original CSS but also some of my own. And several places you'll see I used "!important" because I neeed to override the original CSS rules.
The remaining lines are commented indicating what I'm doing. In all of these I'm using the Perl substitution operation (s/string1/string2/i), including an "i" to "ignore" the case in the substituion.
The code in lines 15-20 has a preceding comment to explain but a brief word about that. I wanted to be able to use this code both on my local machine as well as in production. So, by looking at the environmental variable, REMOTE_ADDR, I can tell where the code is running, local server, or somewhere else. If it's equal to 127.0.0.1 it means I'm on my local machine and the path to parseform.pl is as shown. On external machines REMOTE_ADDR will be different and so is the path to parseform.pl.
Here is the file parseform.pl. It is not mine, but I may have made some edits years ago. It is from the book, page 65 of CGI Programming.
