AniDB:CSS DEV

This pages content is centered around CSS development via Anidb's SVN. The goals of the SVN are:

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

Note	You should build your style on already existing code. Check the folder css/common. Examples can be found in css/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 SVN client. A simpler approach would be to download the files from the SVN repository with your webbrowser.

To do that go to http://dev.anidb.net/websvn/ and click the "tarball" link next to the style you want to download. You will need a compression program which can handle ".tar.gz" or ".tgz" files, but nowadays most tools support these formats.

If you want to contribute your own styles, you will need to install an SVN client.

Connecting to SVN

First thing you need is a client. You can of course use any svn client you want, but we recommend Tortoise SVN for windows user as it nicely integrates into Explorer and makes it, as such, very easy to use. After that you specify a dir on your hdd where you want to put the files and checkout the current CVS version.

If you don't like integration you could use SmartSVN.

For Mac users we recommend RapidSVN. RapidSVN does not integrate with the Mac Finder as much as Tortoise does with Explorer. Instead it is a standalone app that you use to browse the files on the SVN server (Repository) as well as your local files (Working Copy).

By SVN Client: svn://dev.anidb.info/svn/trunk
For write access contact an AniDB Mod.

If you have further questions feel free to ask in irc://irc.synirc.net/anidb-dev or irc://irc.synirc.net/anidb or pm a mod.

SVN via Tortoise

Here some tortoise specific notes.

After installing a version and having picked a dir, where to put your stuff right click in the new dir and select checkout In the following dialog enter svn://dev.anidb.info/svn/trunk/ in the url field. This will download the whole content of the svn to this dir. After this is done you will notice a green thingy in the file and dirname icons. (This means your local version matches the version in the SVN Once you edit any file it will turn red)

To add new content you can create new files and dirs like you are used via explorer. Editing the files can be done via any editor you want as well. You will notice no green thingy turning up for anything new you created. This means the file is not in the svn and hence not recognized. You have to add them first. In the context menu you will find an option who would have guessed it named add. This only creates a placeholder in the SVN. No actual content is written yet. Deleting things works analog. You first have to delete the placeholder.

SVN via RapidSVN

To get started, run RapidSVN and go to Repository -> Checkout and enter svn://dev.anidb.info/svn/trunk in the URL field and your desired local directory in the Destination Directory field.

You may now create/edit/delete any files or folders in your working copy dir. Any changes you make will be automatically recognized and highlighted in the RapidSVN file browser: items edited or deleted will have a red icon, and items created will have a question mark icon. To add created items to the SVN right click on them and choose Add (or select them and hit cmd+A). Note that Adding only lets them be recognized by the SVN, it does not commit their creation to the server. To commit changes, select the files, right click and choose Commit. You will be given a dialog box in which you may annotate what this commit entails. You may choose to leave this blank, but it's good practice to log your changes so others know what you've changed.

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 SVN.

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 SVN 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 SVN.

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 (/trunk/css/{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. /trunk/css/{your_style}/images)
   • You may use subfolders 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 autoprocessing 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:

 /trunk/css/<your project>
 /trunk/css/<your project>/description
 /trunk/css/<your project>/images
 /trunk/css/<your project>/images/screenshot.png
 /trunk/css/<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 server