Brink - ValerioLyndon/MAL-Public-List-Designs GitHub Wiki

Contents / Jump To

  1. Introduction
  2. Installation
  3. Customisation
  4. Further Modification

Preview

Introduction

After a complete lack of creativity for the entirety of 2018, I'm quite happy to finally share my first original cover-style theme! I made this for myself over several dozen hours, but there's lots of built-in customization options so others can enjoy it too. I highly encourage you to check the options! I hope you have fun with the theme. :)

Theme Specifications & Highlights:

  • Easily changeable banner and background. Just use the built-in theme settings!
  • Dynamic list columns. Pick and choose from any available.
  • Several easily changeable user options at the top of the CSS.
  • Items rated 8, 9, or 10 are highlighted so people can see what you like at a glance.
  • Tag-focused design. Tags take up the right column on each list item, all individually separated.
  • Full support for the new "Notes" column!

Installation

Step 1.

Copy the theme code from either of these links:

Compressed Code - Recommended! | Uncompressed Code - Use if you want to tinker with the code

Tip: Use CTRL+A to select all of the CSS at once.

Show this step as an image

Step 2.

Go to your style page and add the code you copied from that link to your "Add Custom CSS" box.

Show this step as an image

Step 3. (optional)

If you want higher resolution images, add one or both of these lines, depending on which you need. Copy/paste the line(s) to the top of your CSS.

For your animelist:

@\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelink";

For your mangalist:

@\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/presets/dataimagelink";

Then, replace the "USERNAME" text in the lines with your [i]exact[/i] MAL username. For instance, a link for my list would look like this:

@\import "https://malscraper.azurewebsites.net/covers/anime/Valerio_Lyndon/presets/dataimagelink";

Show this step as an image

Customisation

Any list columns will work, however Images are required and you must choose between Chapters or Volumes — not both. The minimum items I recommend are: Image, Score, Episodes/Chapters or Volumes, and Tags.

To add a banner or background, enable the respective section ("Cover Image" or "Background Image") and upload your image of choice. I recommend a ratio of 10:3 (i.e. 1920x576) for the banner image, but any size will work. You can change the background position using MAL's built-in tools (default is center-center), but attachment and repeat functions will not have any effect. More in-depth modification will require changing the CSS.

For more in-depth control such as theme colours, image brightness, and various setting toggles, see the "Variables" section near the top of the code.

Further Modification

Unless otherwise instructed, add these to the end of the code, beneath the "mods" header.

Light theme

Preview

Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modThemeLight.min.css) - Compressed

Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modThemeLight.css) - Uncompressed

I highly recommend brightening your cover images in the theme settings.

Category-coloured info backgrounds

Preview

Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modCatColInfoBG.css)

Per-category banner & background images

Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modPerCategoryImages.css)

After installing the code, you'll need to modify it to add images. First, you'll need to upload your image to a third-party image host such as Imgur. Then, replace the "URLHERE" from within any of the parentheses to the direct link to your image.

For instance, to add a banner to the "Completed" section, we would find the section:

Section to find

And then input the image URL we want, like so:

Modified section

To keep any of the images blank, simply leave the parentheses contents as "URLHERE" or blank.

Image Hosting Tips

Change Banner Height

Code(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modBannerHeight.css)

After adding this code, you can change the height of the banner by following the instructions at the top of the mod and modifying the 0.3 after --banner-height.

Favourite Tags

Preview

Before installing the main code, please install this Tag Overflow code: Code(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modAllowTagOverflow.css). This will allow the mod to function correctly.

Main Code(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modFavouriteTags.css)

Add a heart icon to your favourite items by using tags!

Hide hentai covers

Preview

Before installing the main code, please install this Tag Overflow code: Code(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modAllowTagOverflow.css). This will allow the mod to function correctly.

Main Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modHideHentaiCovers.min.css) - Compressed

Main Code(https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Brink%20Theme/modHideHentaiCovers.css) - Uncompressed

It should be noted:

  1. This mod is not automatic, and uses the tag system. To blur a cover, add the "Hentai" tag to that entry. Make sure you have tags enabled in your list settings!
  2. This mod disables the scroll on the tag section, meaning too many tags will overflow outside of the ideal area, and perhaps even outside of the item itself.
  3. This mod will not be visible in the preview window. Check your list as you would normally to see the change.

Tag Scores

Preview

Code(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modTagScoresDedicated.css)

This is a compelete override of the score and tag columns and will completely replace the score on your list with a tag. Your tag score must be the first tag, and any other tags on your list will be invisible.

This cannot be used with other tag mods such as Favourite Tags or Hide Hentai Covers. This may change in the future, but for now they will break when used together.

Edit overlay redesign

Preview

Adds styling to the overlay popup that shows when you edit a list entry. This addition will not be visible to other users.

To Install

  1. You will need the Stylus browser extension to install this. Please install here: Chrome/Chromium Browsers or Firefox.

  2. Click this link: Mod Install(https://valeriolyndon.github.io/MAL-Public-List-Designs/Brink%20Theme/modEditOverlay.user.css)

  3. When you visit the mod install link, you should be prompted by Stylus to install the userstyle.

  4. I recommend disabling update checks. After that, just click "Install style" and everything should work!

Disable update checks

  1. Once installed, there are various options you can change. Go to the "manage" page of Stylus, find the installed file, and click on the gear icon.

Options how-to

Options how-to