AniDB:CSS DEV

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

1. keeping track of all css
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

open issues

1. screenshot filename and resolution
2. format and name of the descriptionfile (xml?)
3. stuff

Connecting to SVN

First thing you need a client. You can of course use any svn client you want, but we recomment 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

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 #anidb-dev or #anidb @irc.zirc.org 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 menas the file is not in the svn and henc enot 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.

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 project>)

2. name the dir as you want to call your style (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 project>/images)

• you may use subfolders below that one if you want)

4. add a screenshot of your style in the images folder with the following specifications: (filename: screenshot.<ext> and resolution:)

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:
• Last update:
• Status:
• further notes:

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

Optional:

6. 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 stop processing by adding a # in front of the line)

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 dropdown menu 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

(not done yet # upodates some configfile responsible for the dropdown menu in the profile)