InsaneJournal

Tweak says, "THERE CAN BE ONLY ONE"

~didja just pitch up from mars? (sherlock) wrote,
@ 2008-01-24 21:22:00

Entry tags:

! resources

Tweaking Worksafe --> Sidebar

branchandroot is working hard to work out the kinks of the new IJ sitescheme, but I thought it might be useful to provide a Firefox css 'fix' for right now to deal with common complaints (and some of my own aesthetic nit-picks - like Verdanaizing everything) that may not be fixable in the long run.

As always, if you find it particularly useful, it's nice of you to link :>

"Worksafe" (sidebar) in Firefox 2.0.0.* - Apparently works on Mac!Firefox, hurrah! Compatible with "Dramatic" if you alter the colors appropriately (see the comment in .sidebar #IJ-sitepage-nav)

**** NOTE **** The css for the site scheme is still being worked out, so if you see any weird screw ups, come back and re-copy/paste the code - chances are I've already changed the code to keep up with the site-scheme's evolving css (why, yes I DO spend more time on IJ than is healthy).

Major things that have been fixed
• Verdana!
• Font sizes more normalized
• Colors more consistent on all pages
• Horizontal scroll gone (now fixed in IJ site scheme)
• Removes <hr> for cleaner borders
• changes em ~> px (limits text size to normal +/- a size but cleans up hovers)

Fixes I'm working on
• Centering the userinfo menubox (with add, nudge, to-do etc) above the bio box

**PLEASE NOTE -- some of this code may be defunct as site code gets updated. Defunct code won't harm your layout (and if it does, I'll notice and update accordingly)**

If you'd like to use it, you need to do the following:

1) Install the add-on "stylish"
https://addons.mozilla.org/en-US/firefox/addon/2108

2) Right click the stylish icon --> write style --> 'blank style'

3) Copy and paste the following code into the blank space, name it, hit save. Everything is commented so you can decide if you don't like or want to change any of the changes.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("insanejournal.com") {

.sidebar #IJ-smallfont {
font-size: 100% !important;
}/* fixes their attempt to fix the font size */

.sidebar #IJ-sitepage-login a{
font-family:verdana !important;
font-size:9pt !important;
}/* login link text */

.sidebar #IJ-sitepage-userpic {
width: 150px !important;
}/* makes the width correct */

.sidebar #IJ-sitepage-tweak {
width: 400px !important;
}/* moves tweak back over to the right */

.sidebar #tweak-says {
font-family:verdana !important;
font-size:8pt !important;
}/* tweak says text */

.sidebar #freqlinks a{
font-family:verdana !important;
font-weight:bold !important;
text-decoration:none !important;
}/* makes My IJ, Post, etc. Verdana, bold, no underline */

.sidebar #top-search {
font-family:verdana !important;
font-size: 8pt !important;
}/* makes the search by: verdana */

.sidebar #IJ-sitepage-content, #IJ-sitepage-content td{
font-family:verdana !important;
font-size:10pt !important;
}/* makes the page content 10pt verdana (including userinfo) and
fixes the 'font in tables is weirdly bigger' issue */

.sidebar #IJ-sitepage-content {
margin: 0 0 0 150px !important;
padding-right: 50px !important;
}/* gives the sidebar room and adds padding on the right */

.sidebar #IJ-sitepage-nav {
border-right: 1px solid #333 !important;
background:#edebd5 !important;
font-family:verdana !important;
font-size:8pt !important;
width: 150px !important;
float: none !important;
position: absolute !important;
left: 0px !important;
top: 0px !important;
}/* sidebar font to verdana and right width; also gives the sidebar
a background and border so it doesn't look bleh during load time;
for Dramatic use -- background #DA7125 !important; -- */

.sidebar #IJ-sitepage-nav a{
width:130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
font-size:8pt !important;
}/* makes links in sidebar the right width */

.sidebar #IJ-sitepage-nav ul ul li{
padding-left: 10px !important;
padding-right: 0 !important;
margin-right: 0 !important;
width: 130px !important;
}/* replaces em with px for more accurate spacing */

.sidebar #IJ-sitepage-nav li {
width: 130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
}/* replaces em with px for more accurate spacing */

.sidebar #IJ-sitepage-nav ul ul li:hover a{
width: 130px !important;
padding-right: 0 !important;
margin-right: 0 !important;
background: transparent!important;
}/* turns em into px for more accurate spacing */

.sidebar #IJ-sitepage-nav ul ul li:hover {
width: 140px !important;
padding-right: 0 !important;
margin-right: 0 !important;
}/* turns em into px for more accurate spacing */

.sidebar #IJ-sitepage-content-inner .lesstop{
border-top: 2px solid #edebd5 !important;
border-bottom: 2px solid #edebd5 !important;
font-size:10pt !important;
padding: 15px 0 !important;
}/* puts the comment dividers back but prettier and not screwing up the horiz rule */

.sidebar #IJ-sitepage-content hr, .sidebar #IJ-sitepage-footer-inner hr{
display:none !important;
}/* removes hr - why? because they're ugly */

.sidebar #IJ-sitepage-footer-inner a{
font-family:verdana !important;
font-size:9pt !important;
}/* resizes home | site map | etc. text and sets verdana */

.sidebar #IJ-sitepage-footer {
margin-left: 150px !important;
padding-top: 50px !important;
}/* makes the margin of the footer conform to the sidebar */

.sidebar #EntryForm #infobox table {
background-color: #fff !important;
border: 1px solid #dbd5b7 !important;
padding: 10px !important;
}/* makes the info box (update page) slightly less hideous */

.sidebar #EntryForm #infobox table td {
border: none !important;
}/* gets rid of that random dashed line on the infobox (update page) */

.sidebar #EntryForm #MetaInfo th{
font-size: 11pt !important;
}/* makes the headers (poster, date, subject) a normalish size */

.sidebar .section_head {
background: #dbd5b7 !important;
}/* changes the orange on the various manage pages
(REMOVE THIS if you are using dramatic) */

.appwidget-gettingstarted {
display: none !important;
}/* gets rid of the appwidget which does not
exist on IJ and leaves a funky box*/

}/* <-- this is the last bracket */

MAC USERS
(add this before the last bracket)

html {
overflow-x: hidden !important;
}/* removes the horizontal scroll */

Other things you can change (make sure to put them before the last bracket):

#tweak-pic {
  background: none !important;
}/* removes tweak picture (tweak says)*/

#IJ-sitepage-tweak #tweak-says {
  display: none !important;
}/* removes quote (tweak says)*/

#IJ-sitepage-tweak {
  display: none !important;
}/* removes entire tweak says section*/

(Post a new comment)

	coeur_delanuit 2008-01-25 03:28 pm UTC (link)
	THIS IS SO EXCELLENT. YOU ARE MY FAVORITE. ♥ But my sidebar is a strange color now...do you know which part in the CSS that is? :o BUT AGAIN. This is amazing, as always. You are my Firefox savior. :D (Reply to this) (Thread)

	coeur_delanuit 2008-01-25 03:30 pm UTC (link)
	NEVERMIND. I was on "Dramatic" instead of "Worksafe." It's better now. The orange is gone!! OH MY GOODNESS. IT'S ALL GONE. I LOVE YOU, EMBABY! (Reply to this) (Parent)

	wastintime 2008-01-25 04:54 pm UTC (link)
	Awesome. I've already have a slap-dash bit of code I'm working on myself, but I'll definitely pass a link to this post around. :] (Reply to this)

	misskittenpants 2008-01-25 06:36 pm UTC (link)
	Just wanted to let you know that I have Mac!Firefox and it worked perfectly for me. Thank you! (Reply to this) (Thread)

	sherlock 2008-01-25 06:59 pm UTC (link)
	Oh fantastic - thanks for letting me know :D (Reply to this) (Parent) (Thread)

	misskittenpants 2008-01-25 07:11 pm UTC (link)
	You're very welcome! (Reply to this) (Parent)

	kraken 2008-02-02 11:27 pm UTC (link)
	Ah, that's much better. :D Thanks for putting this up. One note: before I could remove the Tweak image at the top of the page, I had to edit the code a bit: .sidebar #tweak-pic { background: none !important; }/* removes tweak */ I don't know if that's just me, though. (Reply to this) (Thread)

	sherlock 2008-02-02 11:32 pm UTC (link)
	I didn't have that trouble, but I shall edit to add as it doesn't do any harm. Thanks for the feedback :) (Reply to this) (Parent)

	khushalecki 2008-02-04 08:16 pm UTC (link)
	Did you know that you're awesome? This totes helped me. ♥ (Reply to this)

	nanny_ashtoreth 2008-03-28 03:13 pm UTC (link)
	This is wonderful! Thank you. (Reply to this)

	econnor 2008-07-11 08:49 pm UTC (link)
	This is AMAZING thank you. (Reply to this)

devotfeige
2008-07-15 07:12 am UTC (link)

I found this by accident, but that makes me no less grateful. ♥

One itty problem--the horizontal scrollbar is still showing up for me, despite apparently having been 'fixed' both here and in the site scheme. My best guess is that somewhere along the line something is hating on my Mac, but honestly I have no clue how anything works, so I couldn't tell you with any degree of certainty.

I'm also guessing due to the "apparently works in Mac!Firefox", you'd have no way of verifying this yourself. XD Ah well. I can attempt to seek out answers elsewhere. Anyway, thanks again.

(Reply to this) (Thread)

	devotfeige 2008-07-15 07:34 am UTC (link)
	Ah! I fixed it! Probably not in the most comprehensive way for someone with actual knowledge of CSS, but still. Stylish is amazing! If nobody else has been having my problem, that's it taken care of, then. c: (Reply to this) (Parent) (Thread)

	nuit 2008-07-15 07:48 am UTC (link)
	Do you mind if I ask how you did it? I'm using Firefox 3 on a Mac and getting the horizontal scroll. (Reply to this) (Parent) (Thread)

devotfeige
2008-07-15 07:54 am UTC (link)

I made a new style (dubbed "Scrollbar Fix") and used this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("insanejournal.com") {

html,body
{
height: 100% !important;
width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}

}

---

There's probably a more comprehensive way to do that, but it worked for me and I have absolutely zero knowledge of CSS, so I'm not willing to play around with it or attempt to integrate it into one of the styles I'm already using, for fear of messing something up.

(Reply to this) (Parent) (Thread)

	lupusmalus 2008-07-15 05:06 pm UTC (link)
	It should be enough to say overflow-x: hidden !important - could you check and let me know (I can add this in for mac users) :) (Reply to this) (Parent) (Thread)

	devotfeige 2008-07-15 05:09 pm UTC (link)
	That does indeed appear to work just as well. :) (Reply to this) (Parent) (Thread)

	sherlock 2008-07-15 05:12 pm UTC (link)
	Thank you :) (Reply to this) (Parent)

	behindtonsils 2008-07-16 07:44 am UTC (link)
	Omg that's brilliant thank you so much for doing this, I'll link my friends to it. So relieved that the font is normalized! (Reply to this)

	ridethebullet 2009-03-31 12:09 am UTC (link)
	Thank you, thank you, thank you! I have been trying to find a way to resolve this issue (the horizontal scroll) for weeks, but no one seems to know what I'm talking about. I greatly appreciate your help! (Reply to this)

	splott 2009-05-21 03:42 pm UTC (link)
	hfaksjelaj thanks. (Reply to this)

black_as_knight
2009-07-18 07:03 am UTC (link)

Really, really pleased with everything you've said -- just noting:

I want to also remove Tweak's quotes. I noticed that IJ has set up an alternative stylesheet to do this -- or just remove Tweak, or just remove the quote. It goes like so:

#IJ-sitepage-tweak #tweak-pic { display: none; }
#IJ-sitepage-tweak #tweak-pic img { display: none; } /* to take out the transparent image */

#IJ-sitepage-tweak #journal-title { margin-left: 30px; }
	
#IJ-sitepage-tweak #tweak-says {display: none; }

(Reply to this) (Thread)

	black_as_knight 2009-07-18 07:04 am UTC (link)
	(Since the effect of an alternate stylesheet dies the moment you refresh the page, I was quick to just copy-paste this text into your offered stylesheet. Thought you might wanna offer it to people like me, too. X3 ♥) (Reply to this) (Parent) (Thread)

	sherlock 2009-07-18 07:10 am UTC (link)
	adding, along with #IJ-sitepage-tweak, if people want to remove the entire chunk. I wasn't sure if people wanted all/none/part as no one had asked yet :) (Reply to this) (Parent) (Thread)

	black_as_knight 2009-07-18 08:29 am UTC (link)
	Killing the site title, too, I notice. (Not sure if that was the desired effect! So I thought I'd mention. X3) ♥ (Reply to this) (Parent) (Thread)

	sherlock 2009-07-18 08:38 am UTC (link)
	Yep :] (Reply to this) (Parent) (Thread)

black_as_knight
2009-07-18 08:46 am UTC (link)

♥

--Oh, hey, while I've got you!

.sidebar #EntryForm #infobox table {
background-color: #fff !important;
border: 1px solid #dbd5b7 !important;
padding: 10px !important;
}/* makes the info box (update page) slightly less hideous */

I use Monodramatic; I tweaked the sidebar color appropriately, and removed the box marked for removal with Dramatic. (It worked with Monodramatic, too; the box went dark gray.) But I can't figure out what this bit is changing. To be safe, I swapped it to Monodramatic's secondary highlight color, but I'm curious...?

(Reply to this) (Parent) (Thread)

	sherlock 2009-07-18 09:13 am UTC (link)
	I think that's a bit of outdated code -- whenever I wrote it there was a strangely coloured box on the update page. I'll look into it more in the morning to make sure it's actually been fixed before removing it. (Reply to this) (Parent)

	tetrisalphabet 2009-07-19 06:30 am UTC (link)
	You are amazing for doing this. I'm fail at code, so I don't know how one would go about doing this... Is there anything one can add to change that huge ugly face userinfo image to something else? (Reply to this) (Thread)

	sherlock 2009-07-19 08:09 am UTC (link)
	Yes there is! Check this out: http://userstyles.org/styles/16795 (Reply to this) (Parent) (Thread)

	tetrisalphabet 2009-07-19 06:12 pm UTC (link)
	That is wonderful~ However, it only seems to work on IJ sitescheme pages, not on actual journal views. For example, when viewing my journal, the userinfo.gif image in the top entry still appears the same as always. (Reply to this) (Parent) (Thread)

	sherlock 2009-07-20 01:25 am UTC (link)
	hmm. I don't think I have an answer to that. If I find on I will let you know but I'm not sure why it's like that. (Reply to this) (Parent)