Adding Sire and Dam links

Something players have wanted is a link to the Mare from the foal’s page so they can find the mare easier.  To this end I started work on a new script to add that link to the foal’s page.  However, after playing around with it, it seemed it would be even more useful to have the ability to go to the private page for either the sire and the dam of the foal, so I added a link to the sire as well.  Then, since I was adding links to the horse’s page I thought, wouldn’t it be great if the player had easy access to the public page link from the private page, and added a link for that as well.  This culminated in the following GreaseMonkey script: Add Sire/Dam/Public links

Here’s a public howrse page:

 photo publicHowrsePage.jpg

And a private howrse page:
 photo privateHowrsePage.jpg


Modifying Howrse with Greasemonkey

I use Adblock Plus which blocks all the ads which is great.  The issue on Howrse then becomes the 2 pixel wide border around the ad that doesn’t get blocked because it’s part of the HTML.  I could use the add-on to block the element the ad is in, but that messes up how the page displays because the background on the horse’s page is positioned so the horse is slightly below the center of the background by default when the horse’s page is in reduced landscape mode.  So I looked into using Greasemonkey to create a script to either move it or remove the border of the banner ad.  I’ve been able to both move the banner ad and remove the border for the banner ad.   Moving the banner ad requires modifying the named <div> tag (“banner”) the banner ad was displayed in to push the banner ad far enough off to the right you couldn’t see it.  This does, however, put a scroll bar on the bottom of the page due to the page width being increased, but there isn’t an unsightly empty border sitting in the middle of the page anymore.  Removing the banner ad’s border requires finding the div that has the border and setting the border to 0px wide.  The problem I had initially in doing this was I was searching for the tag that had the code the style-sheet used when I should have been lo0king for the style the browser was using since it converted the RGB color code to hex.  All in all, I call this a Win!

The script, as far as I know, only works on Firefox with the Greasemonkey add-on.  It might not seem like much, but it helps to not have the white rectangle sitting there.

The script is available here:  Howrse BannerAd mover

EDIT:  I did manage to write a script that can remove the border entirely which negates the need to move the box the banner ad is displayed in.

That script is available here: Howrse BannerAd Border remover

Without the Greasemonkey script moving the Banner Ad or, alternately, removing the border for the banner ad:

With the Greasemonkey Script moving the Banner Ad and/or removing the border of the banner ad:

Due to the impending changes to the default horse coats I’m working on a script that changes what image is displayed for the horse based on breed and coat color or simply what url is being used for the coat.

Howrse Background Template

With the change from the old background size to the new background size there is an issue with backgrounds conflicting with the game’s UI, parts of the background being chopped off by the browser’s UI and problems reading the text at the top of the page.  To this end I’ve created a .PNG template that highlights where certain elements of the game UI are and where the background gets cut-off by the top of the browser’s UI, at least in Firefox and Opera, and likely other browsers, and where the horse can actually be positioned.  The template itself should only be used as a general reference due to the background being centered on the page and moving left and right as the browser window/tab is widened or narrowed which will shift the game’s UI elements left and right over the background.

What I hope this does is allow the artists creating backgrounds to know where to put most of the work and help them design backgrounds so that the player can see most of the scene instead of having part of it chopped off.  For example, I saw one with a moon that was cut in half by the browser’s UI, and had the artist known that would happen they might have been able to avoid that by designing the background differently.  In other backgrounds the complexity of the background causes the text links at the top to be unreadable, but if the background in that area was less complex the text might be more readable.

There are two templates I’ve created, one without the UI elements marked and one with them marked.  If the one with the UI elements marked is used, the center section needs to be deleted before being merged with the layer containing the background.  The first link goes to Imageshack, and can be saved from there via right-click > “Save Image As”.  The second link goes to Mediafire, and needs to be downloaded via the link at the top because the image shown is only a preview of the image and is smaller.

EDIT:  Due to something changing with the display of newer backgrounds I’ve modified the template to reflect the backgrounds being shifted down so the top of the background is at the bottom of the browser’s UI.  At least it is in Firefox.  This isn’t the case with the older backgrounds that have been scaled up.

Background Template w/ blank center

Background Template w/ general UI element locations marked