Travis CI CSS Bookmarklet

"travis-inject-css" injects a CSS style at the end of the head section in the current page. The style changes red-styled content to have black foreground on white background. It doesn't look great, but it stands out. It is meant to be used on a Travis CI log page.

It is to be used as a bookmarklet. You save it as a bookmark, and click on the bookmark while on the Travic CI page. This isn't elegant, I know.

travis-inject-css
^^^ Drag this to your bookmark manager ^^^ (or save it)

What's actually happening is that this creates a javascript function that injects a CSS style into the page. The javascript is below (in a more readable format than present in the bookmark).

javascript:(function()
  {
  var style = document.createElement(%27style%27),
    styleContent = document.createTextNode(
      %27.red {
        color: #000000 !important;
        background-color: #ffffff !important;
      }%27);
  style.appendChild(styleContent);
  var caput = document.getElementsByTagName(%27head%27);
  caput[0].appendChild(style);
  })();

Having seen it, it's quite easy to edit the colors to be different. Or to add other styles. But it also works in its current naive state.

For Troublesome Browsers

If your browser cannot add bookmarks using drag-and-drop or a contextual menu, add a bookmark as instructed below. Execute this bookmark from the Travis window to inject CSS.

1. Copy the text from the box below.
2. Create a bookmark to this (or any) page.
3. Replace the contents of the bookmark URL with the copied text.
4. Edit the bookmark title if you wish.

javascript:(function(){ var style = document.createElement(%27style%27), styleContent = document.createTextNode(%27.red { color: #000000 !important; background-color: #ffffff !important; }%27); style.appendChild(styleContent ); var caput = document.getElementsByTagName(%27head%27); caput[0].appendChild(style);})();