AnimeSuki Forums

Register Forum Rules FAQ Members List Social Groups Search Today's Posts Mark Forums Read

Go Back   AnimeSuki Forum > General > Forum & Site Feedback

Notices

Reply
 
Thread Tools
Old 2008-10-17, 15:39   Link #1
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
Post Customizing animesuki [Tutorial/Help in First Post]

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 ToolsAdd-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:
Code:
@-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 FileSave 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 ToolsPreferencesAdvancedContentManage 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 PreferencesAdvancedStyle 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) ToolsInternet Options ⇨ (select the) General tabAccessibilityFormat documents using my style sheet
  2. (IE for Mac) PreferencesWeb ContentUse my style sheet
Konqueror
Not doable. Same problem as with Safari.
For reference the setting path is SettingsConfigure KonquerorStylesheetsGeneral

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."
    Code:
    /* === 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."
    Code:
    /* === 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."
    Code:
    /* === 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."
    Code:
    /* === 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.
    Code:
    /* === 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."
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === Turn-Off by User ID [Color] === */
    body tr.uid00000 td.alt1 > div[style][id] font { color: Black !important; }
    -----------------------
    To remove bold formatting.
    Code:
    /* === Turn-Off by User ID [Bold] === */
    body tr.uid00000 td.alt1 > div[style][id] b { font-weight: normal !important; }
    -----------------------
    To remove italics formatting.
    Code:
    /* === Turn-Off by User ID [Italics] === */
    body tr.uid00000 td.alt1 > div[style][id] i { font-style: normal !important; }
    -----------------------
    To remove underline formatting.
    Code:
    /* === Turn-Off by User ID [Underline] === */
    body tr.uid00000 td.alt1 > div[style][id] u { text-decoration: none !important; }
    -----------------------
    To remove alignment formatting.
    Code:
    /* === Turn-Off by User ID [Alignment] === */
    body tr.uid00000 td.alt1 > div[style][id] div[align] { text-align: left !important; }
    -----------------------
    To remove size formatting.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === Profile Info [Disable Joindate] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div { display: none; }
    Code:
    /* === 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.
    Code:
    /* === Profile Info [Show Joindate] === */
    body tr[valign="top"] td.alt2[width="175"] div.smallfont br + div { display: block; }
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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)
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === 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.
    Code:
    /* === No dotted border on links === */
    a { outline: 0; }

More: [1] [2]

Last edited by felix; 2009-04-08 at 23:21. Reason: Update.
felix is offline   Reply With Quote
Old 2008-10-18, 21:59   Link #2
KholdStare
ISML Technical Staff
*Graphic Designer
 
 
Join Date: Dec 2006
Location: Phoenix, AZ
Age: 25
Send a message via AIM to KholdStare Send a message via MSN to 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.
KholdStare is offline   Reply With Quote
Old 2008-10-19, 07:40   Link #3
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
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.
__________________
felix is offline   Reply With Quote
Old 2008-10-19, 07:52   Link #4
NightWish
Crushcrushcrush
*Administrator
 
 
Join Date: Mar 2003
Age: 34
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.
__________________
Lay down on the ground, and let the tears run from you, crying to the grass and trees and heaven, finally on your knees; Let me live again…
NightWish is offline   Reply With Quote
Old 2008-10-19, 10:59   Link #5
KholdStare
ISML Technical Staff
*Graphic Designer
 
 
Join Date: Dec 2006
Location: Phoenix, AZ
Age: 25
Send a message via AIM to KholdStare Send a message via MSN to 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.
KholdStare is offline   Reply With Quote
Old 2009-01-01, 14:25   Link #6
WanderingKnight
Gregory House
*IT Support
 
 
Join Date: Jun 2006
Location: Buenos Aires, Argentina
Age: 25
Send a message via MSN to WanderingKnight
Question: How do I specifically set up a different font for regular sans-serif fonts and fixed-width [code] tags?
__________________


Place them in a box until a quieter time | Lights down, you up and die.
WanderingKnight is offline   Reply With Quote
Old 2009-01-01, 15:10   Link #7
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
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"
Code:
/* === 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:
Code:
The quick brown fox jumps over the lazy dog
After:
Code:
The quick brown fox jumps over the lazy dog
Code:
/* === 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 is offline   Reply With Quote
Old 2009-03-28, 12:30   Link #8
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
*Cats thinks banners rotate too fast*
Te he he.
Code:
/* === [Banner] Hide Banner === */
h1#asf-head {display: none !important;}
Code:
/* === [Banner] Custom Background === */
h1#asf-head {background-image: url('http://forums.animesuki.com/images/as.global/banners/2009/03/bg.jpg') !important;}
Code:
/* === [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,
Quote:
Originally Posted by Slice of Life View Post
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:
Here is the snippet version for this thread:
Code:
/* === [Spoiler] All Open === */
.spoilerbox {display: block !important;}

Last edited by felix; 2009-03-28 at 12:46.
felix is offline   Reply With Quote
Old 2009-03-29, 11:18   Link #9
KholdStare
ISML Technical Staff
*Graphic Designer
 
 
Join Date: Dec 2006
Location: Phoenix, AZ
Age: 25
Send a message via AIM to KholdStare Send a message via MSN to KholdStare
Way to disable reputation, Cats.
KholdStare is offline   Reply With Quote
Old 2009-03-29, 17:15   Link #10
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
You have to be more clear on the bug. What happens and what is the cause?
__________________
felix is offline   Reply With Quote
Old 2009-04-08, 22:57   Link #11
chikorita157
ひきこもりアイドル
*IT Support
 
 
Join Date: Feb 2009
Location: New Jersey, United States
Age: 24
Send a message via Skype™ to chikorita157
Quote:
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.
__________________
chikorita157 is offline   Reply With Quote
Old 2009-04-08, 23:23   Link #12
felix
sleepyhead
*Author
 
 
Join Date: Dec 2005
Location: event horizon
All fixed, thanks.
__________________
felix is offline   Reply With Quote
Reply

Tags
forum, tutorial, faq, style

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 09:56.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
We use Silk.