Hatrack River Forum: Firefox tweaks: make Hatrack look prettier (nerdy thread) v1.02

This is topic Firefox tweaks: make Hatrack look prettier (nerdy thread) v1.02 in forum Books, Films, Food and Culture at Hatrack River Forum.

To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=030698

Posted by Nato (Member # 1448) on :

I've been messing around with Firefox recently, involving some playing with the userContent.css file. This file allows you to specify your own stylesheet for pages on the web, so you can customize them to your own liking.

I created a couple tweaks so far, and due to the incomplete usage of CSS on this old copy of UBB, it would be difficult to make many more, but I'm sure there are ways to get around it.

Here's what I did:

I made quotes look better: (box with outline, purple text)
{code} {/code} is green text in the same sort of box.
Posts that I make have my username in bigger green text. (To change this, edit my user# to your own-- bolded in the code)
Posts by kacard, our friendly administrator have her username in bigger red text.

This file can be used to tweak the way the Hatrack forum appears. The only problem with using this method is that your tweaks might spill over onto other pages, making them look different than they should. To solve this problem, I installed the URIid Firefox extension. That made it so I could specify that these tweaks should only be used on this forum.
Here is a screenshot of what the tweaks look like in action.If anybody wants to use them, below is all the code you need. In order to use this code you must:

Use Mozilla Firefox/Mozilla Suite
Download the URIid extension (allowing for site-specific CSS tweaks)
put the following code in your userContent.css file *instructions below*

code:

/* Hatrackhacks! */

/*color Nato's name */
body.uriid-www-hatrack-com-ubb tr td 
a[href='http://www.hatrack.com/ubb/cgi/ultimatebb.cgi?ubb=get_profile;u=00001448'] {
     color: green !important;
     font-size: 200% !important;
     font-family: verdana, arial, helvetica, sans-serif !important;
}

/*color kacard's name */
body.uriid-www-hatrack-com-ubb tr td 
a[href='http://www.hatrack.com/ubb/cgi/ultimatebb.cgi?ubb=get_profile;u=00000200'] 
{
     color: red !important;
     font-size: 200% !important;
     font-family: verdana, arial, helvetica, sans-serif !important;
}


/* Make quote and code boxes prettier */
body.uriid-www-hatrack-com-ubb table tr td blockquote {  
     border: thin solid black; 
     padding: 5px; 
     background: #fff; }

body.uriid-www-hatrack-com-ubb table tr td blockquote hr { width: 0px; border: none; }

body.uriid-www-hatrack-com-ubb table tr td pre { 
     color: green !important; 
     font-family: monospace !important;
     font-size: medium !important; 
}

body.uriid-www-hatrack-com-ubb table tr td blockquote font[size="2"] 
{ color: purple !important; }

*Instructions for editing your userContent.css file:
Mozilla's instructions (link)My instructions:
With a new Firefox installation, this file is not automatically created. A file called userContent-example.css is placed in the correct directory, however. You can rename this file to userContent.css and edit it to add this code.
If you haven't messed with userContent.css before, the code you copy into it will be the only contents of the file.

In Windows XP, the directory is something like:
C:\Documents and Settings\username\Application Data\Mozilla\Firefox\Profiles\default.z91\chrome\

I don't really know if anybody else around here wants to do this, but I'm trying to teach myself CSS, and doing this was an interesting exercise. If anybody has any tips for me, or any improvements, or anything at all, let me know.

A couple other useful tools:

bbCode Firefox extension (instructions) - Make posting BB code easier (this has many features Hatrack can't use, but for things like bold, italic, quotes, code, and urls, this is very useful. (I even made this list with it)
http://bugmenot.com/ - database of registration information for sites like nytimes.com that require you to register before you can read articles. There's also a Firefox Extension

[ January 11, 2005, 03:36 AM: Message edited by: Nato ]

Posted by Troubadour (Member # 83) on :

Looks good, man... I'll give this a try soon...

Posted by Nato (Member # 1448) on :

And now, if you want, you can block the WAVE and PARTY smileys with the following:

code:

/*block large smileys */
body.uriid-www-hatrack-com-ubb table tr td 
img[src='http://www.hatrack.com/ubb/forum/graemlins/party.gif'],
 body.uriid-www-hatrack-com-ubb table tr td 
img[src='graemlins/party.gif'] { display : none }

body.uriid-www-hatrack-com-ubb table tr td 
img[src='http://www.hatrack.com/ubb/forum/graemlins/thewave.gif'],
 body.uriid-www-hatrack-com-ubb table tr td 
img[src='graemlins/thewave.gif'] { display : none }

[ January 11, 2005, 03:37 AM: Message edited by: Nato ]

Posted by Shigosei (Member # 3831) on :

Is there any way to make Ralphie's posts bright orange and blinky? It would save me a lot of time if I didn't have to wade through everyone else's posts to find hers. Lately the Ralphie-to-noise ratio has been pretty low.

[ January 10, 2005, 04:37 AM: Message edited by: Shigosei ]

Posted by Nato (Member # 1448) on :

Yes, Shigosei. Here you go:

code:

/*Make Ralphie's username Orange And Bling-Bling */
body.uriid-www-hatrack-com-ubb tr td 
a[href='http://www.hatrack.com/ubb/cgi/ultimatebb.cgi?ubb=get_profile;u=00001565'] 
{
     color: #FF8800 !important;
     font-size: 200% !important;
     font-family: verdana, arial, helvetica, sans-serif !important;
     text-decoration: blink !important;
}

[ January 11, 2005, 03:35 AM: Message edited by: Nato ]

Posted by Nato (Member # 1448) on :

[bump]Shamless bump, but I promise it will be the only one![/bump]

Incidentally, I spent part of my afternoon today with Illustrator making a draft of a logo for my Ultimate frisbee team. We're U. of Oregon's B-Team, named "Daisy" (Think Daisy Duck and how bad it is to be beaten by a team named "Daisy.")

(link here)

Whatcha think?

Posted by vwiggin (Member # 926) on :

Looks great Nato! And with a name like Daisy, your logo better be good. [Wink]

Posted by Nato (Member # 1448) on :

I'm starting to think I should combine the two patches of grass.

Posted by Primal Curve (Member # 3587) on :

This is excellent.

Posted by Ryuko (Member # 5125) on :

I dunno if it's the tweaks, Nato, but all your posts are freakishly wide and they're messing up the forum's forumness.

Posted by mr_porteiro_head (Member # 4644) on :

This is great! I like being able to emphasize the names of certain posters.

What colors can I assign to the names?

Posted by Nato (Member # 1448) on :

quote:
I dunno if it's the tweaks, Nato, but all your posts are freakishly wide and they're messing up the forum's forumness.

It's the big code blocks with long lines, sorry! the <pre> tag that the forum uses for {code} doesn't allow for line breaks. Edit: Okay, I went back and put in some line breaks. Hopefully the forum's forumness isn't as messed up for you anymore.

quote:
What colors can I assign to the names?

Any color you want. Here's the W3C's css color reference: http://www.w3schools.com/css/css_colors.asp
Example:

code:

/*Make Porter's username a pretty shade of blue: */
body.uriid-www-hatrack-com-ubb tr td 
a[href='http://www.hatrack.com/ubb/cgi/ultimatebb.cgi?ubb=get_profile;u=00004644'] 
{
     color: #5555FF !important;  /* This is the line to edit text color. */
     font-size: 200% !important;
     font-family: verdana, arial, helvetica, sans-serif !important;
}

[ January 11, 2005, 03:59 AM: Message edited by: Nato ]

Posted by Ralphie (Member # 1565) on :

quote:
Is there any way to make Ralphie's posts bright orange and blinky? It would save me a lot of time if I didn't have to wade through everyone else's posts to find hers. Lately the Ralphie-to-noise ratio has been pretty low.

This made me laugh out loud. So much that I had to type the entire thing out.

Very flattering, Shigosei. Thank you. [Smile]

Posted by Nato (Member # 1448) on :

http://ottonomy.home.comcast.net/hatrack/ralphiebling.gif

Blinking Ralphie username in action!

Posted by Ralphie (Member # 1565) on :

That's... that's just beautiful.

I... I think I have something in eye.

Posted by Shigosei (Member # 3831) on :

Cool, Nato! I'm impressed with your CSS abilities (or abilitiez if that's not l33t enough for you).

quote:
Very flattering, Shigosei. Thank you.

Just doing my part to spread the Ralphie Luv! It's great to have you back. I'm glad you liked my post. [Blushing]

Posted by Nato (Member # 1448) on :

Hahaha, no. "Abilities" is plenty fine for me, and I'm really barely skilled at all. I'm in the early stages of learning CSS for sure. It took me about 6 hours just to get my little front page of my "website" switched from HTML tables to CSS. (And there are still some big problems with it that I can't figure out.)

Posted by Primal Curve (Member # 3587) on :

Nato...

Can you think of any way that would allow Firefox to display external images? I was trying to wrap my head around this one but I currently have a beer-powered buzz keeping my thoughts from myself.

Posted by fugu13 (Member # 2859) on :

Easiest way would be to just use CSS to set the background image of a handy element to an image (hosted whereever, CSS can use absolute URLs).

Posted by Nato (Member # 1448) on :

Umm, I think this is possible, but I'll have to look into it a little more. Right now I'm leaving for a basketball game, but I'll be back in a few hours, and I'll give it a look.

Some people I know at another forum have a lot of tweaks that work there (it's vBullitin-based, not UBB, so there is a lot more CSS already integrated to work with). I know they've been able to get image links to display inline there, but it might have been through a Firefox extension. I'll check it out.

Posted by fugu13 (Member # 2859) on :

Oh, you meant like that.

Lessee . . .

The trick will be to get only image links to display inline, and not other sorts of links . . .

*posts image link here to test on*

image

[ January 20, 2005, 09:02 PM: Message edited by: fugu13 ]

Posted by Nato (Member # 1448) on :

I don't think it would be too hard to recognize which links are image links.

I think that could be accomplished by using the following code: (for .jpg images)

code:

body.uriid-www-hatrack-com-ubb table tr td a[href*=".jpg"]] {     

}

The hard part would be to get the link to display the correct image AND display that image at the correct size. Puzzling.

Posted by mr_porteiro_head (Member # 4644) on :

What changes did you make in the upgrade to 1.02?

Posted by Nato (Member # 1448) on :

I don't quite remember. It was mostly cleaning up the code, and I think I fixed a couple little things with the QUOTE and CODE boxes.

----

To the images issue, I'm not sure we'll be able to do this with the userContent.css file. It's got some pretty heavy coding involved.

Posted by Nato (Member # 1448) on :

I found some javascript that might do the task (probably there are some bugs because I didn't understand what I was doing very well), but I can't figure out how to get it written on the page.

Is there any way to get a javascript script written on the page with the usercontent.css file? (I want it to be Hatrack-specific instead of just adding it to the main OnLoad() for every page.)

Posted by Bokonon (Member # 480) on :

Generally Javascript has to be in the HTML, not the CSS, so I don't know if it's possible.

-Bok

Posted by fugu13 (Member # 2859) on :

Ah, I had been searching for that class of selectors, but was missing it for some reason. It would be better to use the [attribute$=] attribute selector, as that matches to the end of the string.

*sigh* if only one could write url(attr(href)) in a content property.

Posted by Ryuko (Member # 5125) on :

I finally succumbed to firefox, just recently. I LOVE IT. Crazily. I love the tabs option. (fiddles with it) When I get back from work, I wanna put some of these weird codey things on it. With like, some of the cool people at Hatrack. MUWAHAHA.