AniDB:CSS DEV

This pages content is centred around CSS development via AniDB's GIT. The goals of the GIT are:

1. Keeping track of all CSS styles.
2. Version control for developers.
3. Automatic upload procedure to one of AniDB's server.
4. Automatic update of the drop down menu in the profile.

Note	You should build your style on already existing code. Check the folder common. Examples can be found in sub.

Getting the Source of a Style

If you only want to get the latest version of all files belonging to a particular style, you don't need to install an GIT client. A simpler approach would be to download the files from the GIT repository with your web browser.

To do that go to gitlab and click the download link.

If you want to contribute your own styles, you will need to install a git client.

Connecting to GIT

https://git.anidb.net - Direct access to public repo

For write access just sign up to the git. If you have further questions feel free to ask in irc://irc.synirc.net/anidb-dev or irc://irc.synirc.net/anidb.

Committing

After you have edited, added or even deleted some things you still have to commit your changes. This will write the things to the GIT.

You can commit on a file or dirlevel. Meaning you can commit a big change with multiple files or folders involved or just specific files. To not spam us all into oblivion with GIT mails it's recommended to bundle some commits.

Take also note that you should before editing anything always update your local files with the ones in the GIT.

Adding a new project

There are a few things that needs to get done when adding a new project:

1. Add a new dir for your project in the CSS folder (/{your_style})
2. Name the dir whatever you want, but NO SPACES!.
3. If you are using images different from the AniDB ones add a /images/ dir below your project (i.e. /{your_style}/images)
   • You may use sub-folders below that one if you want.
4. Add a screenshot and a thumbnail of your style in the images folder with the following specifications:
   • Filename: thumbnail.png
   • Resolution: 210x150 (width is more or less optional, height should stay 150px, but try to keep to these values)
   • Filename: screenshot.png
   • Resolution: doesn't matter. just use something sensible
5. Add a description file in the root of your project, add the following lines and fill them accordingly as you see fit:
   • title:
   • creator:
   • update:
   • status:
   • description:
6. (optional) For auto-processing edit the styleslist file and add a relative path for the main CSS file (the one with all your @import lines, i.e. ./sub/silver/main.css)
   • You can disable processing by adding a # in front of the line.

In the end you should end up with a structure like this:

 /<your project>
 /<your project>/description
 /<your project>/images
 /<your project>/images/screenshot.png
 /<your project>/images/thumbnail.png

Merging & Hosting

Every CSS that is used this way gets merged into 1 file (to reduce http overhead), uploaded to 1 of AniDB's server and added to the style selection in the AniDB profile. To realize this a python script is used, doing the following:

1. read the file stylelist in the same folder as the script (ignores lines starting with #)
2. takes the first line from stylelist and reads the main CSS file for this style
3. reads every @import line, opens the file specified behind those and copies the content to a new file
4. repeats the procedure for the next lines aside of the # ones
5. checks if there are is an /images/ folder below the CSS folder and if yes collects a list of all gif/jpg/png files
6. uploads the big CSS file and the images to 1 of AniDB's servers