Fanart.tv Browser Enhancements
Imagus – Enlarge thumbnails, and show images/videos from links with a mouse hover.\r\nImagusMOD – A custom modification to Imagus that allows for Cycling through background colors.\r\nStylish – Easily install themes and skins for many popular sites.\r\n
\r\nThis guide will go over some of the ways you can improve your browsing experience on Fanart.tv. This is ever changing due to site and software updates, but I will try to keep it as current as possible. The site works perfectly fine without these additions and may not be an improvement for some, but other may find these addons will greatly improve the enjoyment of the site. Some of these addons were designed for the moderators to help improve our ability to moderate artwork more efficiently, but there is no reason that our contributors can’t benefit from them as well.\r\n\r\nPrerequisites:\r\nSome of these addons will require some basic knowledge of using a text editor. I will try to make the procedures as beginner friendly as possible so you should be able to follow along with a little diligence. I will also just be covering installation on the Chrome and Firefox browsers. These may work fine on other browsers, but you will have to work out the details on your own.\r\n\r\n\r\n\r\n \r\n
\r\nDescription:\r\nImagus is an in browser image viewer that allows you to hover over a thumbnail to see an image full size. It also has extended features that allows for zooming, panning, rotating, and showing image information such as dimensions. All while staying on the original page. The amount of features is impressive, but I will only cover the basics here. The program used to be hosted on Opera’s blog site, but since it was shut down. he has set up a temporary homepage here. Imagus\r\n\r\n\r\nInstallation:\r\n
- In Chrome/Chromium, install like any other extension from the Chrome Web Store.
- In Firefox, go here and click on the Firefox icon. (Make sure to allow the addon and you will be all set.)
\r\n\r\nSetup:\r\nThe extension works “out of the box”, but you may find that some small tweaks will greatly improve it’s usefulness.\r\n\r\n
- In Chrome/Chromium, go to the Extensions Page and locate Imagus. Click the Options link.
- In Firefox, go to the Addons Page and locate Imagus. Click the Preferences link. (or you can try this link to go there directly.)
\r\nOnce you have your setting page up, you can try these settings as a starting point.\r\n(Don’t forget to turn on the Advanced Options.)\r\n\r\n \r\n\r\nHere is the Custom style (CSS)\r\n
margin: 6px 2px 22px; background: transparent; background-clip: padding-box; border: none; box-shadow: 0 0 3px #222; padding:10px; border-radius: 6px;\r\n\r\n\r\n \r\n\r\n \r\n\r\nThe biggest difference you will notice from the default settings is that you need to use a modifier key to have Imagus show the full image. Without this, anytime you are using your mouse on a webpage, you run the risk of having images popping up everywhere. I use the “SHIFT” key as my modifier and recommend you do the same.\r\n\r\n\r\nUsage:\r\nOnce everything is installed and setup, you will now notice a red dashed outline around any image that Imagus can open to full size. (This might now show on all sites.)\r\n\r\nNow once you mouse is over the image, just press the SHIFT key to show the image at full size. It should display the image as large as it can while displaying the entire image. From here you have some options. If you press the “z” key, it will display the image at 100% original size. If the image is now bigger than your view-port, you just need to move your mouse towards the edge you want to see. Imagus will automatically pan the image to wherever you move your mouse.\r\nUsing the “SHIFT+c” combination will display the image dimensions in the upper left corner. You can check out all of the available shortcuts by clicking the Shortcuts link in the extension’s options.\r\n\r\nThere is a lot to explore and you can play around with the settings as you like. If you copied my settings, you will notice that the border of the full image is transparent. This is to allow for the next addon I will talk about , which is a modification to the existing Imagus code. If you decide not to install it, you may want to set the border color to something other than transparent.\r\n\r\n\r\n\r\n \r\n
\r\nDescription:\r\nStylish is a browser addon for both Chrome and Firefox that allows for custom CSS styles to change the look of a website. We have had a few people including myself that have written custom CSS to give the site a darker theme, and you can use these by installing the Stylish Addon/Extension.\r\n\r\nOptions:\r\nWe have styles for both the main site and the forums.\r\n\r\nMain Site\r\n
- Chrome/Chromium Dark Forums Style
- Chrome/Chromium Dark Forums Style – Small Smilies
- Chrome/Chromium Dark Forums Style – Large Smilies
- Firefox Dark Forums Style
- Firefox Dark Forums Style – Small Smilies
- Firefox Dark Forums Style – Large Smilies
\r\n\r\nInstallation for Main Site Style:\r\nChrome/Chromium\r\n1. Install extension through the Chrome Web Store\r\n2. Download the Main Site style for Chrome\r\n3. Click the Stylish icon on the toolbar and go to “Manage Installed Styles“.\r\n4. Click “Write new style“\r\n5. Drag the style file into the code window.\r\n\r\n\r\n\r\n \r\n\r\n6. Click the “Specify” button below the Code window.\r\nYou will then be presented with a drop-down selection box.\r\nSelect “URLs starting with“.\r\n7. Enter the following text into the box.
https://fanart.tv\r\n8. Name the Style.(Anything is fine. I used the filename.)\r\n9. Save the new Style.\r\n\r\n\r\n\r\n \r\n\r\nFirefox\r\n1. Install Stylish through internal Addon Search or from here.\r\n2. Click the Stylish icon on the toolbar and go to Write new Style >> Blank Style.\r\n3. Name the Style. (Anything is fine. I used the filename.)\r\n4. Drag the style file into the code window.\r\n5. Save the new Style.\r\n\r\n\r\n \r\n\r\n\r\nUsage:\r\nIn both browsers you are able to use the Stylish icon on the toolbar to enable, or disable the style at will. This is handy in the case where there is a bug in the style, or site changes have been made and the style hasn’t been updated yet.\r\n\r\n \r\n\r\nInstallation for Dark Forum Style:\r\nInstallation for the forums follows the same procedures outlined above.\r\nThe only difference is with the Chrome/Chromium install. You must alter the code for step 7 to reflect the Forum’s URL address with the following.\r\n
https://forum.fanart.tv/\r\n\r\n \r\n\r\nUsage:\r\nThe Forums styles come with an option for small or large smilies. The default smilies were designed for a light theme and have a white outline that is not very pleasant to look at against a dark background. You should choose and install at least one of the Smiley options to go along with the dark theme. You can install both if you like and just enable/disable the combination you want in the Stylish toolbar menu.\r\n\r\n\r\n\r\n \r\n\r\nSummary:\r\nHopefully it wasn’t too difficult to install and setup the enhancements you were interested in. There is a good chance that as the site makes changes and/or the Extensions and Addons get updated, you may find that it can break functionality. We will do out best to keep this up to date, but we sure could use you help. When you notice something that changed or breaks, please post about it in the forums.
Comments are closed.