Customizing animesuki [Tutorial/Help in First Post]

[felix]

In this thread you will find information on how to change the look of the forum (know that not everything is possible). It is presumed you do not have knowledge of things such as Cascading Style Sheets (Css) or HyperText Markup Language (HTML). It is however presumed you know how to edit a simple text file; which is required for some browsers.

For the more knowledgeable: This is not a personal thread so feel free to contribute to it as you wish, but please have a code comment in the format /* === Title of Code === */ at the start of your code snippets.

---

info: if I say hit Ctrl+F5 what I really mean is: "while holding down Ctrl, press F5"

Preliminaries: Setting up your browser
Please read the paragraph related to your browser

Firefox
Get the Stylish plugin @ Firefox Add-ons. After installing it, in Firefox go to Tools ⇨ Add-ons ⇨ (find Stylish in the list and select) Options. You are now in the Stylish window. Select Write..., for the description type in Animesuki Forums and in the big box paste in the following:

@-moz-document domain(forums.animesuki.com) 
{
/* Add code snippets between the two ant lines bellow
   ---------------------------- */
  




/* ----------------------------
   Don't delete the closing curly brace bellow. */
}

Click Save and you're all done. A entry will be added for you to edit as you modify the style of the forum.

(the plugin Stylish will also work for Flock and Thunderbird)

Opera
First create a text file, then open it and go to File ⇨ Save as.... As the name type "userstyle.css" (including the quotes) and save it somewhere where you feel you won't want to move it later. After you save it, go to Opera and in Tools ⇨ Preferences ⇨ Advanced ⇨ Content ⇨ Manage Site Preferences... click the Add... button. Select the tab General and in the field Site type forums.animesuki.com then go to the Display tab and in the My Style Sheet field browse & select the file you created earlier. Hit Ok, close etc and all done. You can now add code to your file to make things happen. If Opera is open while you edit the file, hit Ctrl+F5 to force it to update to your latest changes.

OmniWeb
Check out tutorial by chikorita157!

(customizing sites in the following browsers won't work)

Safari
It's not very complicated but (unfortunately) currently it is impossible to do for the forum.

The following is a description of how it is done in safari.
Note that it is technical.
Go to Preferences ⇨ Advanced ⇨ Style Sheet. There you can set the stylesheet. Now Safari (like most browsers) doesn't have support for site-specific-styles but there is a trick (which in the case of the forum won't work). To make Css rules site specific the trick is you find something that can't possibly be in another website (e.g. body[title="Animesuki Forum"]) and proceed every rule with it. The style sheet will still be global but the rules won't do anything on other sites.

Internet Explorer
Not doable, same as with Safari.
Reference path, to set custom user styles go to

1. (IE for windows) Tools ⇨ Internet Options ⇨ (select the) General tab ⇨ Accessibility ⇨ Format documents using my style sheet
2. (IE for Mac) Preferences ⇨ Web Content ⇨ Use my style sheet

Konqueror
Not doable. Same problem as with Safari.
For reference the setting path is Settings ⇨ Configure Konqueror ⇨ Stylesheets ⇨ General

Google Chrome
Unknown, sorry. I'm am going to guess there is a css file somewhere in chrome which you could edit in a manner similar to safari to enable you to customize the forum. If you're using Chrome just for the style there are alternatives in other browsers: Firefox's Chromifox, Opera's Chrome Theme.

Netscape
Not doable, same problem as with safari. But for reference you must save the style under the name: userContent.css in your user profiles (the Safari problem applies). Also Netscape as a browser is no longer supported.

Preliminaries: How to work with code snippets
Just some explaining

Here's how it works if you've finished setting up your browser then what you need to do now copy Css code snippets to make things happen. I've written some bellow with the more often requested or otherwise mentioned fixes, as well as a few others. Read the description for more details on what each of them does.

If you like the snippet just copy/paste the code in the snippet to your add-on or css file. Refreshing the page or in some cases (for some browsers) restarting the browser may be necessary to see the effects.

Code snippets
The code you need to make things happen

1. Custom typeface
   Will enable special formating
   
   Example
   Before: "This is a post with no font formatting."
   After: "This is a post with no font formating."
   

   /* === Change forum default typeface === */
   body * { font-family: 'Comic Sans MS' !important; }

2. Custom font color
   Will enable special formating
   
   Example
   Before: "This is a post with no color formatting."
   After: "This is a post with no color formating."
   

   /* === Change forum default color === */
   body * { color: red !important; }

3. Custom size
   Will enable special formating
   
   Example
   Before: "This is a post with no size formatting."
   After: "This is a post with no size formating."
   

   /* === Change forum default font size === */
   body * { font-size: x-large !important; line-height: 1 !important; }

4. Turn-Off Special Fonts
   Will remove font formatting in posts.
   
   Example
   Before: "This is a post with font formating."
   After: "This is a post with font formatting."
   

   /* === Turn-Off Special Fonts === */
   body font { font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important; }

   -----------------------
   If you wish to eliminate just one specific font replace the underlined text bellow with the name of the font.
   

   /* === Turn-Off Special Fonts [Custom] === */
   body font[face="Comic Sans MS"] { font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important; }

5. Turn-Off Special Colors
   Will remove color formating in posts.
   
   Example
   Before: "This is a post with color formatting."
   After: "This is a post with color formatting."
   

   /* === Turn-Off Special Colors === */
   body font[color] { color: Black !important; }

   -----------------------
   As an alternative you can make color text always be the same color.
   Example
   Before: "This is a post with color formatting."
   After: "This is a post with color formating."
   You can replace the underlined value bellow with whatever color you want.
   

   /* === Turn-Off Special Fonts [Alternative] === */
   body font[color] { color: DarkBlue !important; }

   -----------------------
   How about a custom selection of colors. Lets say you don't mind Red and Blue.
   Example
   Before: "This is a post with color formatting."
   After: "This is a post with color formatting."
   What you need to do is copy one of the two versions above then copy the code bellow to turn on the colors you want.
   

   /* === Turn-Off Special Fonts [Color Enable Switch] === */
   body div font[color="Red"] { color: Red !important; }

   Replace the underlined text with the color you want to turn on.
   
   
6. Turn-Off by User ID
   You may turn off options just for the posts belonging to a certain user.
   Replace the underlined example ID (00000) with your desired ID.
   -----------------------
   To remove font formatting.

   /* === Turn-Off by User ID [Font] === */
   body tr.uid00000 td.alt1 > div[style][id] font { font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif !important; color: black !important; }

   -----------------------
   To remove color formatting.

   /* === Turn-Off by User ID [Color] === */
   body tr.uid00000 td.alt1 > div[style][id] font { color: Black !important; }

   -----------------------
   To remove bold formatting.

   /* === Turn-Off by User ID [Bold] === */
   body tr.uid00000 td.alt1 > div[style][id] b { font-weight: normal !important; }

   -----------------------
   To remove italics formatting.

   /* === Turn-Off by User ID [Italics] === */
   body tr.uid00000 td.alt1 > div[style][id] i { font-style: normal !important; }

   -----------------------
   To remove underline formatting.

   /* === Turn-Off by User ID [Underline] === */
   body tr.uid00000 td.alt1 > div[style][id] u { text-decoration: none !important; }

   -----------------------
   To remove alignment formatting.

   /* === Turn-Off by User ID [Alignment] === */
   body tr.uid00000 td.alt1 > div[style][id] div[align] { text-align: left !important; }

   -----------------------
   To remove size formatting.

   /* === Turn-Off by User ID [Size] === */
   body tr.uid00000 td.alt1 > div[style][id] font[size] { font-size: 10pt !important; }

7. Turn-Off Signatures by User ID
   Disables the signature of a specific user.
   Replace the underlined example ID (00000) with your desired ID.

   /* === Turn-Off Signatures by User ID === */
   body tr.uid00000 td.alt1 > div[style][id] + div[style] { display: none !important; }

8. Turn-Off Avatars by User ID
   Disables the avatar of a specific user.
   Replace the underlined example ID (00000) with your desired ID.

   /* === Turn-Off Avatars by User ID === */
   body tr.uid00000 td.alt2 > div + div.smallfont + div.smallfont a img { display: none !important; }

9. Turn-Off Text Alignment
   If you don't like centered or right aligned text this will turn it off.

   /* === Turn-Off Text Alignment === */
   body tr td.alt1 > div[style][id] div[align] { text-align: left !important; }

10. Profile Info
    Removes Location, Join date etc.
    

    /* === Profile Info [All] === */
    tr[valign="top"] td.alt2[width="175"] div.smallfont div { display: none; }

    -----------------------
    If you want to disable only part of them, copy instead of the above only the individual bits of code bellow.
    

    /* === Profile Info [Disable Joindate] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div { display: none; }

    /* === Profile Info [Disable Location] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div + div { display: none; }

    -----------------------
    If you want to only enable part of them, copy the first bit of code that hides everything then the bits bellow depending on which of the items you want to enable.
    

    /* === Profile Info [Show Joindate] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div { display: block; }

    /* === Profile Info [Show Location] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div + div { display: block; }

11. Maximum Image Size
    Sets a limit, images past it will be proportionally scalled down to fit.
    If you right click the image and choose View Image you will see it full size.

    /* === Maximum Image Size === */
    body tr div[id][style] img { max-width: 600px !important; }

    Modify the underlined to whatever limit (pixels) you are comfortable with.
    This won't affect signatures or avatars only images inside the post body.
    -----------------------
    To set a similar limit for signatures, use this code. You'll need to use the above code with this, otherwise this will apply to all images. To apply only to sigs, so allow images to be normal size, copy the above code and set the limit to 10,000 or something big like that.
    

    /* === Maximum Image Size [Signature] === */
    tr div[style] img { max-width: 350px !important; }

    Again change the underlined text to your preference.
    -----------------------
    To limit instead of the width the height apply the following
    (no worries you can use both the height and width limit at the same time)
    The underlined is of course the value you can play with. (px = pixels)
    

    /* === Maximum Image Size [Signature-Height] === */
    tr div[style] img { max-height: 100px !important; }
    body tr div[id][style] img { max-height: 10000px !important; }

12. Hide Banner (deprecated)
    Hides the animesuki banner on top.
    

    /* === Hide Banner === */
    body a img[alt][width="760"][height="100"] { display: none !important; }

13. Header Size Limit
    This will make size 4 & 5 text look the same and size 6 & 7 as well, besides being considerably smaller and in caps.

    /* === Header-Size Limit === */
    tr td.alt1 > div[style][id] font[size="4"], tr td.alt1 > div[style][id] font[size="5"] { font-size: 20px !important; }
    tr td.alt1 > div[style][id] font[size="6"], tr td.alt1 > div[style][id] font[size="7"] { font-size: 26px !important; font-variant: small-caps; }

14. Hide Horizontal-Break
    This will hide all uses of the [hr] tag but the space and displacement is maintained.

    /* === Hide Horizontal-Break === */
    tr td.alt1 > div[style][id] hr { visibility: hidden; }

15. Edited Note [No Horizontal-Break] (version 2)
    This will delete the horizontal line that appears in edit notes.

    /* === Edited Note [No Horizontal-Break] === */
    tr div[style][class="smallfont"] hr[size="1"] { visibility: hidden !important; }

16. No dotted border on links
    Removes the dotted border that appears when you click a link to show that it's active.

    /* === No dotted border on links === */
    a { outline: 0; }

More: [1] [2]

[KholdStare]

I have no clue if this works, but I give props to you for creating a solution. Unfortunately, I have to spread around some.

[felix]

I've tested them for meeting the objective and also for any unwanted side-effects (I'm using a lot of them as small fixes to the forum right now). You don't have to worry about the Css3 selectors, the only two browsers that support site-specific usestyles also have excellent Css support.

[NightWish]

Very nice. The only downsides to this are that it:

• Requires you to use a certain browser (not a big drawback given the relative popularity of the browsers)
• Doesn't follow you around (because it is client bound), and
• May all break if we (or Jelsoft) make alterations to the forum style (could be a problem, unless you're willing to keep on top of it )

Other than that, thank you for the contribution.

[KholdStare]

This might be a bit off-topic but Portable Apps for Firefox 3.1 just came out recently. It's exactly what it is; you can run FireFox from your flash drive with your own personal settings, cookies, bookmarks, etc... This might be useful if you want to take your own personalized browser with you.

[WanderingKnight]

Question: How do I specifically set up a different font for regular sans-serif fonts and fixed-width [code] tags?

[felix]

Changing the font for the entire forum is specified in A. of the list in the first post.

If you only wish to change the font in posts.

Custom Typeface [post-only]
Changes the typeface only for posts. You may use values such as sans-serif or serif to specify that the browser/system default should be used.

Example
Before: "The quick brown fox jumps over the lazy dog"
After: "The quick brown fox jumps over the lazy dog"

/* === Custom Typeface [post-only] === */
body table[class="tborder"] tr[valign="top"] td[class="alt1"] 
{ font-family: 'Arial Black' !important; }

For your second question,

Code-Tag Custom Typeface
Changes the typeface used in [code] tags. You may use values such as sans-serif or serif to specify that the browser/system default should be used.

Example
Before:

The quick brown fox jumps over the lazy dog

After:

The quick brown fox jumps over the lazy dog

/* === Code-Tag Custom Typeface === */
body table[class="tborder"] tr[valign="top"] td[class="alt1"] pre[class="alt2"][dir="ltr"] 
{ font-family: 'Arial Black' !important; font-size: x-small; line-height: 1; }

Example font sizes: x-small, small, large, x-large, 12pt, 12pc, 12px, 12ex, 12em, 12%. (the last three are relative)

[felix]

*Cats thinks banners rotate too fast*

Te he he.

/* === [Banner] Hide Banner === */
h1#asf-head {display: none !important;}

/* === [Banner] Custom Background === */
h1#asf-head {background-image: url('http://forums.animesuki.com/images/as.global/banners/2009/03/bg.jpg') !important;}

/* === [Banner] Fixed Banner === */
h1#asf-head a[name="top"] + a[href="/"] 
{background-image: url('http://forums.animesuki.com/images/as.global/banners/2009/03/02.jpg') !important;}

--------------------------
One by Slice of Life,

Originally Posted by Slice of Life

To answer my own question after doing some research: Yes, there is an add-on that does the trick, namely Stylish which allows you to write your own stylesheets to override the ones already present. It's easy to implement a minimal solution that keeps all spoilerboxes always open for you.

Spoiler for the necessary code:

@-moz-document domain("forums.animesuki.com") {
.spoilerbox
{ 
display: block!important;
}
}

Here is the snippet version for this thread:

/* === [Spoiler] All Open === */
.spoilerbox {display: block !important;}

[KholdStare]

Way to disable reputation, Cats.

[felix]

You have to be more clear on the bug. What happens and what is the cause?

[chikorita157]

OmniWeb
Officially, no way to do it.

Actually, Omniweb 5.5 or later supports user CSS and site specific user CSS using the Site Preferences. Tutorial below:


Also, now it can be downloaded for free.

[felix]

All fixed, thanks.